淺析AJ AX開發(fā)技術(shù)

宋鵬

【摘 要】介紹了一種網(wǎng)站交互方式技術(shù)AJAX，對 AJAX 開發(fā)技術(shù)基本原理進(jìn)行了探討，最后列出一個(gè)初步的AJAX開發(fā)框架示例方便讀者開發(fā)實(shí)用的W EB 應(yīng)用程序。

【關(guān)鍵詞】AJAX技術(shù)；異步通信；W EB；AJAX開發(fā)框架

一、AJAX介紹

AJAX全稱為“Asynchronous JavaScript and XML”（異步JavaScript和XML），是指一種創(chuàng)建交互式網(wǎng)頁應(yīng)用的網(wǎng)頁開發(fā)技術(shù)。AJAX技術(shù)是目前在瀏覽器中通過JavaScript腳本可以使用的所有技術(shù)的集合。AJAX以一種嶄新的方式來使用所有的這些技術(shù)，使得傳統(tǒng)的B/S方式的Web開發(fā)煥發(fā)了新的活力。

傳統(tǒng)的 Web 應(yīng)用采用同步交互過程，用戶首先向 HTTP 服務(wù)器觸發(fā)一個(gè)行為或請求的呼求。反過來，服務(wù)器執(zhí)行某些任務(wù)，再向發(fā)出請求的用戶返回一個(gè)HTML頁面。這是一種不連貫的用戶體驗(yàn)，服務(wù)器在處理請求的時(shí)候，用戶多數(shù)時(shí)間處于等待的狀態(tài)，屏幕內(nèi)容也是一片空白。

自從采用超文本作為 Web 傳輸和呈現(xiàn)之后，我們都是采用這一套傳輸方式。當(dāng)負(fù)載比較小的時(shí)候，這并不會體現(xiàn)出有什么不妥?？墒钱?dāng)負(fù)載比較大，響應(yīng)時(shí)間要很長，這種等待就不可忍受了。嚴(yán)重的，超過響應(yīng)時(shí)間，服務(wù)器干脆告訴你頁面不可用。另外，某些時(shí)候，我只是想改變頁面一小部分的數(shù)據(jù)，我們必須重新加載整個(gè)頁面。當(dāng)軟件設(shè)計(jì)越來越講究人性化的時(shí)候，這么糟糕的用戶體驗(yàn)簡直與這種原則背道而馳。要讓用戶不用老是等待服務(wù)器取數(shù)據(jù)，至少，我們應(yīng)該減少用戶等待的時(shí)間?，F(xiàn)在，除了程序設(shè)計(jì)、編碼優(yōu)化和服務(wù)器調(diào)優(yōu)之外，還可以采用 AJAX。

與傳統(tǒng)的 Web 應(yīng)用不同，AJAX 采用異步交互過程。AJAX在用戶與服務(wù)器之間引入一個(gè)中間媒介，從而消除了網(wǎng)絡(luò)交互過程中的處理—等待—處理—等待缺點(diǎn)。用戶的瀏覽器在執(zhí)行任務(wù)時(shí)即裝載了AJAX 引擎。AJAX引擎用JavaScript語言編寫，通常藏在一個(gè)隱藏的框架中。它負(fù)責(zé)編譯用戶界面及與服務(wù)器之間的交互。AJAX 引擎允許用戶與應(yīng)用軟件之間的交互過程異步進(jìn)行，獨(dú)立于用戶與網(wǎng)絡(luò)服務(wù)器間的交流?，F(xiàn)在，可以用Javascript 調(diào)用AJAX引擎來代替產(chǎn)生一個(gè) HTTP 的用戶動作，內(nèi)存中的數(shù)據(jù)編輯、頁面導(dǎo)航、數(shù)據(jù)校驗(yàn)這些不需要重新載入整個(gè)頁面的需求可以交給 AJAX 來執(zhí)行。

二、AJAX 開發(fā)框架

AJAX實(shí)質(zhì)上也是遵循 Request/Server 模式，所以這個(gè)框架基本的流程也是：對象初始化- >發(fā)送請求- >服務(wù)器接收- >服務(wù)器返回- >客戶端接收- >修改客戶端頁面內(nèi)容。只不過這個(gè)過程是異步的。

1、初始化對象并發(fā)出 XMLHttpRequest 請求

為了讓Javascript 可以向服務(wù)器發(fā)送 HTTP 請求，必須使用XMLHttpRequest 對象。使用之前，要先將 XMLHttpRequest 對象實(shí)例化。之前說過，各個(gè)瀏覽器對這個(gè)實(shí)例化過程實(shí)現(xiàn)不同。IE 以ActiveX 控件的形式提供，而Mozilla 等瀏覽器則直接以XMLHttpRequest 類的形式提供。為了讓編寫的程序能夠跨瀏覽器運(yùn)行，要這樣寫：

if （window.XMLHttpRequest）

{ // Mozilla， Safari， ...

http_request = new XMLHttpRequest（）；

}

else if （window.ActiveXObject）

{ // IE

http_request = new ActiveXObject（"Microsoft.XMLHTTP"）； }

有些版本的Mozilla 瀏覽器處理服務(wù)器返回的未包含 XML mime- type 頭部信息的內(nèi)容時(shí)會出錯(cuò)。因此，要確保返回的內(nèi)容包含 text/xml 信息。

http_request = new XMLHttpRequest（）；

http_request.overrideMimeType（text/xml）；

2、指定響應(yīng)處理函數(shù)

接下來要指定當(dāng)服務(wù)器返回信息時(shí)客戶端的處理方式。只要將相應(yīng)的處理函數(shù)名稱賦給XMLHttpRequest對象的onreadystatechange屬性就可以了。

比如：http_request.onreadystatechange = processRequest；需要指出的時(shí)，這個(gè)函數(shù)名稱不加括號，不指定參數(shù)。也可以用Javascript 即時(shí)定義函數(shù)的方式定義響應(yīng)函數(shù)。比如：http_request. onreadystatechange = function（） {}；

3、發(fā)出HTTP請求

指定響應(yīng)處理函數(shù)之后，就可以向服務(wù)器發(fā)出HTTP請求了。這一步調(diào)用XMLHttpRequest對象的open和send方法。

http_request.open（GET， http：//www.example.org/some.file， true）；

http_request.send（null）；

open 的第一個(gè)參數(shù)是 HTTP 請求的方法，為 Get、Post 或者Head。

open 的第二個(gè)參數(shù)是目標(biāo)URL?；诎踩紤]，這個(gè)URL只能是同網(wǎng)域的，否則會提示“沒有權(quán)限”的錯(cuò)誤。這個(gè)URL可以是任何的URL，包括需要服務(wù)器解釋執(zhí)行的頁面，不僅僅是靜態(tài)頁面。目標(biāo)URL處理請求XMLHttpRequest請求則跟處理普通的HTTP 請求一樣，比如ASP可以用request （""）來取得 URL 參數(shù)值。

open的第三個(gè)參數(shù)只是指定在等待服務(wù)器返回信息的時(shí)間內(nèi)是否繼續(xù)執(zhí)行下面的代碼。如果為True，則不會繼續(xù)執(zhí)行，直到服務(wù)器返回信息。默認(rèn)為True。

按照順序，open 調(diào)用完畢之后要調(diào)用 send 方法。send 的參數(shù)如果是以 Post 方式發(fā)出的話，可以是任何想傳給服務(wù)器的內(nèi)容。不過，跟 form 一樣，如果要傳文件或者 Post 內(nèi)容給服務(wù)器，必須先調(diào)用 setRequestHeader 方法，修改 MIME 類別。如下：

http_request.setRequestHeader（"Content- Type"，"application/ x- www- form- urlencoded "）；

這時(shí)資料則以查詢字符串的形式列出，作為send參數(shù)。

例如： name=value&realname=other

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

在第二步我們已經(jīng)指定了響應(yīng)處理函數(shù)，這一步，來看看這個(gè)響應(yīng)處理函數(shù)都應(yīng)該做什么。

首先，它要檢查 XMLHttpRequest 對象的 readyState 值，判斷請求目前的狀態(tài)。參照前文的屬性表可以知道，readyState 值為 4的時(shí)候，代表服務(wù)器已經(jīng)傳回所有的信息，可以開始處理信息并更新頁面內(nèi)容了。如下：if （http_request.readyState == 4） {//信息已經(jīng)返回，可以開始處理} else {//信息還沒有返回，等待}

服務(wù)器返回信息后，還需要判斷返回的HTTP狀態(tài)碼，確定返回的頁面沒有錯(cuò)誤。所有的狀態(tài)碼都可以在W3C的官方網(wǎng)站上查到。其中，200 代表頁面正常。

if （http_request.status == 200） {//頁面正常，可以開始處理信息} else {//頁面有問題}

XMLHttpRequest 對成功返回的信息有兩種處理方式：

responseText：將傳回的信息當(dāng)字符串使用；

responseXML：將傳回的信息當(dāng) XML 文檔使用，可以用 DOM處理。

5、一個(gè)初步的開發(fā)框架示例

下面為一個(gè)可用的開發(fā)框架，將服務(wù)器返回的信息用彈出提示框的形式顯示出來：

三、使用 AJAX的一些優(yōu)點(diǎn)

1、減輕服務(wù)器的負(fù)擔(dān)。AJAX的原則是“按需取數(shù)據(jù)”，可以最大程度的減少冗余請求及響應(yīng)對服務(wù)器造成的負(fù)擔(dān)。

2、無刷新更新頁面，減少用戶心理和實(shí)際的等待時(shí)間。特別的，當(dāng)要讀取大量的數(shù)據(jù)的時(shí)候，不用像重新裝載那樣出現(xiàn)白屏的情況，AJAX 使用 XMLHTTP 對象發(fā)送請求并得到服務(wù)器響應(yīng)，在不重新載入整個(gè)頁面的情況下用 Javascript 操作 DOM 最終更新頁面。所以在讀取數(shù)據(jù)的過程中，用戶所面對的不是白屏，是原來的頁面內(nèi)容（也可以加一個(gè)Loading...的提示框讓用戶知道處于讀取數(shù)據(jù)過程），只有當(dāng)數(shù)據(jù)接收完畢之后才更新相應(yīng)部分的內(nèi)容。這種更新是瞬間的，用戶幾乎感覺不到。

3、帶來更好的用戶體驗(yàn)。可以把以前一些服務(wù)器負(fù)擔(dān)的工作轉(zhuǎn)嫁到客戶端，利用客戶端閑置的能力來處理，減輕服務(wù)器和帶寬的負(fù)擔(dān)，節(jié)約空間和寬帶租用成本?？梢哉{(diào)用外部數(shù)據(jù)?；跇?biāo)準(zhǔn)化的并被廣泛支持的技術(shù)，不需要下載插件或者小程序。進(jìn)一步促進(jìn)頁面呈現(xiàn)和數(shù)據(jù)的分離。

四、使用 AJAX的一些缺陷

1、AJAX 大量使用了 Javascript 和 AJAX 引擎，而這個(gè)取決于瀏覽器的支持。IE5.0及以上、Mozilla1.0、NetScape7及以上版本才支持，Mozilla雖然也支持AJAX，但是提供XMLHttpRequest 的方式不一樣。所以，使用 AJAX 的程序必須測試針對各個(gè)瀏覽器的兼容性。

2、AJAX 更新頁面內(nèi)容的時(shí)候并沒有刷新整個(gè)頁面，因此，網(wǎng)頁的后退功能是失效的；有的用戶還經(jīng)常搞不清楚現(xiàn)在的數(shù)據(jù)是舊的還是已經(jīng)更新過的。這個(gè)就需要在明顯位置提醒用戶“數(shù)據(jù)已更新”。

3、對流媒體的支持沒有 FLASH、Java Applet 好。

4、一些手持設(shè)備（如手機(jī)、PDA 等）現(xiàn)在還不能很好的支持Ajax。

使用AJAX技術(shù)的這些缺陷在本系統(tǒng)沒有什么大的麻煩，只要多做處判斷與處理即可解決。