重点在于 $Javascript->link() 的那两行，包含了需要用到的 Javascript 文件 prototype.js 和 scriptaculous.js，而 script.aculo.us 库中的其他 Javascript 文件都由 scriptaculous.js 统一进行包含，不用我们书写额外的代码，如果并不想使用 script.aculo.us 的所有 js 文件，可以使用 load 参数进行指定包含，比如我们只用到 effects.js，可以这样（多个则用英文逗号“,”分割开）：
echo $Javascript->link('scriptaculous.js?load=effects')?>
接下来是创建一个控制器文件 cake/app/controllers/demos_controller.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
}
} ///:~ ?>
此控制器的重点有三个：
对应于控制器中的两个方法（Action），我们需要在 cake/app/views/demos/ 目录下创建两个视图文件：index.thtml 和 hello.thtml。
index.thtml：
Loading... //设置 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); ?>
这个视图中有三个元素：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 视图文件了，只是一行简单的文本：
Hello, AJAX world!
OK，通过尽量少的编码，我们完成了这个示例，可以通过 http://www.somesite.com/cake/demos/ 浏览最终效果。
四、Live Search
Live Search 指的是即时查询，通常是用户在文本框中输入想要查询的关键字，由客户端 Javascript 对文本框进行观察，监测到用户输入之后即时提交到服务器，并显示服务器返回的结果。接下来我们将使用 Cake 的 AJAX 实现 Live Search，从一个数组中获取符合查询关键字的数据，然后即时更新到页面中。
首先修改我们的控制器 demos_controller.php，增加一个方法 search()：
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 的表单代码：
Live Search:
//设置 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：
if (count($result) > 0): ?>
foreach ($result as $lang): ?> - echo $lang ?>
endforeach ?>
else: ?> Found nothing! 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 扩展，所以比较麻烦一些，而且无形中为服务器增加了额外的负担。
七、相关资源
Update@2006.11.26: 有兴趣的同学可以继续阅读本序列文章的第二篇《AJAX in CakePHP (2) - Sortable》。
京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有