Ａｊａｘ技術(shù)及其應(yīng)用研究

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

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

0引言

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

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

1 Aiax的概念

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

要準(zhǔn)確描述什么是Ajax，最容易的方法是讓其與相反的情況進(jìn)行對(duì)比。

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

2 Ajax的思想

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

(1)使用XHTML和CSS標(biāo)準(zhǔn)化呈現(xiàn)；

(2)使用DOM來(lái)動(dòng)態(tài)顯示和進(jìn)行交互；

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

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

(5)使用JavaScript將上述六項(xiàng)技術(shù)整合起來(lái)。

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

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

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

3 Ajax的核心技術(shù)

Ajax的最大特點(diǎn)是無(wú)刷新更新頁(yè)面，這一特點(diǎn)主要得益于XMLHTTP組件的XMLHttpRequest對(duì)象。

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

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

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

{xmlHttp=new XMLHRpRequest()：}

}

不同于標(biāo)準(zhǔn)的Web程序中所用的請(qǐng)求／響應(yīng)方法，Ajax應(yīng)用XMLHttpRequest對(duì)象的過(guò)程如下：

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

onblur=“validateEmail”>

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

function validateEmail0{

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

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

createXMLHttpRequest0；／／見(jiàn)代碼清單1

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

xmlHttp．onreadystatechange=callback；

xmlHttp．send(1)；

｝

(3)向服務(wù)器發(fā)出請(qǐng)求。可以調(diào)用Servlet、CGI腳本或者任何服務(wù)器端技術(shù)。

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

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

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

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

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

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

If(xmlHttp．readyState==4)

{If(xmIHttp．status==200)

{／／do something interesting here)

}

}

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

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

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

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

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

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

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

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

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

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

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

5結(jié)束語(yǔ)

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

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