vbali blogja

just a geek with a blog

Ajax és a Zend Framework

Szerettem volna egy egyszerű, minimalista kis alkalmazást készíteni a Zend Framework segítségével, Ajax-os hívások kiszolgálására, de nem találtam egyetlen példát sem ami valóban az egyszerűséget és a lényegi működést lett volna hivatott bemutatni. Egészen addig amíg bele nem botlottam William Graham Ajax 101: A Simple Example of Using Ajax with the Zend Framework című írásába. Ezen a példán dolgozgattam, gyurmázgattam egy kicsit az alábbi eredménnyel:

Tényleg csak a lényeg van benne, semmi extra. A kliens oldalon begépelt szöveget megfordítja vagy változatlanul hagyja szerver oldalon, persze oldal újratöltés nélkül. Persze az érdemi munkát a Prototype library végzi, de a Zend_Json osztály is besegít a munkába. A lényegi részek az alábbiak:

index.php 
1
2
3
4
5

<?php
throwExceptions(true);
$frontController->setControllerDirectory('./application/controllers');

$frontController->dispatch();
IndexController.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

<?php
view->baseUrl = $this->_request->getBaseUrl();
      Zend_Loader::loadClass('Zend_Debug');
      Zend_Loader::loadClass('Zend_Json');
  }
  
  function indexAction() {
      $this->view->title = "Zend Ajax 101";
  }
  
  function getDataAction() {
      $this->_helper->viewRenderer->setNoRender();
      $state = $this->_request->getParam('state');
      $data = Zend_Json::decode($state);
      sleep(1);

      switch ($data['func']) {
          case 'reverse':
              echo "The text reversed: " . strrev($data['intext']) . "!!";
              break;
          default:
              echo "The text received: " . $data['intext'] . "!!";
      }
  }
}
index.phtml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<html>
<head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-type">
  <title>title; ?></title>
  <link title="no title" media="screen" charset="utf-8" href="public/styles/boxy.css" rel="stylesheet" type="text/css">
  <script src="public/scripts/prototype.js" type="text/javascript"></script>
  <script src="public/scripts/ajax_funcs.js" type="text/javascript"></script>
</head>
<body>
  <p>
      <input type="text" name="intext" value="" id="intext"></input>
      <input onclick="callAjax('intext', 'reverse')" type="button" name="buttonReverse" value="Reverse" id="buttonReverse"></input>
      <input onclick="callAjax('intext')" type="button" name="buttonNormal" value="Normal" id="buttonNormal"></input>
  </p>
  <img src="public/images/loader.gif" style="display: none" id="update"></img>
  <span id="hello">boring pre-Ajax-call text ...</span>
</body>
</html>
ajax_funcs.js 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

function callAjax(s, method)
{
  if (method===undefined) method='';
  if (method == 'reverse')
      var data = {func: 'reverse', intext: $F(s)};
  else
      var data = {func: '', intext: $F(s)};
  var myAjax = new Ajax.Updater('hello', 'index/getData',
      {
          method: 'post',
          parameters: {state: Object.toJSON(data)},
          onCreate: function(transport) {
              $('update').show();
              $('hello').innerHTML = "Loading...";
          },
          onComplete: function(transport) {
              $('update').hide();
          }
      }
  );
}