淺析AJ AX開發技術

宋鵬

【摘 要】介紹了一種網站交互方式技術AJAX，對 AJAX 開發技術基本原理進行了探討，最后列出一個初步的AJAX開發框架示例方便讀者開發實用的W EB 應用程序。

【關鍵詞】AJAX技術；異步通信；W EB；AJAX開發框架

一、AJAX介紹

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

傳統的 Web 應用采用同步交互過程，用戶首先向 HTTP 服務器觸發一個行為或請求的呼求。反過來，服務器執行某些任務，再向發出請求的用戶返回一個HTML頁面。這是一種不連貫的用戶體驗，服務器在處理請求的時候，用戶多數時間處于等待的狀態，屏幕內容也是一片空白。

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

與傳統的 Web 應用不同，AJAX 采用異步交互過程。AJAX在用戶與服務器之間引入一個中間媒介，從而消除了網絡交互過程中的處理—等待—處理—等待缺點。用戶的瀏覽器在執行任務時即裝載了AJAX 引擎。AJAX引擎用JavaScript語言編寫，通常藏在一個隱藏的框架中。它負責編譯用戶界面及與服務器之間的交互。AJAX 引擎允許用戶與應用軟件之間的交互過程異步進行，獨立于用戶與網絡服務器間的交流?，F在，可以用Javascript 調用AJAX引擎來代替產生一個 HTTP 的用戶動作，內存中的數據編輯、頁面導航、數據校驗這些不需要重新載入整個頁面的需求可以交給 AJAX 來執行。

二、AJAX 開發框架

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

1、初始化對象并發出 XMLHttpRequest 請求

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

if （window.XMLHttpRequest）

{ // Mozilla， Safari， ...

http_request = new XMLHttpRequest（）；

}

else if （window.ActiveXObject）

{ // IE

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

有些版本的Mozilla 瀏覽器處理服務器返回的未包含 XML mime- type 頭部信息的內容時會出錯。因此，要確保返回的內容包含 text/xml 信息。

http_request = new XMLHttpRequest（）；

http_request.overrideMimeType（text/xml）；

2、指定響應處理函數

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

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

3、發出HTTP請求

指定響應處理函數之后，就可以向服務器發出HTTP請求了。這一步調用XMLHttpRequest對象的open和send方法。

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

http_request.send（null）；

open 的第一個參數是 HTTP 請求的方法，為 Get、Post 或者Head。

open 的第二個參數是目標URL?；诎踩紤]，這個URL只能是同網域的，否則會提示“沒有權限”的錯誤。這個URL可以是任何的URL，包括需要服務器解釋執行的頁面，不僅僅是靜態頁面。目標URL處理請求XMLHttpRequest請求則跟處理普通的HTTP 請求一樣，比如ASP可以用request （""）來取得 URL 參數值。

open的第三個參數只是指定在等待服務器返回信息的時間內是否繼續執行下面的代碼。如果為True，則不會繼續執行，直到服務器返回信息。默認為True。

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

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

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

例如： name=value&realname=other

4、處理服務器返回的信息

在第二步我們已經指定了響應處理函數，這一步，來看看這個響應處理函數都應該做什么。

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

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

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

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

responseText：將傳回的信息當字符串使用；

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

5、一個初步的開發框架示例

下面為一個可用的開發框架，將服務器返回的信息用彈出提示框的形式顯示出來：

三、使用 AJAX的一些優點

1、減輕服務器的負擔。AJAX的原則是“按需取數據”，可以最大程度的減少冗余請求及響應對服務器造成的負擔。

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

3、帶來更好的用戶體驗?？梢园岩郧耙恍┓掌髫摀墓ぷ鬓D嫁到客戶端，利用客戶端閑置的能力來處理，減輕服務器和帶寬的負擔，節約空間和寬帶租用成本?？梢哉{用外部數據?；跇藴驶牟⒈粡V泛支持的技術，不需要下載插件或者小程序。進一步促進頁面呈現和數據的分離。

四、使用 AJAX的一些缺陷

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

2、AJAX 更新頁面內容的時候并沒有刷新整個頁面，因此，網頁的后退功能是失效的；有的用戶還經常搞不清楚現在的數據是舊的還是已經更新過的。這個就需要在明顯位置提醒用戶“數據已更新”。

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

4、一些手持設備（如手機、PDA 等）現在還不能很好的支持Ajax。

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