摘要：Web應(yīng)用所提供的體驗和用戶從桌面應(yīng)用程序所得到的體驗在響應(yīng)速度、易用性等方面存在著巨大的差距，為了改善Web應(yīng)用程序給用戶帶來的體驗，IT界引出了Ajax這個新名詞。文章簡要介紹了Web 2．0的Ajax技術(shù)的基礎(chǔ)理論，就其關(guān)鍵技術(shù)中的XMLHttpRequest對象作了重點分析，并對Ajax技術(shù)的優(yōu)缺點及其應(yīng)用作了探討，展示了Ajax所以能給用戶帶來更為強大的Web體驗的實質(zhì)。

關(guān)鍵詞：Ajax；XMLHttpRequest；無刷新；異步

0引言

桌面應(yīng)用程序有著豐富的界面以及對于Web程序來說無法比擬的響應(yīng)能力，Web應(yīng)用所提供的體驗和用戶從桌面應(yīng)用程序所得到的體驗在響應(yīng)速度、易用性等方面存在著巨大的差距。

Jesse James Garrett的一篇A New Approach to WebApplications引出了Ajax這個Web世界的新名詞。Ajax是在成熟的互聯(lián)網(wǎng)技術(shù)下誕生的一個新標準，是Web 2．0中的一項重要技術(shù)，旨在給用戶帶來更為強大的Web體驗。隨著Gmail、Google Maps、Google Suggest、Flickr、Netflix和A9等Ajax應(yīng)用的不斷涌現(xiàn)，Ajax越發(fā)地受到了人們的關(guān)注。

1 Aiax的概念

Ajax是Asynchronous JavaScript and XML的縮寫，意思是異步的JavaScript與XML。Ajax使用了若干項技術(shù)來構(gòu)建豐富的基于Web的應(yīng)用，使得在線的Web應(yīng)用與桌面程序有同樣的觀感，這些技術(shù)包括CSS、JavaScript、XHTML、XML、XMLHttpRequest、DOM以及XSLT等Ⅲ。

要準確描述什么是Ajax，最容易的方法是讓其與相反的情況進行對比。

對于大部分的Web站點，與Web服務(wù)器進行交互的通信方式是：當在線用戶填寫完表單單擊提交按鈕后，整個頁面就會發(fā)送至Web服務(wù)器，用戶必須等待服務(wù)器接受請求。當服務(wù)器完成處理請求時，就會將響應(yīng)內(nèi)容發(fā)送過來，這時，才得以最終刷新用戶頁面。Ajax是一種減少這一系列等待事件的技術(shù)。

2 Ajax的思想

Ajax實際上是幾項技術(shù)的綜合，每個都基于本身的能力而有所發(fā)展，組合在一起形成了一個更強的新技術(shù)。Ajax組合了以下七種技術(shù)：

(1)使用XHTML和CSS標準化呈現(xiàn)；

(2)使用DOM來動態(tài)顯示和進行交互；

(3)使用XML和XSLT來進行數(shù)據(jù)交換和顯示；

(4)使用XMLHttpRequest來獲取異步信息；

(5)使用JavaScript將上述六項技術(shù)整合起來。

雖然Jesse列出了上面七項AjaX的構(gòu)成技術(shù)，但通常認為，所謂的Ajax其核心只有XMLHttpRequest，JavaScript和DOM，倘若所用數(shù)據(jù)格式為XML的話，還可以再加上XML這一項。

然而，Ajax最核心的理念是，在傳統(tǒng)應(yīng)用中的瀏覽器直接和服務(wù)器交互的模式的中間夾了一層Script。也就是說，原來是Browser-Server架構(gòu)，現(xiàn)在是Browser-Scripc-Server，如圖l所示。

對于純粹的Ajax應(yīng)用，瀏覽器只向JavaScript發(fā)送消息，JavaScript使用XmlHttp向服務(wù)器發(fā)送請求，然后服務(wù)器在XmlHttp的回復(fù)中帶上相關(guān)消息，最后JavaScript分析這些消息，用HTML DOM模型處理界面。如此，理論上可以完全消除刷新的需要。

3 Ajax的核心技術(shù)

Ajax的最大特點是無刷新更新頁面，這一特點主要得益于XMLHTTP組件的XMLHttpRequest對象。

在使用XMLHttpRequest對象發(fā)送請求和處理響應(yīng)之前，必須先使用JavaScript創(chuàng)建一個XMLHttpRequest對象。代碼清單l給出了編寫跨瀏覽器的JavaScript代碼來創(chuàng)建XMLHttpRequest對象的示例。

代碼清單l：創(chuàng)建XMLHttpRequest對象。var xmlHttp；function createXMLHttpRequest(){if(window．ActiveXObject)／／判斷瀏覽器是否為IE瀏覽器{xmlHttp=new ActiveXObject(”Microsoft．XMLHTTP\"，)；}

else if(window．XMLHttpRequest)／／Mozilla，Safari，．…

{xmlHttp=new XMLHRpRequest()：}

}

不同于標準的Web程序中所用的請求／響應(yīng)方法，Ajax應(yīng)用XMLHttpRequest對象的過程如下：

(1)一個客戶端事件觸發(fā)一個Ajax事件。其代碼如下：

onblur=“validateEmail”>

(2)創(chuàng)建XMLHttpRequest對象，使用open方法建立調(diào)用，并設(shè)置URL以及所希望的HTrP方法(通常是GET或POST)，請求通過一個send方法調(diào)用觸發(fā)。代碼如下所示(有關(guān)的方法見表1)：

function validateEmail0{

var email=document．getElementByld(“email\")：

var urf=“validate?email=”+escape(email．value)；

createXMLHttpRequest0；／／見代碼清單1

xmlHttp．open(\"GET\"，URL)；

xmlHttp．onreadystatechange=callback；

xmlHttp．send(1)；

｝

(3)向服務(wù)器發(fā)出請求?？梢哉{(diào)用Servlet、CGI腳本或者任何服務(wù)器端技術(shù)。

(4)服務(wù)器處理有關(guān)請求，包括訪問數(shù)據(jù)庫，甚至訪問另一個系統(tǒng)。

(5)響應(yīng)返回到瀏覽器。Content-Type設(shè)置為text／xml-——XMLHttpRequest對象只能處理text／xml類型的數(shù)據(jù)。要使瀏覽器不在本地緩存結(jié)果，可以使用下面的代碼：

Response．setHeader(\"Cache-Contml\"，\"no-cache\")；

Response．setHeader(\"Pragma\"，\"no-cache\")；

(6)在前述代碼中，XMLHttpRequest對象配置為處理返回時要調(diào)用callback函數(shù)。這個函數(shù)會檢查XMLHttpRequest對象的readyState屬性，然后查看服務(wù)器返回的狀態(tài)碼(有關(guān)XMLHttpRequest的狀態(tài)碼如表2所示)。如果一切正常，callback函數(shù)就會在客戶端上進行相關(guān)處理工作。

以下就是一個典型的回調(diào)方法：function callback(){

If(xmlHttp．readyState==4)

{If(xmIHttp．status==200)

{／／do something interesting here)

}

}

XMLHttpRequest對象與服務(wù)器之間相互通信的方法有多種。XMLHttpRequest對象可以使用HTTP GET、POST或者HEAD方法發(fā)送請求，請求數(shù)據(jù)可以作為查詢串、XML或JSON數(shù)據(jù)發(fā)送。處理請求之后，服務(wù)器一般會發(fā)送簡單文本、XML數(shù)據(jù)甚至JSON數(shù)據(jù)作為響應(yīng)。

4 Ajax的優(yōu)點及其應(yīng)用

Ajax的出現(xiàn)有代替?zhèn)鹘y(tǒng)Web開發(fā)中采用Form(表單)遞交方式更新Web頁面的趨勢，可以算是一個里程碑。雖然Ajax并不是適用于所有場合，這是由它的特性所決定的，但恰當?shù)厥褂肁jax可以帶來更好的用戶體驗。

使用Ajax的優(yōu)點包括：減輕服務(wù)器的負擔；無刷新更新頁面，減少用戶實際和心理等待時間；可以把以前的一些服務(wù)器負擔的工作轉(zhuǎn)嫁到客戶端；使Web中的數(shù)據(jù)與呈現(xiàn)分離等等。

下面的例子是一個關(guān)于級聯(lián)菜單方面的Ajax應(yīng)用。

對級聯(lián)菜單的傳統(tǒng)處理是：

為了避免每次對菜單的操作都要重載頁面，一次性將級聯(lián)菜單的所有數(shù)據(jù)全部讀取出來并寫入數(shù)組，然后根據(jù)用戶的操作用JavaScnpt來控制它的子集項目的呈現(xiàn)。這雖然解決了操作響應(yīng)速度慢、重載頁面以及向服務(wù)器頻繁發(fā)送請求的問題，但是如果用戶不對菜單進行操作或只對菜單中的一部分進行操作的話，那么讀取的數(shù)據(jù)中的一部分就會成為冗余數(shù)據(jù)源，特別是在菜單結(jié)構(gòu)復(fù)雜、數(shù)據(jù)量大的情況下(比如菜單有很多級、每一級菜單又有上百個項目)，這種弊端就更為突出。

在此案例中應(yīng)用Ajax后，情況將不同：

在初始化頁面時只讀出它的第一級的所有數(shù)據(jù)并顯示，在用戶操作一級菜單的其中一項時，會通過Ajax向后臺請求當前一級項目所屬的二級子菜單的所有數(shù)據(jù)，如果再繼續(xù)請求已經(jīng)呈現(xiàn)的二級菜單中的一項時，再向后面請求所操作二級菜單項對應(yīng)的所有三級菜單的所有數(shù)據(jù)，依此類推……，這樣，用什么就取什么、用多少取多少，就不會有數(shù)據(jù)的冗余和浪費，減少了數(shù)據(jù)下載總量，而且更新頁面時不用重載全部內(nèi)容，只更新需要更新的那部分即可，相對于后臺處理并重載的方式縮短了用戶的等待時間，也把對資源的浪費降到最低。

此外，Ajax可以調(diào)用外部數(shù)據(jù)，可以實現(xiàn)數(shù)據(jù)聚合的功能(當然要有相應(yīng)授權(quán))，比如微軟的在線RSS閱讀器；還可以利用一些開放的數(shù)據(jù)，開發(fā)自己的一些應(yīng)用程序，比如用Amazon的數(shù)據(jù)作一些新穎的圖書搜索應(yīng)用。

可見，Ajax適用于交互較多，頻繁讀數(shù)據(jù)，數(shù)據(jù)分類良好的Web應(yīng)用。

5結(jié)束語

Ajax的成功之處在于使用驗證過的現(xiàn)有技術(shù)使得Web應(yīng)用更像是一個桌面應(yīng)用程序，減少了用戶的等待時間，提升了用戶的瀏覽體驗。Ajax在任何標準瀏覽器(可以處理JavaScfipt和DOM的瀏覽器)中都可以正常工作，不需要單獨安裝其他插件。

(注：本文中所涉及到的圖表、注解、公式等內(nèi)容請以PDF格式閱讀原文。)