Ajax
使用JavaScript框架最令人信服的理由是跨瀏覽器的標準化Ajax請求。 Ajax請求是非同步的HTTP請求，向伺服器端腳本傳送請求，然後得到一個回應結果，如XML、JSON、HTML、純文字格式的資料。大多數JavaScript框架都有一定形式的Ajax請求對象，它接受一系列選項作為參數。這些選項包括回調函數，在得到Web伺服器的回應時調用，ExtJS、MooTools和Prototype的Ajax請求看起來是這樣的：
清單11：一個ExtJS 庫中的Ajax請求
Ext.Ajax.request({
url: 'server_script.php',
params: {
name1: 'value1',
name2: 'value2'
},
method: 'POST',
success: function(transport) {
alert(transport.responseText);
}
});
ExtJS接受一個參數，包括url、params、method 和succcess處理函數等字段，url字段包含伺服器端腳本的位址，被Ajax請求呼叫。 Params本身就是一個對象，由鍵/值對組成，然後傳遞到伺服器。 method 欄位有兩個可選值：GET或POST，預設為post方法。最後一個欄位是succcess，在伺服器得到成功回應後呼叫。該例中，假定伺服器端傳回純文本，這個文本透過alert()方法呈現給使用者。
接下來，讓我們進一步探討MooTools中Ajax的請求。
清單12：MooTools中的Ajax請求
new Request({
url: 'server-script.php',
data: {
name1: 'value1',
name2: 'value2'
},
method: 'post',
onComplete: function(response) {
alert(response);
}
}).send();
如你看見，MooTools與ExtJS很相似。你會注意到，變數透過data字段傳遞，方法字段需要小寫。此外，與success處理函數不同，MooTools使用onComplete函數。最後，與ExtJS不同，MooTools實際上會用Request的send()函數發送請求。
最後，讓我們看看Prototype 有哪些明顯的差異。
清單13：Prototype 中的Ajax請求
new Ajax.Request('server-script.php', {
params: {
name1: 'value1',
name2: 'value2'
},
method: 'post',
onSuccess: function(transport) {
alert(transport.responseText);
}
});
看看，Prototype以同樣的方式工作，但語法小有差異。對於初學者來說，原型的Request物件接受兩個參數傳遞給建構函式。第一個參數是發送請求的URL位址，正如你在前面兩個例子中看到的那樣，第二個參數是一個對象，包含各個Ajax請求的選項。當然，URl作為一個單獨的參數傳遞，他不在選項清單中。另外，值得注意的是，與MooTools不同，Prototype 物件的建構函式隱式的傳送請求，所以不需要呼叫任何方法觸發HTTP請求。
大多數JavaScript框架對Ajax的支援已經超越了我這裡所說的。一些明顯的增強功能包括在接到回應後自動更新元素，而無需任何特殊的onSuccess 函數。有些函式庫已經預先建立了自動完成功能，正如你在google搜尋引擎看到的那樣，在鍵入時給你一些查詢建議。
在接下來的章節中，您將了解JavaScript框架為絡開發者帶來的使用者體驗（UE）的提升。
轉載網址： http://www.denisdeng.com/?p=729
原文網址： http://www.ibm.com/developerworks/web/library/wa-jsframeworks/index.html