2007
28
dec

Ajax és a Zend Framework

, , , , , — Nincs hozzászólás

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

<?php
error_reporting(E_ALL|E_STRICT);
date_default_timezone_set('Europe/Budapest');
 
set_include_path('.' . PATH_SEPARATOR . './library'
	. PATH_SEPARATOR . './application/models/'
	. PATH_SEPARATOR . get_include_path());
 
include "Zend/Loader.php";
 
Zend_Loader::loadClass('Zend_Controller_Front');
 
$frontController = Zend_Controller_Front::getInstance();
$frontController->throwExceptions(true);
$frontController->setControllerDirectory('./application/controllers');
 
$frontController->dispatch();

IndexController.php

<?php
 
class IndexController extends Zend_Controller_Action
{
	function init() {
		$this->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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
	<title><?php echo $this->title; ?></title>
	<link rel="stylesheet" href="public/styles/boxy.css" type="text/css" media="screen" title="no title" charset="utf-8">
	<script type="text/javascript" src="public/scripts/prototype.js"></script>
	<script type="text/javascript" src="public/scripts/ajax_funcs.js"></script>
</head>
<body>
	<p>
		<input type="text" name="intext" value="" id="intext" />
		<input type="button" name="buttonReverse" value="Reverse" id="buttonReverse" OnClick="callAjax('intext', 'reverse')" />
		<input type="button" name="buttonNormal" value="Normal" id="buttonNormal" OnClick="callAjax('intext')" />
	</p>
	<img src="public/images/loader.gif" id="update" style="display: none"/>
	<span id="hello">boring pre-Ajax-call text ...</span>
</body>
</html>

ajax_funcs.js

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();
			} 
		}
	);
}

Címkék: , , , , ,

Szólj hozzá te is!