摘 要：隨著Web應(yīng)用開發(fā)的不斷深入和普及，基于互聯(lián)網(wǎng)的應(yīng)用程序越來越多，現(xiàn)有網(wǎng)絡(luò)應(yīng)用程序中的請求-處理-等待模式越來越不適應(yīng)用戶需求，頁面重載成為Web開發(fā)應(yīng)用中最大的可用性障礙。AJAX設(shè)計模式的出現(xiàn)，實現(xiàn)了平滑滾屏互聯(lián)網(wǎng)應(yīng)用。在這種模式下，各種Web應(yīng)用程序互相配合，能使網(wǎng)站無縫運作。提出利用AJAX異步機(jī)制實現(xiàn)Web應(yīng)用程序開發(fā)，Web頁面不用打斷交互流程進(jìn)行重新加載就可以動態(tài)更新。使用AJAX，可以創(chuàng)建接近本地桌面應(yīng)用的、直接的、高可用的、更豐富的、動態(tài)的Web用戶接口界面，極大地改善了Web應(yīng)用的可用性和用戶的交互體驗。

關(guān)鍵詞：AJAX；JavaScript；XMLHttpRequest；DOM；XML

中圖分類號：TP393 文獻(xiàn)標(biāo)識碼：B

文章編號：1004-373X(2008)10-079-03

Asynchronous Web Development Mode Based on AJAX

ZHAO Dingyuan

(School of Information and Science，Chengdu University，Chengdu，610061，China)

Abstract：Along with the depth and popularization of Web application development，more and more applications based on internet appeared.But request-process-wait mode in current Web application is unbearable to customers.Page reloading becomes the handicap to usability.Now the appearance of AJAX design mode brings many new function-smooth screen scrolling in Web application.By using this design mode，different Web application cooperate with each other，making webs running flawless，like computer program running in personal computer.This article is mainly about development web application based on AJAX asynchronous mode.By using AJAX，pages can be reloaded to update dynamically without interruption，also can create immediate，useful，abundant，dynamic Web UI，it greatly improves availability of Web and interactive experience of users.

Keywords：AJAX；JavaScript；XMLHttpRequest；DOM；XML

1 引 言

AJAX是異步JavaScript和XML單詞的縮寫為Asynchronous JavaScript and XML。AJAX是目前在瀏覽器中通過JavaScript腳本可以使用的所有技術(shù)的集合，例如Java技術(shù)、XML、以及JavaScript技術(shù)，他是當(dāng)前Web創(chuàng)新(稱為Web 2.0)中的一個熱點。AJAX是使用客戶端腳本與Web服務(wù)器交換數(shù)據(jù)的Web應(yīng)用開發(fā)方法，Web頁面不用打斷交互流程進(jìn)行重新加裁，就可以動態(tài)更新。使用AJAX，可以創(chuàng)建接近本地桌面應(yīng)用的，直接的、高可用的、更豐富的、更動態(tài)的Web用戶接口界面。AJAX并不僅是一個技術(shù)，他更像是一套技術(shù)組合而成的設(shè)計模式，是用來標(biāo)志并描述設(shè)計技巧的一種方法，對于剛了解他的許多開發(fā)人員來說，他是一種新的感覺。即使實現(xiàn)AJAX的所有組件都已存在了許多年，然而AJAX以一種嶄新的方式來使用所有的這些技術(shù)，在構(gòu)建基于Java技術(shù)的Web應(yīng)用時，打破了使用頁面重載的慣例。AJAX動態(tài)的WebUI，尤其是Google的GMail與Maps應(yīng)用系統(tǒng)、與照片共享網(wǎng)站Flickr，充分地使用后臺通道，這就是“Web 2.0”概念。

2 AJAX核心技術(shù)

具體來說，AJAX基于下列這些核心技術(shù):

XHTML:對應(yīng)W3C的XHTML規(guī)范，目前是XHTML1.0；CSS:對應(yīng)W3C的CSS規(guī)范，目前是CSS2.0；DOM:這里的DOM主要是指HTML DOM，XML DOM包括在下面的XML中；JavaScript:對應(yīng)于ECMA的ECMAScript規(guī)范；XML:對應(yīng)W3C的XML DOM，XSLT，XPath等規(guī)范；XMLHttpRequest:對應(yīng)WhatWG的Web Applications 1.0規(guī)范的一部分；AJAX使用XHTML和CSS標(biāo)準(zhǔn)化呈現(xiàn)，使用DOM實現(xiàn)動態(tài)顯示和交互，用XML和XSLT進(jìn)行數(shù)據(jù)交換和處理，使用XMLHttpRequest進(jìn)行異步數(shù)據(jù)處理，最后用JavaScript綁定和處理所有數(shù)據(jù)。

在上述的這些AJAX的核心技術(shù)中，最核心的技術(shù)就是XMLHttpRequest。他正是AJAX技術(shù)與眾不同的地方。簡而言之，XMLHttpRequest為運行在瀏覽器中的JavaScript腳本提供了一種在頁面之內(nèi)與服務(wù)器通信的手段。頁面內(nèi)的JavaScript可以在不刷新頁面的情況下從服務(wù)器獲取數(shù)據(jù)，或者向服務(wù)器提交數(shù)據(jù)。而在這個技術(shù)出現(xiàn)之前，瀏覽器只能通過HTML表單的提交向服務(wù)器提交數(shù)據(jù)，從服務(wù)器獲取數(shù)據(jù)只能通過點擊一個超鏈接，這些操作一般都會帶來一次全頁面的刷新。

3 基于AJAX的異步機(jī)制開發(fā)模式

AJAX開發(fā)模式最重要的特色是異步機(jī)制。異步是描述的一個客戶端與一個服務(wù)器端的交互的側(cè)面，當(dāng)一個AJAX應(yīng)用程序交互的時候，那種可以更新展示在屏幕上的信息塊而不需要刷新或者重載他的所有內(nèi)容的方式就是異步的，因為能夠在服務(wù)器端構(gòu)建很多不同的調(diào)用而不需要在等待服務(wù)器響應(yīng)的時候(表現(xiàn)形式就是客戶阻塞)一直不停的盯著一個空白的屏幕。圖1所示為AJAX具體的過程模型。

許多重要的技術(shù)和AJAX開發(fā)模式可以從現(xiàn)有的知識中獲取。例如，在一個發(fā)送請求到服務(wù)端的應(yīng)用中，必須包含請求順序、優(yōu)先級、超時響應(yīng)、錯誤處理及回調(diào)，其中許多元素已經(jīng)包含在Web服務(wù)中。AJAX開發(fā)人員擁有一個完整的系統(tǒng)架構(gòu)知識。同時，隨著技術(shù)的成熟還會有許多地方需要改進(jìn)，特別是UI部分的易用性。

AJAX開發(fā)與傳統(tǒng)的CS開發(fā)有很大的不同。這些不同引入了新的編程問題，最大的問題在于易用性。由于AJAX依賴瀏覽器的JavaScript和XML，瀏覽器的兼容性和支持的標(biāo)準(zhǔn)也變得和JavaScript的性能一樣重要。這些問題中的大部分來源于瀏覽器、服務(wù)器和技術(shù)的組合，因此必須理解這些區(qū)別才能最好地使用這些技術(shù)。

4 異步Web開發(fā)模式的優(yōu)點

將AJAX實現(xiàn)的Web應(yīng)用模式跟傳統(tǒng)Web應(yīng)用模式進(jìn)行比對，如圖2所示。

由圖2可知，AJAX的工作原理相當(dāng)于在用戶和服務(wù)器之間加一個中間層，使用戶操作與服務(wù)器響應(yīng)異步化。這樣把以前的一些服務(wù)器負(fù)擔(dān)的工作轉(zhuǎn)移到客戶端，利于客戶端閑置的處理能力來處理，減輕服務(wù)器和帶寬的負(fù)擔(dān)，從而達(dá)到節(jié)約ISP的空間及帶寬租用成本的目的。

使用AJAX的優(yōu)勢在于：

(1) 減輕服務(wù)器的負(fù)擔(dān)，可以最大限度地減少冗余請求；

(2) 無刷新更新頁面，減少等待時間；

(3) 可以把服務(wù)器的負(fù)擔(dān)轉(zhuǎn)嫁一部分到客戶端，減輕服務(wù)器端負(fù)擔(dān)，節(jié)約空間和寬帶成本；

(4) 可以調(diào)用外部數(shù)據(jù)；

(5) 基于標(biāo)準(zhǔn)化的并被廣泛支持的技術(shù)，不需要下載插件或小程序；

(6) 進(jìn)一步促進(jìn)的頁面表示和數(shù)據(jù)的分離。

由上述優(yōu)勢可以看出，AJAX發(fā)展在于Web應(yīng)用開發(fā)的不斷改進(jìn)。在使應(yīng)用更快響應(yīng)和創(chuàng)新的過程中，重心定義Web應(yīng)用的規(guī)則。原來用戶通常每一次按鈕點擊會導(dǎo)致幾秒的延遲和屏幕刷新，AJAX的應(yīng)用改變了這種等待的狀況。

5 AJAX異步開發(fā)模式的實現(xiàn)

一個AJAX交互從一個稱為XMLHttpRequest的JavaScript對象開始。如同名字所暗示的，他允許一個客戶端腳本來執(zhí)行HTTP請求，并且將會解析一個XML格式的服務(wù)器響應(yīng)。AJAX處理過程中的第一步是創(chuàng)建一個XMLHttpRequest實例。使用HTTP方法(GET或POST)來處理請求，并將目標(biāo)URL設(shè)置到XMLHttpRequest對象上。

下面給出的示例用于創(chuàng)建一個簡單的HTML頁面，用文本框接受用戶的年齡輸入，當(dāng)用戶輸入完畢后，鼠標(biāo)離開文本框后，頁面自動將用戶信息提交到服務(wù)器處理，服務(wù)器判斷用戶年齡，如果年齡大于等于18，就返回信息“permission”，否則返回信息“no permission”，處理完畢后客戶端頁面自動顯示服務(wù)器返回信息。

下面分步編寫AJAX設(shè)計模式代碼完成上述功能。

5.1 創(chuàng)建新的XMLHttpRequest對象并發(fā)送請求

為了使Javascript能夠向服務(wù)器發(fā)送HTTP請求，必須實例化XMLHttpRequest對象，但是由于各個瀏覽器的不同，對XMLHttpRequest實例化的過程也不一樣。下述代碼能夠在不同的瀏覽器中實例化一個XMLHttpRequest對象。代碼如下：



var httpReq=1

if(window.XMLHttpRequest)[JY]//Mozilla

{

httpReq =new XMLHttpRequest();

if(httpReq.overrideMimeType)

{

httpReq.overrideMimeType(\"text/html\");

}

}

else if(window.ActiveXObject)[JY]//IE

{

try

{

httpReq = new ActiveXObject(\"Msxml2.XMLHTTP\");

}

catch(e)

{

try

{

httpReq=new ActiveXObject(\"Microsoft.XMLHTTP\");

}

catch(e2)

{

httpReq = 1;

}

}

}

if(!httpReq)

{

window.alert(\"不能創(chuàng)建XMLHttpRequest實例\");

return 1;

}



5.2 指定響應(yīng)處理函數(shù)

開發(fā)人員只要將相應(yīng)的處理函數(shù)的名字賦給XMLHttpRequest對象的屬性onreadystatechange即可。這就是當(dāng)服務(wù)器返回信息時AJAX客戶端處理的方式。下述代碼指定processRequest()方法來處理服務(wù)器端發(fā)回的請求。



httpReq.onreadystatechange=processRequest



5.3 發(fā)出HTTP請求

這將進(jìn)一步調(diào)用XMLHttpRequest對象的open和send方法。



httpReq.open(\"GET\"，\"http://www.westsec.com.cn/test.jsp?age=17\"，true);

httpReq.send(1);



Open()的第一個參數(shù)是HTTP請求的方法，可選值為Get，Post或Head。

5.4 處理服務(wù)器返回信息

一般開發(fā)人員用響應(yīng)處理函數(shù)處理服務(wù)器返回的信息。



function processRequest()

{

if(http[CD#*2]request.readyState==4)

{

if(http[CD#*2]request.status==200)

{

document.getElementById(\"info\").innerText=http[CD#*2]request.responseText;

}

else

{

alert(\"您請求的頁面有異常\");

}

}

}



當(dāng)readyState值為4時，說明服務(wù)器已經(jīng)處理請求完畢并已經(jīng)發(fā)回響應(yīng)信息，可以在id為”info”的組件中顯示服務(wù)器返回的信息。

5.5 服務(wù)器端應(yīng)用

下面代碼用于服務(wù)器端處理客戶端的請求，服務(wù)器采用JSP代碼，判斷客戶端輸入的年齡大小，如果年齡大于等于18歲，就返回”permission”信息，否則返回”no permission”信息。



<%@ page language=\"java\" contentType=\"text/html;charset=GB2312\"

pageEncoding=\"GB2312\"%>

<%

int age=Integer.parseInt(request.getParameter(\"age\"));

if(age>=18)

out.println(\"permission\");

else

out.println(\"no permission\");

%>



6 結(jié) 語

synchronous Javascript and Xml(Ajax)是當(dāng)前非常流行的Web開發(fā)技術(shù)，作為Rich Internet Application(RIA)的一種實現(xiàn)技術(shù)，AJAX不僅可以改善用戶體驗，還可以簡化Web開發(fā)，通過將頁面高度模塊化，數(shù)據(jù)與表現(xiàn)分離，從而可以使服務(wù)器端和客戶端都可以很好的解耦，降低開發(fā)的復(fù)雜度。 

AJAX是Javascript一些相對比較高級的特性的綜合應(yīng)用為此，與其他RIA實現(xiàn)技術(shù)(如Flash，Java Applet)相比，不需要在客戶端安裝特殊的插件，具有更廣泛的瀏覽器兼容性。

AJAX使得Web應(yīng)用更加動態(tài)，帶來了更高的智能，并且提供了表現(xiàn)能力豐富的AJAX UI組件。創(chuàng)建一個成功的AJAX應(yīng)用需要一系列的方法即從JavaScript UI設(shè)計到服務(wù)器端架構(gòu)。AJAX就是Web標(biāo)準(zhǔn)和Web應(yīng)用的可用性理論的集大成者。他極大地改善了Web應(yīng)用的可用性和用戶的交互體驗，最終得到了用戶和市場的廣泛認(rèn)可。

參 考 文 獻(xiàn)

［1］David Flanagan.JavaScript權(quán)威指南[M].北京:機(jī)械工業(yè)出版社，2006.

［2］柯自聰.AJAX開發(fā)簡略[EB/OL].http://www.blogjava.net/eamoi/，2005.

［3］Dave Crane Eric Pascarello.AJAX in ActionManning Publications Company，2006:96-98.



作者簡介

趙定遠(yuǎn) 男，1955年出生。研究方向為軟件測試、數(shù)據(jù)采集與通信、嵌入式系統(tǒng)。