本文將介紹在JSP頁(yè)面中包含一些JavaScript這樣一個(gè)簡(jiǎn)單而有效的方法來(lái)結(jié)合AJAX和Struts。在此我們介紹如何重新使用已經(jīng)存在的Struts actions，但此技術(shù)同樣可用于你選擇的其他Java-Web 框架。本方法同樣可平移到Struts或者JSF的下一個(gè)版本。

        AJAX是“異步的JavaScript和XML”的縮寫。這是一項(xiàng)技術(shù)，而不是一個(gè)如Struts一樣的框架。為什么在AJAX周圍會(huì)有這么多的關(guān)注呢?這是因?yàn)锳JAX使web頁(yè)面看起來(lái)并不像一個(gè)平面的文檔，而更像用戶所期望的如桌面應(yīng)用的動(dòng)態(tài)GUI應(yīng)用程序。AJAX技術(shù)能在很多的瀏覽器上使用(包括IE和Netscape/Mozilla)。它已經(jīng)為Microsoft(用于Outlook的web客戶端)和Google(用戶Google Maps和Gmail)所使用。

　　未使用AJAX之前

　　目前大多數(shù)的Struts應(yīng)用都是標(biāo)準(zhǔn)的“如同一個(gè)平面文檔的web頁(yè)面”的結(jié)構(gòu)。如果你想模仿一些桌面應(yīng)用程序(比如那些使用Java Swing，Visual Basic，或者Delphi建立的應(yīng)用程序)，那么你有兩個(gè)選擇:你可以發(fā)送所有的可能作為頁(yè)面的一部分被請(qǐng)求的信息，使用大量的JavaScript來(lái)操作其動(dòng)態(tài)的顯示(一個(gè)很慢并且非企業(yè)級(jí)Java的方法);或者你可以不改變形式地提交到后臺(tái)服務(wù)器(一種有效的方法) 。AJAX提高給你了融合前面的最佳解決方案:動(dòng)態(tài)的頁(yè)面，但是大多數(shù)的應(yīng)用是在你的web服務(wù)器的Java程序來(lái)處理的。

　　AJAX 101

　　AJAX和現(xiàn)有的動(dòng)態(tài)HTML技術(shù)非常相似，并在其上增加了一個(gè)發(fā)送到“后臺(tái)”服務(wù)器的請(qǐng)求來(lái)獲取需要的新的或者更新的信息。AJAX的機(jī)制在其他地方已經(jīng)有詳細(xì)的說(shuō)明――請(qǐng)查看本文后的Resources來(lái)獲取更多。但是你至少需要知道:

  • 　　1. XMLHttpRequest (如果你使用的是IE瀏覽器的話，則是Microsoft.XMLHTTP的ActiveX的對(duì)象)。這些對(duì)象，你可以在web頁(yè)面中使用JavaScript調(diào)用。他們?cè)试S你作為后臺(tái)的調(diào)用方式來(lái)請(qǐng)求web服務(wù)器的內(nèi)容(例如，在表單提交后，屏幕并不像平時(shí)一樣顯示“空白”)。
  • 　　2. XMLHttpRequest 和Microsoft.XMLHTTP 返回的內(nèi)容可以作為XML或者文本來(lái)處理。JavaScript(在你頁(yè)面上的)可以使用請(qǐng)求的新內(nèi)容來(lái)更新頁(yè)面。
  • 　　3. 整個(gè)處理過(guò)程可以由普通的JavaScript事件來(lái)觸發(fā):onclick，onchange，onblur，等。

　　在你的Struts應(yīng)用中使用AJAX

　　你閱讀了本文，然后你會(huì)對(duì)使用AJAX來(lái)創(chuàng)建動(dòng)態(tài)的web頁(yè)面感興趣，并且想知道如何將它加入到你的Struts應(yīng)用中。這只是選擇之一。那么你會(huì)如何選擇呢?

  • 　　· 等待，知道Struts的下一個(gè)版本融合了AJAX技術(shù)。如果Struts開(kāi)發(fā)者準(zhǔn)備開(kāi)發(fā)一個(gè)新的應(yīng)用，這或許會(huì)是一個(gè)好的選擇。再后面，可能會(huì)是要求JSF也這樣做――對(duì)其本身并不一件壞事，但是對(duì)于已經(jīng)存在的系統(tǒng)這將會(huì)帶來(lái)最根本的改變。
  • 　　· 你也可以直接采用新的方法，比如Direct Web Remoting (DWR) 和Ruby on Rails，這些都是專為建立AJAX應(yīng)用的。如果你考慮不使用Struts來(lái)開(kāi)發(fā)web的話，那么這些都是很又用的框架，并且值得一試。但是，這也同時(shí)意味著你必須要重寫你的應(yīng)用。
  • 　　· 在你已經(jīng)存在的Struts應(yīng)用中增加AJAX。既然AJAX只是一項(xiàng)技術(shù)而并非框架，那么它就很容易融入到Struts中。作為現(xiàn)有的系統(tǒng)，其穩(wěn)定性(如，保持現(xiàn)有的庫(kù)文件)是相當(dāng)重要的。所以這個(gè)方法被推薦，并且我們將在后面詳細(xì)介紹。

　　我們選擇在Struts應(yīng)用中增加AJAX的優(yōu)勢(shì)是:

  • 　　1. 它并不需要任何新的庫(kù)文件或者服務(wù)器代碼;只需要使用現(xiàn)有的Struts庫(kù)文件和action。
  • 　　2. 解決方案中所有部分――JavaScript，XML，Java和Struts――早已為廣泛所知。
  • 　　3. 此應(yīng)用可以一塊一塊地移植到AJAX;我們可以確定哪些部分對(duì)用戶有益，并首先將它們更新到動(dòng)態(tài)AJAX顯示。

　　實(shí)現(xiàn)方案

　　我們?nèi)绾握嬲呢瀼匚覀兊倪x擇呢?我們首先應(yīng)該注意一個(gè)“標(biāo)準(zhǔn)的”(沒(méi)有AJAX)Struts應(yīng)用是如何工作的。在此應(yīng)用中，一個(gè)一般的事件流程如下:

  • 　　1. 使用點(diǎn)擊超鏈接或者表單的提交按鈕，用戶發(fā)送請(qǐng)求。
  • 　　2. web服務(wù)器運(yùn)行處理請(qǐng)求的Struts Action來(lái)生成一個(gè)web頁(yè)面。
  • 　　3. 瀏覽器顯示web頁(yè)面。
  • 　　4. 當(dāng)用戶點(diǎn)擊保存的時(shí)候，信息由Struts框架中一個(gè)ActionForm類來(lái)轉(zhuǎn)換并發(fā)送到服務(wù)器。
  • 　　5. 然后，Struts框架調(diào)用Struts Action來(lái)出來(lái)請(qǐng)求(如，保存數(shù)據(jù)到數(shù)據(jù)庫(kù)中)。
  • 　　6. 頁(yè)面再一次回傳，處理流程繼續(xù)。

　　現(xiàn)有的Struts應(yīng)用

　　一個(gè)演示事件流程的簡(jiǎn)單Struts應(yīng)用可以在以下地址下載: struts-non-ajax.zip。此基于Struts的應(yīng)用，是基于用戶的輸入顯示或者隱藏藍(lán)色和綠色的表格。圖1顯示了載入初始頁(yè)面的畫面。圖2顯示了用戶輸入值并點(diǎn)擊了提交后的畫面。雖然簡(jiǎn)單，但它已經(jīng)足以表示一個(gè)Struts的工作流程。

　　圖 1. 沒(méi)有AJAX的例子:初始屏幕

　　圖 2. 沒(méi)有AJAX的例子:輸入值并點(diǎn)擊了提交

服務(wù)器端的代碼是:一個(gè)Struts Action使用struts-config.xml 中定義的值轉(zhuǎn)發(fā)到(相同的)JSP。這個(gè)例子代碼中一些需要注意的地方是:
  • 　　·struts-config.xml文件將所有的請(qǐng)求重定向到http://localhost:8080/struts-non-ajax/(或者和你自己的服務(wù)器相同)的index.jsp。
  • 　　· index.jsp 包含了一個(gè)兩個(gè)文本框的Struts form(showBlue和showGreen)。該頁(yè)面同樣包含了標(biāo)簽，但是如同兩個(gè)文本框被初始化為空，標(biāo)簽之間的內(nèi)容并不顯示。
  • 　　· 用戶輸入值(true或者false)并點(diǎn)擊提交按鈕，處理控制(經(jīng)過(guò)Struts框架，讀取struts-config.xml)提交到SampleAction類中。
  • 　　·SampleAction記錄下值，然后轉(zhuǎn)發(fā)到index.jsp。一個(gè)成熟的Struts應(yīng)用可能會(huì)處理更多的事情，不如保存或者查詢數(shù)據(jù)庫(kù)等。
  • 　　· index.jsp 現(xiàn)在重新處理請(qǐng)求;如果ShowBlue或者ShowGreen的值是true，這些表格就顯示出來(lái)。

　　該應(yīng)用并沒(méi)有任何“錯(cuò)誤”。類似的Struts項(xiàng)目好多年都是這樣做的。但是，我們?nèi)绾卧诓惶砑訌?fù)雜的JavaScript或者頻繁的表單提交的前提下，為此應(yīng)用增加動(dòng)態(tài)的元素呢?

　　我們的第一個(gè)Struts AJAX應(yīng)用

　　觀察下下面的圖3和圖4。第一眼看上去，它們和前面的例子沒(méi)有說(shuō)明區(qū)別。它們的不同之處在于，頁(yè)面載入后(圖3)然后文本框中的值改變了，窗體自動(dòng)提交而不顯示空白的，然后在圖4中顯示結(jié)果。普通的提交按鈕仍然在，你也可以選擇使用它。

　　圖 3. 頁(yè)面載入后的AJAX例子

　　圖 4. AJAX調(diào)用后的AJAX例子

　　添加AJAX是出奇的容易。服務(wù)器端的代碼和前面的例子是一樣的: 一個(gè)Struts的ActionForm來(lái)后去數(shù)據(jù)，一個(gè)Struts的Action來(lái)執(zhí)行需要的任務(wù)(例如，存儲(chǔ)數(shù)據(jù)庫(kù))然后轉(zhuǎn)發(fā)到適當(dāng)?shù)腏SP頁(yè)面來(lái)顯示結(jié)果。

　　繼續(xù)

　　如果你希望就此停止閱讀(跳過(guò)這個(gè)例子的工作說(shuō)明)，但是這里的是和你需要轉(zhuǎn)換你的Struts應(yīng)用到一個(gè)Struts-AJAX應(yīng)用同樣的風(fēng)格:

  • 　　1. 在你的web頁(yè)面中引入一個(gè)Ajax.js (該文件是struts-ajax.zip 例文件中的一部分)。Ajax.js 包含了所有需要發(fā)送和接收AJAX調(diào)用的JavaScript方法。
  • 　　2. 確保你希望在AJAX調(diào)用中更新的web頁(yè)面的部分包含在標(biāo)簽中，并且給每個(gè)標(biāo)簽一個(gè)id。
  • 　　3. 當(dāng)一些事件觸發(fā)的時(shí)候就更新頁(yè)面(例如，文本框的the onchange()方法)，調(diào)用retrieveURL()方法，通過(guò)URL傳遞到需要執(zhí)行服務(wù)器端處理的Struts Action。
  • 　　4. 為了頁(yè)面的顯示/更新，最簡(jiǎn)單的方法是Struts Action轉(zhuǎn)發(fā)回同樣的頁(yè)面。在本例中，showGreen/showBlue 文本框中的onchange()方法來(lái)觸發(fā)AJAX調(diào)用。

　　JavaScript方法retrieveURL()調(diào)用服務(wù)器的Struts(通過(guò)URL)，獲取JSP響應(yīng)，然后更新顯示頁(yè)面中的 標(biāo)簽中的部分。就是這么簡(jiǎn)單!

　　AJAX解決方案的細(xì)節(jié)

　　我們將例子變?yōu)锳JAX-Struts應(yīng)用的時(shí)候，需要三個(gè)變化:

  • 　　1. 增加一個(gè)JavaScript方法來(lái)完成到服務(wù)器的“背后的”AJAX調(diào)用。
  • 　　2. 增加JavaScript代碼來(lái)接收服務(wù)器的響應(yīng)并更新頁(yè)面。
  • 　　3. 在JSP頁(yè)面增加標(biāo)簽標(biāo)簽，這個(gè)標(biāo)簽中內(nèi)容將在AJAX調(diào)用中更新。

　　我們將詳細(xì)的說(shuō)明上面的每一步。

發(fā)送AJAX請(qǐng)求到服務(wù)器

　　有兩個(gè)方法(在下面列出)用于發(fā)送請(qǐng)求到服務(wù)器。

　　· retrieveURL()方法獲得服務(wù)器的URL和Struts form。URL用于使用AJAX，form的值用于傳遞到服務(wù)器。

　　· getFormAsString()方法用于將retrieveURL()中form命名的值組裝成查詢字符串，并發(fā)送到服務(wù)器。

　　使用方法很簡(jiǎn)單，使用onclick()/onChange()事件來(lái)觸發(fā)retrieveURL()更新顯示。

　　在這兩個(gè)方法中有一些有趣的東西。

　　在retrieveURL()方法中，req.onreadystatechange = processStateChange (注意，沒(méi)有括號(hào))這一行來(lái)告訴瀏覽器在服務(wù)器響應(yīng)到達(dá)的時(shí)候調(diào)用processStateChange()方法(該方法將在后面介紹)。retrieveURL()方法中(現(xiàn)在已經(jīng)是AJAX的標(biāo)準(zhǔn)了)同樣決定是使用IE瀏覽器(ActiveX)還是使用Netscape/Mozilla (XmlHttpRequest) 來(lái)實(shí)現(xiàn)跨瀏覽器兼容。

　　getFormAsString()方法將HTML form轉(zhuǎn)換成字符串連接在URL后面(這樣就允許我們發(fā)送HTTP GET請(qǐng)求)。這個(gè)字符串是經(jīng)過(guò)轉(zhuǎn)換的(比如，空格轉(zhuǎn)換成%20等)，并且是一個(gè)Struts能將其組裝成ActionForm的格式(并不需要Struts清楚的明白這個(gè)是來(lái)之AJAX的請(qǐng)求)。注意，在本例中我們使用HTTP GET，使用HTTP POST的方法也是類似的。

function retrieveURL(url,nameOfFormToPost) {

//將url轉(zhuǎn)換成字符串
url=url+getFormAsString(nameOfFormToPost);

//調(diào)用AJAX
if (window.XMLHttpRequest) {

// 非IE瀏覽器
req = new XMLHttpRequest();
req.onreadystatechange = processStateChange;
try {
req.open("GET", url, true);
} catch (e) {
alert("Server Communication Problem\n"+e);
}
req.send(null);
} else if (window.ActiveXObject) {
// IE

req = new ActiveXObject("Microsoft.XMLHTTP");
if (req) {
req.onreadystatechange=processStateChange;
req.open("GET", url, true);
req.send();
}
}
}

getFormAsString() 是一個(gè)“私有” 方法，在retrieveURL()中使用。

function getFormAsString(formName){

//設(shè)置返回字符串
returnString ="";

//取得表單的值
formElements=document.forms[formName].elements;

//循環(huán)數(shù)組，組裝url
//像'/strutsaction.do&name=value'這樣的格式

for(var i=formElements.length-1;i>=0; --i ){
//轉(zhuǎn)化每一個(gè)值
returnString+="&"
+escape(formElements[i].name)+"="
+escape(formElements[i].value);
}

//返回字符串
return returnString;
}

根據(jù)AJAX的響應(yīng)更新web頁(yè)面

　　到現(xiàn)在為止，我們學(xué)習(xí)過(guò)了使用JavaScript來(lái)完成AJAX調(diào)用(前面列出)，Struts Action，ActionForm以及JSP(基本沒(méi)有變化，只是增加了標(biāo)簽)。為了完善我們對(duì)Struts-AJAX項(xiàng)目的了解，我們需要了解三個(gè)用于根據(jù)服務(wù)器返回的結(jié)果而更新頁(yè)面的JavaScript方法。

  • 　　· processStateChange(): 該方法在AJAX調(diào)用前設(shè)定。它在服務(wù)器響應(yīng)到達(dá)后由XMLHttpRequest/Microsoft.XMLHTTP 對(duì)象調(diào)用。
  • 　　·splitTextIntoSpan(): 根據(jù)響應(yīng)，循環(huán)取出數(shù)組中的元素組裝成NewContent。
  • 　　·replaceExistingWithNewHtml(): 根據(jù)span元素?cái)?shù)組，循環(huán)搜索，將里面的元素調(diào)換掉頁(yè)面中和它的'someName'相同的中的內(nèi)容。注意，我們使用的是req.responseText 方法來(lái)獲得返回的內(nèi)容(它允許我們操作任何文本的響應(yīng))。與此相對(duì)于的是req.responseXml (它的作用更大，但是要求服務(wù)器返回是XHTML或者XML)。

function processStateChange() {

if (req.readyState == 4) { // 完成
if (req.status == 200) { // 響應(yīng)正常

//將響應(yīng)的文本分割成Span元素
spanElements =
splitTextIntoSpan(req.responseText);

//使用這些Span元素更新頁(yè)面
replaceExistingWithNewHtml(spanElements);

} else {
alert("Problem with server response:\n "
+ req.statusText);
}
}
}
replaceExistingWithNewHtml() 是為processStateChange()使用的“私有”方法。

function replaceExistingWithNewHtml
(newTextElements){

//循環(huán)newTextElements
for(var i=newTextElements.length-1;i>=0;--i){

//判斷是否以 if(newTextElements[i].
indexOf("-1){

//獲得span的名字- 設(shè)置在第一和第二個(gè)引號(hào)之間
//確認(rèn)span元素是以下的格式
//NewContent
startNamePos=newTextElements[i].
indexOf('"')+1;
endNamePos=newTextElements[i].
indexOf('"',startNamePos);
name=newTextElements[i].
substring(startNamePos,endNamePos);

//獲得內(nèi)容－在第一個(gè)>標(biāo)記后的所有內(nèi)容
startContentPos=newTextElements[i].
indexOf('>')+1;
content=newTextElements[i].
substring(startContentPos);

//現(xiàn)在更新現(xiàn)有的Document中的元素，
// 確保文檔存在該元素
if(document.getElementById(name)){
document.getElementById(name).
innerHTML = content;
}
}
}
splitTextIntoSpan() 是為processStateChange() 使用的“私有”方法。
function splitTextIntoSpan(textToSplit){

//分割文檔
returnElements=textToSplit.
split("")

//處理每個(gè)元素
for(var i=returnElements.length-1;i>=0;--i){

//刪除掉第一個(gè)span后面的元素
spanPos = returnElements[i].
indexOf("

//如果找到匹配的，獲得span前的內(nèi)容
if(spanPos>0){
subString=returnElements[i].
substring(spanPos);
returnElements[i]=subString;
}
}
return returnElements;
}

　　新的控制流

　　添加以下的JavaScript代碼到我們的應(yīng)用中，以下的步驟將在服務(wù)器和瀏覽器中執(zhí)行。

  • 　　1. 如同一個(gè)普通Struts應(yīng)用裝載頁(yè)面。
  • 　　2. 用戶改變文本框的值，觸發(fā)一個(gè)onChange() 事件，調(diào)用retrieveURL() 方法。
  • 　　3. 該JavaScript方法通過(guò)發(fā)送Struts明白的表單變量(后臺(tái))請(qǐng)求到服務(wù)器的Struts Action。
  • 　　4. 該JavaScript方法同樣設(shè)定了第二個(gè)JavaScript方法的名字，此方法將到服務(wù)器響應(yīng)完畢后調(diào)用。本例子中，設(shè)定為processStateChange() 方法。
  • 　　5. 如我們所預(yù)期的，服務(wù)器響應(yīng)完畢，調(diào)用processStateChange() 方法。
  • 　　6. JavaScript在(新的)服務(wù)器響應(yīng)中循環(huán)取出所有元素。將頁(yè)面上存在與獲得元素名字相同的 中的元素替換掉。

　　在你的應(yīng)用中設(shè)計(jì)AJAX

　　以上描述的JavaScript方法能在大多數(shù)的應(yīng)用中使用，包括比我們的例子復(fù)雜得多的。但是，在使用之前，你需要注意以下幾點(diǎn):

　　· 避免復(fù)制代碼，最好在初始化請(qǐng)求(如，顯示完整的頁(yè)面)和AJAX(更新部分頁(yè)面)請(qǐng)求中使用相同的Struts Action和JSP。

　　·在公共的Action(控制器)中，決定JSP頁(yè)面(所有的JSP頁(yè)面或者其中的一部分)中的一個(gè)區(qū)域需要傳送到瀏覽器。通過(guò)在web服務(wù)器的session或者ActionForm中設(shè)定標(biāo)記來(lái)讓JSP頁(yè)面知道哪些部分需要提交。

　　· 在JSP中，使用Struts 或者JSTL標(biāo)簽來(lái)決定提交的HTML區(qū)域。

　　使用AJAX的本例子，可以在以下下載: struts-Ajax.zip

　　結(jié)語(yǔ)

　　AJAX技術(shù)允許我們?cè)趧?chuàng)建和使用web應(yīng)用的時(shí)候完全的改變。本文介紹了一個(gè)簡(jiǎn)單的技術(shù)，在現(xiàn)有的Struts應(yīng)用中增加Struts的處理。它允許我們利用我們已有的東西，不僅僅是代碼，還包括了開(kāi)發(fā)的技能。作為一個(gè)好的產(chǎn)品，它同樣允許我們寫出更清晰，更具移植性的Java Struts應(yīng)用。

版權(quán)聲明：Techtarget獲Matrix授權(quán)發(fā)布,如需轉(zhuǎn)載請(qǐng)聯(lián)系Matrix
作者:作者:Paul Browne;pawenwen(作者的blog:http://blog.matrix.org.cn/page/pawenwen)
譯文:點(diǎn)擊