JavaScript架構:跨瀏覽器的標準化Ajax請求

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