cakephp ajax

======================================================
注：本文源代码点此下载
======================================================

一、cake 中的 ajax 实质

cakephp(以下简称“cake”,本文使用的版本是 0.10.7.1856 rc3)对 ajax 的支持是建立在 prototype 与 script.aculo.us 之上的,其自身并没有包含客户端的 ajax 实现,所以想要在 cake 中熟练地使用 ajax,必须首先熟悉 prototype 和 script.aculo.us,而本文的重点并不是这两个出众的 javascript 库。说白了,cake 实际上只是简化了繁琐的 ajax javascript 代码。

二、cake 中的 ajax 相关文件

在 cake 中,与 ajax 相关的文件只有两个:

cake/cake/libs/view/templates/layouts/ajax.thtml

cake/cake/libs/view/helpers/ajax.php

ajax.thtml 文件是执行 ajax 动作之后用于输出的布局,和一般的布局文件不同的是它是一个空的布局视图文件,没有 header/footer 等等内容。ajax.php 文件则是用于 cake 视图文件的 ajax 辅助类 ajaxhelper,此类中包含了很多 ajax 动作的相关方法,详细 api 请参考 http://api.cakephp.org/class_ajax_helper.html。

除了上述的两个文件外,我们还需要 prototype 的 prototype.js 和 script.aculo.us 中的 *.js 文件,这些文件可在官方网站上下载到,将这些 *.js 文件放置 cake/app/webroot/js/ 目录下即可。对于这两个库,本文用的版本分别是 1.4.0 和 1.5.1。

三、hello, ajax world!

现在我们使用一个简单的示例简单演示一下如何在 cake 中使用 ajax。这个示例将实现点击链接之后,在页面上加载服务器端输出的“hello, ajax world!”信息。为了简单起见,示例中不使用任何数据库,也就是不用 cake 的模型(model),而只用控制器(controller)和视图(view)。首先创建一个布局视图文件 cake/app/views/layouts/demo.thtml,用于自定义布局以及加载需要用到的 javascript 文件,此文件内容如下:

doctype html public "-//w3c//dtd xhtml 1.0 transitional//en"

    "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">

html xmlns="http://www.w3.org/1999/xhtml">

head>

title>cakephp ajax demo :: php echo $title_for_layout?>title>

php echo $html->charsettag('utf-8')?>

php echo $javascript->link('prototype')?>

php echo $javascript->link('scriptaculous')?>

head>

body>

div id="container">

    center>h2>cakephp ajax demoh2>center>

    div id="content">php echo $content_for_layout?>div>

div>

body>

html>

重点在于 $javascript->link() 的那两行,包含了需要用到的 javascript 文件 prototype.js 和 scriptaculous.js,而 script.aculo.us 库中的其他 javascript 文件都由 scriptaculous.js 统一进行包含,不用我们书写额外的代码,如果并不想使用 script.aculo.us 的所有 js 文件,可以使用 load 参数进行指定包含,比如我们只用到 effects.js,可以这样(多个则用英文逗号“,”分割开):

1 php echo $javascript->link('scriptaculous.js?load=effects')?>

接下来是创建一个控制器文件 cake/app/controllers/demos_controller.php:

php

class demoscontroller extends appcontroller

{

    var $name    = 'demos';    //兼容 php4

    var $layout  = 'demo';   //指定视图使用的布局为 demo.thtml

    var $helpers = array('html', 'javascript', 'ajax'); //需要用到的视图辅助类

    function index()

    {

    }

    function hello()

    {

        sleep(1);   //本地测试时,为了更好地看到效果,模拟延迟状态

        $this->layout = 'ajax'; //此方法为 ajax 动作,所以布局需要使用 ajax.thtml

    }

}   ///:~

?>

此控制器的重点有三个:

设置默认布局为 demo.thtml,这样才能在 index 视图中使用 prototype.js 等

在视图辅助类数组 $helpers 中加上“ajax”辅助类

对于 ajax 动作方法 hello() 需要将其当前布局设置为“ajax”

对应于控制器中的两个方法(action),我们需要在 cake/app/views/demos/ 目录下创建两个视图文件:index.thtml 和 hello.thtml。

index.thtml:

div id="loading" style="display:none;padding:4px;color:black;

    background-color:#fad163;width:100px">strong>loadingstrong>div>

div id="view" style="display:none;background-color:#e8eef7;

    padding:4px;border:1px solid silver;width:300px">div>

p>

    php 

    //设置 ajax 选项

    $options = array(

        //设置加载成功之后需要进行更新的元素为 view

        'update'   => 'view',

        //加载过程中隐藏 view 元素,显示“loading”字样

        'loading'  => "element.hide('view');element.show('loading')",

        //加载成功之后隐藏 loading,同时显示 view 元素

        'complete' => "element.hide('loading');effect.appear('view')"

    );

    //使用 ajaxhelper 创建 ajax 动作链接

    echo $ajax->link('click here!', '/demos/hello', $options);

    ?>

p>

这个视图中有三个元素:loading、view 与 ajax 链接。初始状态下 loading 与 view 是隐藏的(display:none),只有点击了 ajax 链接之后,在加载状态中显示 loading,加载完成之后将其隐藏,然后显示 view,“hello, ajax world!”即显示在 view 中。此视图的重点在于 $ajax->link(),$ajax 是 ajaxhelper 的对象实例,link() 方法的第一个参数是链接显示的文本,第二个参数是 cake 的 url,这里的 url 为 /demos/hello,指向了 ajax 动作方法 hello(),此动作最终输出视图 hello.thtml,第三个参数为 ajax 选项,cake 会自动根据选项生成链接中使用到的 javascript 代码。对于一个简单的 ajax 动作,主要就是设置三个选项:update、loading 与 complete,这几个选项的意义在视图代码的注释中都有了详细说明。

最后就是 hello.thtml 视图文件了,只是一行简单的文本:

1 center>hello, ajax world!center>

ok,通过尽量少的编码,我们完成了这个示例,可以通过 http://www.somesite.com/cake/demos/ 浏览最终效果。

四、live search

live search 指的是即时查询,通常是用户在文本框中输入想要查询的关键字,由客户端 javascript 对文本框进行观察,监测到用户输入之后即时提交到服务器,并显示服务器返回的结果。接下来我们将使用 cake 的 ajax 实现 live search,从一个数组中获取符合查询关键字的数据,然后即时更新到页面中。

首先修改我们的控制器 demos_controller.php,增加一个方法 search():

php

    function search()

    {

        $langs = array(

            'c', 'c++', 'c#',

            'java', 'javascript',

            'php', 'perl', 'python', 

            'ruby', 'delphi');

        $this->layout = 'ajax';

        if (empty($this->params['form']['livesearch'])) { //未提交任何数据

            $result = $langs;

        } else {    //根据提交的关键字进行查询

            $word   = $this->params['form']['livesearch'];

            $result = array();

            foreach ($langs as $lang)

                if (stristr($lang, $word) !== false)

                    $result[] = $lang;

        }

        $this->set('result', $result);

    }

?>

在 index.thtml 视图文件中,加入 live search 的表单代码:

form onsubmit="return false">

    p>

        b>live search:b>

        input type="text" name="livesearch" id="livesearch" />

    p>

form>

php

    //设置 ajax 选项

    $options = array(

        'update' => 'view',

        //处理查询的 url,对应于控制器中的 search() 方法

        'url'    => '/demos/search',

        //观察频率,单位为“秒”

        'frequency' => 1,

        'loading' => "element.hide('view');element.show('loading')",

        'complete' => "element.hide('loading');effect.appear('view')"

    );

    echo $ajax->observefield('livesearch', $options);

?>

这里用到了 ajaxhelper 中的另一个方法 observefield(),此方法用于观察某个元素的数据是否发生变化,发生变化时则调用相应的 ajax 操作。方法的第一个参数为需要观察的元素 id,这里是“livesearch”文本框,第二个参数为 ajax 选项,和 link() 方法中的相似,只不过这里的选项设置多了 url 与 frequency,url 即 cake 的 url,对应于控制器中的方法,frequency 则是观察的间隔时间,单位为“秒”,即每隔多少秒查看一下对应的元素是否发生了改变。

对应于 search() 方法,创建视图文件 cake/app/views/demos/search.thtml:

php if (count($result) > 0): ?>

    ul>

        php foreach ($result as $lang): ?>

        li>php echo $lang ?>li>

        php endforeach ?>

    ul>

php else: ?>

    font color="gray">found nothing!font>

php endif ?>

好了,这个 live search 已经完成了,是不是很简单现在只要在文本框中输入字符,就会在 $langs 数组中查找,只要包含了查询关键字的结果都会被返回并更新到 view 元素中。

五、其他应用

cake 的 ajaxhelper 中还提供了很多方法,如用于拖曳的 drag()、drop() 及 dropremote();用于排序的 sortable();用于自动完成的 autocomplete() 等等,由于涉及到的讲解篇幅比较大,暂时就不深入了,有时间的话我再一一道来。drag/drop 可以在我写的 cake framework ajax demo 中看到在线演示,并可下载到源代码。

六、一些问题

cake 当前版本(0.10.7.1856 rc3)的一些方法还不是非常完善,对于最新版本的 script.aculo.us 库中的一些参数还不支持,相信很快会得到更新。实际应用中可能会碰到中文乱码的问题,那是因为 xmlhttprequest 获取到的数据都是以 utf-8 编码的,所以解决的办法有两个,一个是所有页面、数据库数据均使用 utf-8 编码,这样可以省去很多麻烦,另外一个就是通过 php 的 iconv() 函数进行转码,但这需要用到 iconv 扩展,所以比较麻烦一些,而且无形中为服务器增加了额外的负担。

原文:http://www.nioxiao.com/ajax-in-cakephp

======================================================
在最后，我邀请大家参加新浪APP，就是新浪免费送大家的一个空间，支持PHP+MySql，免费二级域名，免费域名绑定 这个是我邀请的地址，您通过这个链接注册即为我的好友，并获赠云豆500个，价值5元哦！短网址是http://t.cn/SXOiLh我创建的小站每天访客已经达到2000+了，每天挂广告赚50+元哦，呵呵，饭钱不愁了，\(^o^)/