譯文：JavaScript框架比較

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

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈