CakePHP中有個Ajax的Helper類，用於處理CakePHP的Ajax功能。由於CakePHP是模仿Ruby on Rails的快速開發框架，所以它也和RoR一樣，使用了prototype和scriptaculous來作爲它的Ajax庫。
下面就幾個簡單的例子來解析CakePHP 的功能，這次解析基於 http://nio.infor96.com/ajax-in-cakephp/以及http://nio.infor96.com/ajax-in-cakephp-sortable/ 這兩篇文章，我對於文章中不對的地方會進行修正。
1、Ajax更新
首先下載scriptaculous庫，將js文件放到$cake_dir$/app/webroot/js/scriptaculous/下，然後建立一個模版文件。我取名爲my.thtml，放置於$cake_dir$/app/views/layouts/下。
my.thtml
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CakePHP AJAX Demo :: <?php echo $title_for_layout?></title>
<script src="/js/scriptaculous/prototype.js"></script>
<script src="/js/scriptaculous/scriptaculous.js"></script>
</head>
<body>
<div id="container">
<center><h2>CakePHP AJAX Demo</h2></center>
<div id="content"><?php echo $content_for_layout?></div>
</div>
</body>
</html>
接下來建立controller文件，在$cake_dir$/app/controllers/下面建立index_controller.php文件，源代碼如下：
index_controller.php
<?php
class IndexController extends AppController {
var $name = 'Index';
var $uses = array ();
function index() {
}
function hello() {
$this->layout = 'ajax';
}
}
?>
同時建立對應的兩個view文件，index.thtml和hello.thtml，放在$cake_dir$/app/views/index/下，對應的源代碼如下：
index.thtml
<div id="loading" style="display:none;padding:4px;color:black;background-color:#FAD163;width:100px">
<strong>Loading…</strong>
</div>
<div id="view" style="display:none;background-color:#E8EEF7;padding:4px;border:1px solid silver;width:300px"></div>
<p>
<?php
$options = array(
'update'=>'view',
'loading'=>"Element.hide('view');Element.show('loading')",
'complete'=>"Element.hide('loading');Effect.Appear('view')"
);
echo $ajax->link('Click here!', '/index/hello', $options);
?>
</p>
hello.thtml
<center>Hello, AJAX world!</center>
一切代碼準備完畢，訪問http://yourhost/index/index的時候就能看到最終效果。但是這不是我想要的結果，必須要清楚scriptaculous是如何在CakePHP中工作的。
查看頁面的HTML源代碼，找到JS代碼段：
<p>
<a href="/index/hello" id="link15098" οnclick="event.returnValue=false; return false;">Click here!</a>
<script type="text/javascript">
Event.observe('link15098', 'click', function(event) {
new Ajax.Updater(
'view',
'/index/hello',
{
asynchronous:true,
evalScripts:true,
onLoading:function(request) {Element.hide('view');Element.show('loading')},
onComplete:function(request) {Element.hide('loading');Effect.Appear('view')},
requestHeaders:['X-Update', 'view']})
},
false
);
</script>
</p>
可以看到CakePHP的AjaxHelper生成了一個a標籤和一段JS代碼，併爲這個a標籤加上了事件監聽，當你點擊這個鏈接的時候，並不會跳轉到href屬性裏的鏈接，而是會調用事件監聽中定義的函數來進行處理。而在定義的這個監聽函數中，我們可以看到生成了一個Ajax.Updater對象，需要更新的標籤是id=’view’，請求的URL是’/index/hello’，並且在請求過程中和請求結束時定義了動畫事件。
這樣一來，只需要弄清楚scriptaculous的工作原理，就算碰到沒有CakePHP的情況下，也能夠寫出具有Ajax功能的程序來。
下次繼續寫Ajax的AutoComplementation。
