張鈴麗，朱永杰

（許昌學(xué)院，河南許昌461000）

Ajax 技術(shù)研究及其Web應(yīng)用

張鈴麗，朱永杰

（許昌學(xué)院，河南許昌461000）

Ajax技術(shù)是多種現(xiàn)有技術(shù)的結(jié)合，通過(guò)瀏覽器與服務(wù)器之間的異步通信，實(shí)現(xiàn)了無(wú)刷新更新頁(yè)面，提高了用戶的體驗(yàn).介紹了Ajax的技術(shù)原理、核心技術(shù)及工作流程，列舉了Ajax技術(shù)一些典型應(yīng)用，并指出Ajax的發(fā)展趨勢(shì).

Ajax；XMLHttpRequest；J avaScript；DOM；XML

隨著Web應(yīng)用技術(shù)的不斷發(fā)展，用戶已經(jīng)不滿足于像以前那樣填寫(xiě)表單，點(diǎn)擊“提交”按鈕，然后等待頁(yè)面跳轉(zhuǎn)的同步請(qǐng)求/響應(yīng)模式，用戶需要的是一種像任何桌面應(yīng)用程序那樣流暢、快捷和人性化的Web體驗(yàn).另外，大多數(shù)的網(wǎng)頁(yè)具有一些相同的內(nèi)容，尤其是同一網(wǎng)站中的網(wǎng)頁(yè).以往打開(kāi)這些網(wǎng)頁(yè)的時(shí)都是從服務(wù)器上全部下載到客戶端，這造成了巨大的服務(wù)器的負(fù)擔(dān)，其實(shí)可以采用新的技術(shù)來(lái)避免重復(fù)內(nèi)容的請(qǐng)求.因而，Ajax技術(shù)應(yīng)運(yùn)而生并獲得廣泛應(yīng)用.

Ajax是Asynchronous JavaScript and XML的縮寫(xiě)，是由XMLHttpRequest、CSS、XML、DOM和JavaScript等技術(shù)結(jié)合而成的技術(shù)[1].它是基于JavaScript腳本和XML封裝數(shù)據(jù)的服務(wù)器和客戶端的異步交互技術(shù)，能夠?qū)崿F(xiàn)瀏覽器與服務(wù)器的異步通信，使B/S結(jié)構(gòu)的應(yīng)用程序根據(jù)用戶輸入實(shí)現(xiàn)頁(yè)面實(shí)時(shí)、局部、快速刷新，模擬類(lèi)桌面應(yīng)用程序的效果，從而不僅節(jié)省了帶寬，而且顯著地提高用戶的體驗(yàn).

1 Ajax的技術(shù)原理

傳統(tǒng)的Web應(yīng)用采用同步交互方式，用戶發(fā)送一個(gè)HTTP請(qǐng)求到服務(wù)器，服務(wù)器對(duì)其進(jìn)行處理后再返回一個(gè)新的Web頁(yè)面到瀏覽器.當(dāng)服務(wù)器正在處理的時(shí)候，用戶則一直處于等待狀態(tài)，這樣，不會(huì)產(chǎn)生較好的體驗(yàn)，而且完整頁(yè)面的傳輸會(huì)加重網(wǎng)絡(luò)負(fù)荷和服務(wù)器的工作量.

Ajax是多種技術(shù)的結(jié)合，通過(guò)協(xié)作發(fā)揮各自的作用：使用XHTML和CSS標(biāo)準(zhǔn)化呈現(xiàn)；使用DOM實(shí)現(xiàn)動(dòng)態(tài)顯示和交互；使用XML和XSTL進(jìn)行數(shù)據(jù)交換與處理；使用XMLHttp-Request對(duì)象進(jìn)行異步數(shù)據(jù)讀?。皇褂肑avaScript綁定和處理所有數(shù)據(jù)[1].

圖1 傳統(tǒng)的Web模型

圖2 Ajax Web模型

Ajax采用異步交互方式，在用戶和服務(wù)器之間引入一個(gè)用JavaScript編寫(xiě)的Ajax引擎，用來(lái)代替用戶與服務(wù)器進(jìn)行交互[3].Ajax引擎是用JavaScript語(yǔ)言所編寫(xiě)，且通常放在一個(gè)隱藏frame中，該引擎負(fù)責(zé)繪制用戶界面以及與服務(wù)器端通信[2].并不是所有的用戶請(qǐng)求都提交給服務(wù)器，像一些數(shù)據(jù)驗(yàn)證和數(shù)據(jù)處理等都交給Ajax引擎來(lái)做，只有確定需要從服務(wù)器讀取新數(shù)據(jù)時(shí)再由Ajax引擎向服務(wù)器提交請(qǐng)求，這樣，把以前的一些服務(wù)器負(fù)擔(dān)的工作轉(zhuǎn)嫁到客戶端，利用客戶端閑置的處理能力來(lái)處理，減輕服務(wù)器和帶寬的負(fù)擔(dān).

通過(guò)Ajax的技術(shù)原理可知，Ajax的最大特點(diǎn)是無(wú)刷新更新頁(yè)面，減少用戶心理和實(shí)際的等待時(shí)間；Ajax能夠按需讀取數(shù)據(jù)，避免了在網(wǎng)絡(luò)上發(fā)送那些不發(fā)生改變的信息.但Ajax并不是完美的技術(shù)，它也有自身的缺陷.瀏覽器兼容性差；前進(jìn)后退按鈕失效；一些手持設(shè)備現(xiàn)在還不能很好的支持Ajax；運(yùn)行效率不高；開(kāi)發(fā)難度加大；對(duì)搜索引擎不太友好.

2 Ajax的核心技術(shù)

Ajax的核心技術(shù)是XMLHttpRequest、JavaScript、CSS、DOM和XML.

XMLHttpRequest是Ajax中最為核心的技術(shù)，是XMLHttp組件的一個(gè)對(duì)象，最早是由微軟1995在IE5.0瀏覽器中率先推出的[4].它直接把數(shù)據(jù)傳到服務(wù)器上或者從服務(wù)器上讀取數(shù)據(jù)，實(shí)現(xiàn)上述所介紹無(wú)刷新更新頁(yè)面的功能.與此對(duì)應(yīng)，opera、Mozilla和safari等瀏覽器也實(shí)現(xiàn)了類(lèi)似的對(duì)象，XMLHttpRequest是目前該技術(shù)的正式名稱(chēng).XMLHttpRequest技術(shù)的出現(xiàn)打破了長(zhǎng)久以來(lái)的Web應(yīng)用開(kāi)發(fā)模式，這樣既減輕了服務(wù)器的負(fù)擔(dān)又加快了響應(yīng)速度、縮短了用戶等待時(shí)間，提升了用戶的體驗(yàn).

JavaScript是一種基于對(duì)象和事件驅(qū)動(dòng)并具有較高安全性能的腳本語(yǔ)言，擁有自己的編程標(biāo)準(zhǔn)，可以使用瀏覽器中的很多對(duì)象，包括XMLHttpRequest.在Ajax中，JavaScript通過(guò)調(diào)用XMLHttpRequest對(duì)象的方法和屬性與服務(wù)器端進(jìn)行數(shù)據(jù)交互，同時(shí)還可以利用DOM的API來(lái)解析從服務(wù)器端返回的XML數(shù)據(jù)和更新HTML頁(yè)面的內(nèi)容.由于JavaScript可以直接在客戶端進(jìn)行一些事件的處理，充分發(fā)揮了客戶端的運(yùn)算能力，所以就不需要將用戶所提交的簡(jiǎn)單請(qǐng)求傳到服務(wù)器處理再傳回來(lái)，從而大大減輕了服務(wù)器的負(fù)擔(dān).JavaScript在客戶端的瀏覽器執(zhí)行，JavaScript代碼不應(yīng)太多，否則會(huì)使得客戶端運(yùn)行很慢，JavaScript應(yīng)用最多的就是表單驗(yàn)證[5].

DOM是Document Object Model的縮寫(xiě)，即文檔對(duì)象模型，為文檔提供了結(jié)構(gòu)化表示，并定義了如何通過(guò)腳本來(lái)訪問(wèn)文檔結(jié)構(gòu).它是個(gè)W3C規(guī)范，獨(dú)立于平臺(tái)和語(yǔ)言.DOM定義了如何表示和修改文檔所需要的對(duì)象，也定義了這些對(duì)象的行為和屬性，以及對(duì)象之間的關(guān)系.使用JavaScript可以訪問(wèn)文檔中的所有結(jié)點(diǎn)，即所有對(duì)象.通過(guò)改變這些對(duì)象的屬性，用戶可以控制頁(yè)面的局部行為，將動(dòng)態(tài)獲取的數(shù)據(jù)插入到文檔中，實(shí)現(xiàn)局部刷新的目的.用戶還可以利用DOM模型增加和刪除文檔結(jié)點(diǎn)，實(shí)現(xiàn)界面元素的動(dòng)態(tài)變化.在應(yīng)用Ajax技術(shù)時(shí)，可以通過(guò)DOM來(lái)解析處理XML文檔和更新HTML頁(yè)面的內(nèi)容.

XML是Extensible Markup Language的縮寫(xiě)，即可擴(kuò)展標(biāo)記語(yǔ)言，可以規(guī)范地定義結(jié)構(gòu)化數(shù)據(jù)，是網(wǎng)上傳輸?shù)臄?shù)據(jù)和文檔符合統(tǒng)一標(biāo)準(zhǔn)[6].它與HTML的性質(zhì)完全相同，更準(zhǔn)確的說(shuō)，XML正是從HTML轉(zhuǎn)化而來(lái)，目前，已經(jīng)成為Internet上數(shù)據(jù)和文檔傳輸?shù)臉?biāo)準(zhǔn).XML作用很大而且廣為接受，它為跨平臺(tái)、跨領(lǐng)域的應(yīng)用提供了一種通信手段.在應(yīng)用Ajax技術(shù)時(shí)，XMLHttpRequest對(duì)象可以選擇使用XML作為與服務(wù)器端通信的數(shù)據(jù)格式.

CSS是Web設(shè)計(jì)沿用已久的部分，同樣，在Ajax中，CSS擔(dān)當(dāng)著界面表現(xiàn)的重任，其重要性甚至超過(guò)了傳統(tǒng)的Web程序設(shè)計(jì).JavaScript通過(guò)XMLHttpRequest對(duì)象和服務(wù)器進(jìn)行交互，通常獲取的都是單純的數(shù)據(jù)，不包括表現(xiàn)元素，如果此時(shí)使用JavaScript操作標(biāo)記的屬性來(lái)控制其外觀，會(huì)使代碼更加復(fù)雜且難以維護(hù)，使用CSS則能很好的解決這些問(wèn)題.樣式表可以定義一些明顯的樣式元素，例如顏色、邊框、背景圖片、透明度和大小等.此外，CSS還可以定義元素相互之間的布局及簡(jiǎn)單的交互功能.圖3顯示了Ajax技術(shù)的核心技術(shù)如何配合工作來(lái)完成客戶端與服務(wù)器的異步操作.

3 Ajax的工作流程

Ajax實(shí)現(xiàn)異步請(qǐng)求/響應(yīng)模式步驟如下：

3.1 創(chuàng)建XMLHttpRequest對(duì)象

在使用XMLHttpRequest對(duì)象發(fā)送請(qǐng)求和處理響應(yīng)之前，必須先創(chuàng)建一個(gè)XMLHttpRequest對(duì)象.代碼如下：

由于XMLHttpRequest不是一個(gè)W3C標(biāo)準(zhǔn)，Internet Explorer把XMLHttpRequest實(shí)現(xiàn)為一個(gè)ActiveX對(duì)象，其他瀏覽器（如Firefox、Safari和Opera）把它實(shí)現(xiàn)為一個(gè)本地JavaScript對(duì)象.由于存在這些差別，JavaScript代碼中必須包含有關(guān)的邏輯，從而使用ActiveX技術(shù)或者使用本地JavaScript對(duì)象技術(shù)來(lái)創(chuàng)建XMLHttpRequest對(duì)象，以確保和瀏覽器兼容.

3.2 發(fā)出HTTP請(qǐng)求和回調(diào)函數(shù)

創(chuàng)建了XMLHttpRequest對(duì)象之后，就可以使用XMLHttpRequest對(duì)象中的open()方法和send()方法來(lái)向服務(wù)器發(fā)送請(qǐng)求，如下所示：

XMLHttpRequest.open(strMethod,strUrl,boolAsync,strUser, strPassword);

XMLHttpRequest.send(varBody);

open()方法的strMethod參數(shù)，字符串型，表示HTTP請(qǐng)求的方法，可以為POST、GET、PUT、HEAD、DELETE等；strUrl，字符串型，表示請(qǐng)求的URL地址，可以為絕對(duì)地址，也可以為相對(duì)地址；boolAsync，布爾型，指定此請(qǐng)求是否為異步方式，默認(rèn)為true，如果為false，表示此次請(qǐng)求為同步請(qǐng)求模式；strUser和strPassword，字符串型，可選參數(shù).

open調(diào)用完畢后要調(diào)用send方法，send的參數(shù)var-Body，表示通過(guò)請(qǐng)求發(fā)送的數(shù)據(jù)，variant型，可以是字符串，DOM樹(shù)，或其它數(shù)據(jù)流.當(dāng)使用GET方法提交請(qǐng)求，或者沒(méi)有需要發(fā)送的數(shù)據(jù)時(shí)，可以send(nulll)或直接省略參數(shù)send ().

在發(fā)送請(qǐng)求后，還要指定回調(diào)函數(shù).創(chuàng)建XMLHttpRequest對(duì)象向服務(wù)器發(fā)送一個(gè)HTTP請(qǐng)求后，要決定當(dāng)收到服務(wù)器的響應(yīng)后，需要做什么.這需要告訴XMLHttpRequest對(duì)象用哪一個(gè)函數(shù)來(lái)處理這個(gè)響應(yīng).通常把該處理函數(shù)叫做回調(diào)函數(shù).XMLHttpRequest對(duì)象提供了onready-statechange屬性來(lái)指定回調(diào)函數(shù)，例如：

XMLHttpRequest.onreadystatechange=Call-BackFunction-Name；

也可以用JavaScript即時(shí)定義函數(shù)的方式定義響應(yīng)函數(shù)，例如：

XMLHttpRequest.onreadystatechange=funct-ion(){};

3.3 處理服務(wù)器返回的信息

當(dāng)XMLHttpRequest對(duì)象的readyState發(fā)生變化時(shí)將觸發(fā)readystatechange事件.通過(guò)將處理函數(shù)賦給XMLHttpRequest對(duì)象的onready-statechange屬性，可以為該事件指定事件處理函數(shù).如果readyState值是4，代表服務(wù)器已經(jīng)返回所有的信息，可以開(kāi)始處理信息并更新頁(yè)面內(nèi)容.服務(wù)器返回信息后，通過(guò)訪問(wèn)XMLHttp-Request對(duì)象的status屬性來(lái)獲取當(dāng)前HTTP請(qǐng)求的狀態(tài)，以此來(lái)判斷請(qǐng)求是否成功.其中，200代表頁(yè)面正常.

在XMLHttpRequest對(duì)象完成一次HTTP請(qǐng)求后，可以通過(guò)訪問(wèn)其responseText或response-XML屬性來(lái)獲取返回的數(shù)據(jù).

responseText將返回的數(shù)據(jù)作為字符串格式返回，responseXML將返回的數(shù)據(jù)格式化為XML文檔返回.

以XML文檔方式返回的數(shù)據(jù)，需要使用DOM來(lái)解析，從中提取響應(yīng)數(shù)據(jù)，DOM也提供了對(duì)頁(yè)面中各個(gè)對(duì)象的讀寫(xiě)支持，通過(guò)DOM可以方便地完成對(duì)頁(yè)面內(nèi)容的更新.

3.4 取消當(dāng)前請(qǐng)求

如果需取消一個(gè)正在進(jìn)行中的請(qǐng)求，可以調(diào)用XMLHttpRequest對(duì)象的abort方法，如下所示：

XMLHttpRequest.abort();

調(diào)用后該方法后，XMLHttpRequest對(duì)象重新回到未初始化狀態(tài).

4 Ajax技術(shù)的應(yīng)用

AJAX的技術(shù)特點(diǎn)在于異步交互、動(dòng)態(tài)更新Web頁(yè)面，因此它的適用范圍是交互較多、頻繁讀取數(shù)據(jù)的Web應(yīng)用. Ajax主要可以用于數(shù)據(jù)驗(yàn)證、級(jí)聯(lián)菜單和自動(dòng)更新頁(yè)面等.

在填寫(xiě)表單時(shí)，有些數(shù)據(jù)需要保證唯一性，如在用戶注冊(cè)的過(guò)程中，需要檢驗(yàn)待注冊(cè)的用戶名是否唯一.傳統(tǒng)的方法是采用window.open的彈出窗口或window.showModalDialog的對(duì)話框，兩者都需要打開(kāi)窗口.而Ajax采用異步方式直接將參數(shù)提交至服務(wù)器，用window.alert將服務(wù)器返回的校驗(yàn)信息顯示出來(lái)，這樣可以快速完成驗(yàn)證又不加重服務(wù)器的負(fù)擔(dān).

以往在網(wǎng)頁(yè)中應(yīng)用級(jí)聯(lián)菜單時(shí)，一次性地將級(jí)聯(lián)菜單的所有數(shù)據(jù)全部讀出并寫(xiě)入數(shù)組，然后根據(jù)用戶的操作用JavaScript來(lái)控制它的子集項(xiàng)目的呈現(xiàn).這種方法避免了頁(yè)面的刷新，但由于用戶對(duì)于菜單項(xiàng)的單擊是不均勻的，在菜單結(jié)構(gòu)復(fù)雜數(shù)據(jù)量大的時(shí)候會(huì)產(chǎn)生相當(dāng)大的冗余，造成資源的浪費(fèi).應(yīng)用Ajax技術(shù)之后，在初始化頁(yè)面時(shí)只讀出它的第一級(jí)的所有數(shù)據(jù)并顯示，在用戶操作一級(jí)菜單中的某一項(xiàng)時(shí)，會(huì)通過(guò)Ajax向后臺(tái)請(qǐng)求該菜單項(xiàng)所屬的二級(jí)子菜單的所有數(shù)據(jù)，以此類(lèi)推……這樣，減少了數(shù)據(jù)下載總量，在真正意義上實(shí)現(xiàn)“按需取數(shù)據(jù)”局部更新頁(yè)面.

在有些Web應(yīng)用中數(shù)據(jù)更新速度很快，如聊天室的聊天記錄等等.在Ajax出現(xiàn)之前，用戶想看到最新消息必須手動(dòng)刷新或者利用頁(yè)面提供的定時(shí)刷新功能.而Ajax在頁(yè)面加載后會(huì)通過(guò)引擎輪詢(xún)服務(wù)器，查看是否有需要更新的內(nèi)容.若有，只需將新數(shù)據(jù)下載，在頁(yè)面上進(jìn)行動(dòng)態(tài)更新并給出提示.這樣既避免用戶手工刷新頁(yè)面的不便，也不會(huì)因頻繁刷新而造成資源浪費(fèi).

然而Ajax不是萬(wàn)能的，只有在適宜的場(chǎng)合才能充分發(fā)揮長(zhǎng)處，改善系統(tǒng)性能和用戶體驗(yàn).

5 結(jié)語(yǔ)

Ajax技術(shù)是多種技術(shù)的結(jié)合，實(shí)現(xiàn)了無(wú)刷新更新頁(yè)面；它將原來(lái)一些服務(wù)器端的工作利用客戶端閑置的能力來(lái)處理，從而減輕服務(wù)器的負(fù)擔(dān)，減少用戶的等待時(shí)間，提升了用戶體驗(yàn).通過(guò)運(yùn)用Ajax技術(shù)，可以構(gòu)建更為動(dòng)態(tài)和響應(yīng)更靈敏的Web引用程序，用戶體驗(yàn)逐步接近桌面應(yīng)用.隨著Ajax技術(shù)的成熟和各種瀏覽器的支持，Ajax技術(shù)將會(huì)得到更加廣泛的應(yīng)用.

〔1〕Asleson R.Ajax基礎(chǔ)教程[M].北京：人民郵電出版社, 2006.

〔2〕游麗貞.Ajax引擎的原理與應(yīng)用[J].微計(jì)算機(jī)信息,2006,22 (2):506-206.

〔3〕譚力,楊宗源,謝瑾奎.Ajax技術(shù)的數(shù)據(jù)響應(yīng)優(yōu)化[J].計(jì)算機(jī)工程,2010,36(7):52-54.

〔4〕王凈,占凱.Ajax技術(shù)和Web應(yīng)用[J].艦船電子工程,2009，29(11):127-131.

〔5〕奈名高,王程根,鄧浩,李祎.基于Web2.0的Ajax技術(shù)的開(kāi)發(fā)[J].計(jì)算機(jī)技術(shù)與發(fā)展,2007,17(5):203-206.

〔6〕吳吉義,平玲娣.Web2.0主流應(yīng)用技術(shù)——Ajax性能分析[J].計(jì)算機(jī)工程與設(shè)計(jì),2008,29(8):1913-1914,1945.

TP393

A

1673-260X（2010）11-0020-03