基于ＡＪＡＸ的異步Ｗｅｂ開發(fā)模式

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

關鍵詞：AJAX；JavaScript；XMLHttpRequest；DOM；XML

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

2 AJAX核心技術

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

(5) 基于標準化的并被廣泛支持的技術，不需要下載插件或小程序；

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

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

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

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

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

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

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

為了使Javascript能夠向服務器發(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 指定響應處理函數(shù)

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



httpReq.onreadystatechange=processRequest



5.3 發(fā)出HTTP請求

這將進一步調(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 處理服務器返回信息

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



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(\"您請求的頁面有異常\");

}

}

}



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

5.5 服務器端應用

下面代碼用于服務器端處理客戶端的請求，服務器采用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 結 語

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

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

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

參 考 文 獻

［1］David Flanagan.JavaScript權威指南[M].北京:機械工業(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.



作者簡介

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