AJAX in Zend Framework

Posted on 17th April 2008 by Nio in AJAX, JavaScript, Zend Framework, 程序人生

Zend Framework 1.5 已经对 AJAX 有了不错的支持,使用上也很简单。主要涉及到的类是 Zend_Controller_Action_Helper_AjaxContext,这个类中的方法 initContext() 中通过判断 XHR 头来确定是否是 AJAX 调用:


<?php
/**
 * Initialize AJAX context switching
 *
 * Checks for XHR requests; if detected, attempts to perform context switch.
 * 
 * @param  string $format 
 * @return void
 */
public function initContext($format null)
{
    $this->_currentContext null;

    if (!$this->getRequest()->isXmlHttpRequest()) {
        return;
    }

    return parent::initContext($format);
}
?>

可以使用 ZF 默认的目录部署来写一个简单示例,目录结构如下:


application/
    controllers/
        IndexController.php
    models/
    views/
        scripts/
            index/
                index.phtml
                demo.ajax.phtml
        helpers/
        filters/
html/
    .htaccess
    index.php
    js/
        jquery.js

JavaScript 库使用 jQuery。需要写代码的文件是 IndexController.php、index.phtml 和 demo.ajax.phtml。IndexController.php 包含了 2 个 actions,一个是 index,一个是 demo。index 中有个按钮用于测试 AJAX 请求,而请求的目标则是 demo action。demo 对应的视图名字后缀使用了 .ajax.phtml,这是默认的设置。Front controller 的调用很简单:


<?php
require_once 'Zend/Controller/Front.php';
Zend_Controller_Front::getInstance()
    ->setParam('useDefaultControllerAlways'true)
    ->setControllerDirectory('../application/controllers')
    ->dispatch();
?>

IndexController.php 在初始化的时候,需要初始化 AjaxContext Helper:


<?php
class IndexController extends Zend_Controller_Action
{
    public function init()
    {
        $ajaxContext $this->_helper->getHelper('AjaxContext');
        $ajaxContext->addActionContext('demo''html')
                    ->initContext();
    }
    
    public function indexAction()
    {
    }
    
    public function demoAction()
    {
        $this->view->hello 'Hello, world! ('.date('H:i:s').')';
    }
}

addActionContext('demo', 'html') 表明 demoAction 为 AJAX 调用的 action,格式为 html。除了 html 之外,还支持 xml、json 等。AJAX 请求时需要给请求的 url 加上 format=html 的 GET 参数。indexAction 对应的视图 index.phtml 代码如下:


<html>
<head>
<title>AJAX DEMO</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="<?=$this->url()?>js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('#ajax_button').click(function(){ //#ajax_button 的 onclick 事件触发
        var url = '<?=$this->url(array('controller'=>'index','action'=>'demo'))?>'; //AJAX 请求的目标 URL
        $.get(url, {'format':'html'}, function(data){ //这里传递了 format=html 的 GET 参数
            $('#hello_message').html(data); //将 AJAX 返回的内容显示在 #hello_message 里边
        });
    });
});
</script>
</head>

<body>
<p><input type="button" id="ajax_button" value="AJAX Call" />
<p id="hello_message"><p>
</body>

</html>

demoAction 对应的视图 demo.ajax.phtml 内容很简单,只是输出 $hello:


<?=$this->hello?>

这就是一个完整的 AJAX 过程。使用 Zend Framework 写出来的代码其实很简单。如果想更加简单一些,可以写个 jQuery AJAX 的 view helper,封装 jQuery 的 JavaScript 代码。

Zend Framework 还提供了 autocomplete(自动完成)AJAX 的 action helper:Zend_Controller_Action_Helper_AutoCompleteScriptaculousZend_Controller_Action_Helper_AutoCompleteDojo,一个是 for Scriptaculous 的,另一个是 for Dojo 的。

No Comments »

No comments yet.

Leave a comment