摘 要：以無刷新頁面提交技術(shù)Ajax為前提，通過描述傳統(tǒng)應(yīng)用頁面提交的刷新過程中出現(xiàn)的弊端，結(jié)合Ajax的技術(shù)特點，介紹Ajax技術(shù)中的主要組成部分及實現(xiàn)原理。根據(jù)Web應(yīng)用框架STRUTS的工作方式，將Ajax技術(shù)與其結(jié)合，構(gòu)建框架下的無刷新Web應(yīng)用，并介紹主要實現(xiàn)方法。通過對STRUTS框架中Ajax技術(shù)的使用，使得瀏覽器和服務(wù)器間異步通信，實現(xiàn)無刷新頁面提交。最后闡述Ajax技術(shù)的優(yōu)勢及其結(jié)合STRUTS框架的實現(xiàn)特點。

關(guān)鍵詞：Ajax;STRUTS;XML HTTP Request；異步通信

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

文章編號：1004-373X(2008)22-057-02

Web Application Using Ajax and STRUTS

QI Yanjun，XING Jijun

(Institute for Economy Management，Northwest University of Political and Law，Xi′an，710063，China)

Abstract： Declared the defect of brush-up Web page in traditional page submission.The peculiarity，principle and main parts of Ajax are introduced.According to the typical of STRUTS framework，combining Ajax with Web application of STRUTS .Using Ajax and STRUTS，asynchronous communication can be fulfilled between client and server.An example is used to introduce how to implement Ajax application.The advantages of Ajax and STRUTS in combination with Ajax to create Web application that no brush-up page are explained.

Keywords：Ajax STRUTS;XML HTTP Request;asynchronous communication

在傳統(tǒng)Web應(yīng)用運(yùn)行方式中，用戶發(fā)出HTTP請求到服務(wù)器端，后端對該請求進(jìn)行處理后返回一個新的頁面到客戶端。但是服務(wù)器端在處理客戶端提交的服務(wù)請求時，客戶處于空閑等待狀態(tài)（無論請求量的大?。?，因而在每次發(fā)出服務(wù)請求后都需要花時間等待。而Ajax（Asynchronous JavaScript and XML applications）技術(shù)通過Javascript來異步取得XML數(shù)據(jù)的應(yīng)用程序，在Web應(yīng)用中，用戶發(fā)出的Web服務(wù)請求使得用戶感覺到幾乎所有的操作會很快響應(yīng)而沒有頁面重載（白屏）的等待^［1］。

1 Ajax技術(shù)

Ajax技術(shù)采用XMLHTTP組件XMLHTTPRequest對象，無需刷新頁面便可向服務(wù)器傳輸或讀寫數(shù)據(jù)（即無刷新更新頁面），如同桌面應(yīng)用同服務(wù)器交換數(shù)據(jù)，不用每次都刷新界面也不用每次將數(shù)據(jù)處理的工作提交給服務(wù)器，這樣即減輕了服務(wù)器的負(fù)擔(dān)又加快響應(yīng)速度、縮短用戶等候時間。

1.1 原理

Ajax不是一門新的語言或技術(shù)，是幾項技術(shù)按一定的方式組合在一起，同共協(xié)作發(fā)揮各自的作用，包括：

(1) 使用XHTML和CSS標(biāo)準(zhǔn)化呈現(xiàn)；

(2) 使用DOM實現(xiàn)動態(tài)顯示和交互；

(3) 使用XML和XSLT進(jìn)行數(shù)據(jù)交換與處理；

(4) 使用XMLHTTP Request進(jìn)行異步數(shù)據(jù)讀??；

(5) 使用JavaScript綁定和處理所有數(shù)據(jù)；

其基本應(yīng)用模型如圖1所示：

從圖1中可看出，Ajax應(yīng)用方式相當(dāng)于在用戶和服務(wù)器之間加了一個中間層，通過Ajax 引擎，諸如數(shù)據(jù)驗證和數(shù)據(jù)處理等工作由Ajax 引擎完成，而從服務(wù)器讀取數(shù)據(jù)時由Ajax 引擎向服務(wù)器提出請求，使得用戶操作與服務(wù)器之間實現(xiàn)異步響應(yīng)。

1.2 Ajax結(jié)合STRUTS

STRUTS作為MVC 2的Web應(yīng)用框架，在Web應(yīng)用中得到了廣泛的應(yīng)用，由于一些老的Web應(yīng)用還是采用用戶直接將請求發(fā)送到服務(wù)器端，因此使得用戶請求響應(yīng)較慢。在原有Web應(yīng)用中加入Ajax技術(shù)，將其融入到STRUTS中，優(yōu)化Web應(yīng)用^［3，4］。方便之處在于：

(1) 不需要任何新的庫文件或服務(wù)器代碼，只需要使用現(xiàn)有的STRUTS庫文件和action。

(2) Ajax中包含的所有技術(shù)JavaScript，XML，Java和Struts為廣泛所知。

(3) 應(yīng)用可以一塊塊移植到Ajax，確定應(yīng)用需求，并將它們更新到動態(tài)Ajax顯示。

STRUTS中實現(xiàn)Ajax處理的流程如圖2所示：

基于上述流程在Web頁面引入Ajax的步驟如下：

（1） 在Web頁面加入ajax.js文件，其中包含發(fā)送和接收Ajax調(diào)用的JavaScript方法；

（2） 將需要更新的Web頁面設(shè)置在標(biāo)簽中，并分配id；

（3） 當(dāng)事件觸發(fā)時更新頁面，調(diào)用serverURL()方法，通過URL傳遞到需要執(zhí)行服務(wù)器端處理的Struts Action；

（4） Struts Action處理結(jié)束后轉(zhuǎn)發(fā)回同樣的頁面， 在服務(wù)器響應(yīng)到達(dá)時調(diào)用processEnded()方法，服務(wù)器響應(yīng)到達(dá)由XMLHTTP Request/Microsoft.XMLHTTP 對象調(diào)用。

2 實 現(xiàn)

以作者以前的STRUTS應(yīng)用為基礎(chǔ)，將Ajax應(yīng)用到其中某個頁面，介紹Ajax在STRUTS中實現(xiàn)的主要方法。

2.1 JavaScript中的方法

（1） serverURL()方法^［5-9］：該方法負(fù)責(zé)發(fā)送Ajax請求，主要實現(xiàn)如下：

function serverURL (url) {

//調(diào)用AJAX

if (window.XMLHttpRequest) {// 非IE瀏覽器

req = new XMLHttpRequest();

req.onreadystatechange = processEnded; //服務(wù)器狀態(tài)

改變時，指定響應(yīng)函數(shù)

…

req.open(\"GET\"，url，true);

req.send(1);//發(fā)送請求

} else if (window.ActiveXObject) {// IE瀏覽器

req = new ActiveXObject(\"Microsoft.XMLHTTP\");

… }

}

(2)processEnded()方法: 該方法在Ajax調(diào)用前設(shè)定，在服務(wù)器響應(yīng)到達(dá)后由XMLHTTP Request/Microsoft.XMLHTTP 對象調(diào)用。主要實現(xiàn)如下：

function processEnded () {

if (req.readyState == 4) { // 4表示完成

if (req.status == 200) {//“200”表示服務(wù)器響應(yīng)正常，

讀者具體可參見XMLHttpRequest 對象屬性。將響應(yīng)的文本分割成Span元素；

使用這些Span元素更新頁面；}}

}

2.2 服務(wù)器端的方法

服務(wù)器端STRUTS的實現(xiàn)與不采用Ajax時的方法一樣，按照STRUTS框架的規(guī)范編寫Action類即可，這里不再贅述。

2.3 實現(xiàn)結(jié)果

STRUTS框架與Ajax技術(shù)結(jié)合將原有Web應(yīng)用程序修改，其中一個頁面的Ajax實現(xiàn)如圖3所示，在輸入框中輸入數(shù)據(jù)表名，通過onchange()方法發(fā)出Ajax調(diào)用，不需要提交按鈕就可實現(xiàn)無刷新頁面的更新，使用戶感覺就像桌面應(yīng)用。

3 結(jié) 語

Ajax的出現(xiàn)，揭開了無刷新更新頁面時代的序幕，并有代替?zhèn)鹘y(tǒng)Web開發(fā)中采用form提交更新Web頁面的趨勢。因為Ajax是“按需取數(shù)據(jù)”，將以前一些服務(wù)器負(fù)擔(dān)的工作轉(zhuǎn)嫁到客戶端，利用客戶端閑置的處理能力來處理，所以它最大可能在減少了冗余請求和響應(yīng)對服務(wù)器造成的負(fù)擔(dān)。

STRUTS已經(jīng)減輕了與servlet API打交道的負(fù)擔(dān)，在STRUTS框架中使用Ajax使其在瀏覽器和服務(wù)器間異步通信。因此STRUTS使得在服務(wù)器端編寫處理Ajax請求的Action變得簡單，只需編寫一個新的Action類并把它與現(xiàn)有的對象和服務(wù)關(guān)聯(lián)到一起即可^［10］。

參考文獻(xiàn)

［1］佚名.如何使用Ajax技術(shù)開發(fā)Web應(yīng)用程序［EB/OL］.http://www.qqread.com/java/s782991600，2006.

［2］戚艷軍，馬光思.基于Struts框架實現(xiàn)Web應(yīng)用中的文件上傳［J］.西安建筑科技大學(xué)學(xué)報:自然科學(xué)版，2005（6）：270-273.

［3］James Turner，evin Bedell.Struts(中文版)［M］.孫勇，譯.北京:電子工業(yè)出版社，2004.

［4］Dave Crane，Eric Pascarello，Darren James.Ajax實踐［M］.ajaxcn.org，譯.北京:人民郵電出版社，2006.

［5］扎卡斯，姆克皮克，福西特.Ajax高級程序設(shè)計［M］.徐鋒，譯.北京:人民郵電出版社，2006.

［6］Paul Browne，Sprinkle Some AJAX Magic in Your Struts Web Application［EB/OL］ .http://www.searchfull.net/java/display/8281.htm.2005.

［7］徐麗麗，張永勝.Ajax技術(shù)及其應(yīng)用研究［J］.計算機(jī)時代，2007(3):58-60.

［8］鐘暉云，徐海水，廖志堅，等.基于Ajax的輕量級身份認(rèn)證.計算機(jī)應(yīng)用研究，2007，24(7):135-137.

［9］Asleson R，Schutta N T.Foundations of Ajax［M］.America: Apress，2005.

［10］Ajax，Struts，Spring的無縫結(jié)合［EB/OL］.http://www.javaresearch.org/article/59907.htm.2006.

作者簡介 戚艷軍 1974年出生，陜西西安人，講師。主要從事軟件復(fù)用技術(shù)的研究。