Ａｊａｘ與ＳＴＲＵＴＳ結合構建Ｗｅｂ應用研究

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

關鍵詞：Ajax;STRUTS;XML HTTP Request；異步通信

中圖分類號：TP311文獻標識碼：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

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

1 Ajax技術

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

1.1 原理

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

(1) 使用XHTML和CSS標準化呈現；

(2) 使用DOM實現動態顯示和交互；

(3) 使用XML和XSLT進行數據交換與處理；

(4) 使用XMLHTTP Request進行異步數據讀取；

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

其基本應用模型如圖1所示：

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

1.2 Ajax結合STRUTS

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

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

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

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

STRUTS中實現Ajax處理的流程如圖2所示：

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

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

（2） 將需要更新的Web頁面設置在標簽中，并分配id；

（3） 當事件觸發時更新頁面，調用serverURL()方法，通過URL傳遞到需要執行服務器端處理的Struts Action；

（4） Struts Action處理結束后轉發回同樣的頁面， 在服務器響應到達時調用processEnded()方法，服務器響應到達由XMLHTTP Request/Microsoft.XMLHTTP 對象調用。

2 實 現

以作者以前的STRUTS應用為基礎，將Ajax應用到其中某個頁面，介紹Ajax在STRUTS中實現的主要方法。

2.1 JavaScript中的方法

（1） serverURL()方法^［5-9］：該方法負責發送Ajax請求，主要實現如下：

function serverURL (url) {

//調用AJAX

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

req = new XMLHttpRequest();

req.onreadystatechange = processEnded; //服務器狀態

改變時，指定響應函數

…

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

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

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

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

… }

}

(2)processEnded()方法: 該方法在Ajax調用前設定，在服務器響應到達后由XMLHTTP Request/Microsoft.XMLHTTP 對象調用。主要實現如下：

function processEnded () {

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

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

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

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

}

2.2 服務器端的方法

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

2.3 實現結果

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

3 結 語

Ajax的出現，揭開了無刷新更新頁面時代的序幕，并有代替傳統Web開發中采用form提交更新Web頁面的趨勢。因為Ajax是“按需取數據”，將以前一些服務器負擔的工作轉嫁到客戶端，利用客戶端閑置的處理能力來處理，所以它最大可能在減少了冗余請求和響應對服務器造成的負擔。

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

參考文獻

［1］佚名.如何使用Ajax技術開發Web應用程序［EB/OL］.http://www.qqread.com/java/s782991600，2006.

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

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

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

［5］扎卡斯，姆克皮克，福西特.Ajax高級程序設計［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技術及其應用研究［J］.計算機時代，2007(3):58-60.

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

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

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

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