本文將介紹在JSP頁面中包含一些JavaScript這樣一個簡單而有效的方法來結(jié)合AJAX和Struts。在此我們介紹如何重新使用已經(jīng)存在的Struts actions，但此技術(shù)同樣可用于你選擇的其他Java-Web 框架。本方法同樣可平移到Struts或者JSF的下一個版本。
AJAX是“異步的JavaScript和XML”的縮寫。這是一項技術(shù)，而不是一個如Struts一樣的框架。為什么在AJAX周圍會有這么多的關(guān)注呢?這是因為AJAX使web頁面看起來并不像一個平面的文檔，而更像用戶所期望的如桌面應(yī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)用都是標準的“如同一個平面文檔的web頁面”的結(jié)構(gòu)。如果你想模仿一些桌面應(yīng)用程序(比如那些使用Java Swing，Visual Basic，或者Delphi建立的應(yīng)用程序)，那么你有兩個選擇:你可以發(fā)送所有的可能作為頁面的一部分被請求的信息，使用大量的JavaScript來操作其動態(tài)的顯示(一個很慢并且非企業(yè)級Java的方法);或者你可以不改變形式地提交到后臺服務(wù)器(一種有效的方法) 。AJAX提高給你了融合前面的最佳解決方案:動態(tài)的頁面，但是大多數(shù)的應(yīng)用是在你的web服務(wù)器的Java程序來處理的。
AJAX 101
AJAX和現(xiàn)有的動態(tài)HTML技術(shù)非常相似，并在其上增加了一個發(fā)送到“后臺”服務(wù)器的請求來獲取需要的新的或者更新的信息。AJAX的機制在其他地方已經(jīng)有詳細的說明――請查看本文后的Resources來獲取更多。但是你至少需要知道:
- 1. XMLHttpRequest (如果你使用的是IE瀏覽器的話，則是Microsoft.XMLHTTP的ActiveX的對象)。這些對象，你可以在web頁面中使用JavaScript調(diào)用。他們允許你作為后臺的調(diào)用方式來請求web服務(wù)器的內(nèi)容(例如，在表單提交后，屏幕并不像平時一樣顯示“空白”)。
- 2. XMLHttpRequest 和Microsoft.XMLHTTP 返回的內(nèi)容可以作為XML或者文本來處理。JavaScript(在你頁面上的)可以使用請求的新內(nèi)容來更新頁面。
- 3. 整個處理過程可以由普通的JavaScript事件來觸發(fā):onclick，onchange，onblur，等。
在你的Struts應(yīng)用中使用AJAX
你閱讀了本文，然后你會對使用AJAX來創(chuàng)建動態(tài)的web頁面感興趣，并且想知道如何將它加入到你的Struts應(yīng)用中。這只是選擇之一。那么你會如何選擇呢?
- · 等待，知道Struts的下一個版本融合了AJAX技術(shù)。如果Struts開發(fā)者準備開發(fā)一個新的應(yīng)用，這或許會是一個好的選擇。再后面，可能會是要求JSF也這樣做――對其本身并不一件壞事，但是對于已經(jīng)存在的系統(tǒng)這將會帶來最根本的改變。
- · 你也可以直接采用新的方法，比如Direct Web Remoting (DWR) 和Ruby on Rails，這些都是專為建立AJAX應(yīng)用的。如果你考慮不使用Struts來開發(fā)web的話，那么這些都是很又用的框架，并且值得一試。但是，這也同時意味著你必須要重寫你的應(yīng)用。
- · 在你已經(jīng)存在的Struts應(yīng)用中增加AJAX。既然AJAX只是一項技術(shù)而并非框架，那么它就很容易融入到Struts中。作為現(xiàn)有的系統(tǒng)，其穩(wěn)定性(如，保持現(xiàn)有的庫文件)是相當重要的。所以這個方法被推薦，并且我們將在后面詳細介紹。
我們選擇在Struts應(yīng)用中增加AJAX的優(yōu)勢是:
- 1. 它并不需要任何新的庫文件或者服務(wù)器代碼;只需要使用現(xiàn)有的Struts庫文件和action。
- 2. 解決方案中所有部分――JavaScript，XML，Java和Struts――早已為廣泛所知。
- 3. 此應(yīng)用可以一塊一塊地移植到AJAX;我們可以確定哪些部分對用戶有益，并首先將它們更新到動態(tài)AJAX顯示。
實現(xiàn)方案
我們?nèi)绾握嬲呢瀼匚覀兊倪x擇呢?我們首先應(yīng)該注意一個“標準的”(沒有AJAX)Struts應(yīng)用是如何工作的。在此應(yīng)用中，一個一般的事件流程如下:
- 1. 使用點擊超鏈接或者表單的提交按鈕，用戶發(fā)送請求。
- 2. web服務(wù)器運行處理請求的Struts Action來生成一個web頁面。
- 3. 瀏覽器顯示web頁面。
- 4. 當用戶點擊保存的時候，信息由Struts框架中一個ActionForm類來轉(zhuǎn)換并發(fā)送到服務(wù)器。
- 5. 然后，Struts框架調(diào)用Struts Action來出來請求(如，保存數(shù)據(jù)到數(shù)據(jù)庫中)。
- 6. 頁面再一次回傳，處理流程繼續(xù)。
現(xiàn)有的Struts應(yīng)用
一個演示事件流程的簡單Struts應(yīng)用可以在以下地址下載: struts-non-ajax.zip。此基于Struts的應(yīng)用，是基于用戶的輸入顯示或者隱藏藍色和綠色的表格。圖1顯示了載入初始頁面的畫面。圖2顯示了用戶輸入值并點擊了提交后的畫面。雖然簡單，但它已經(jīng)足以表示一個Struts的工作流程。
圖 1. 沒有AJAX的例子:初始屏幕
圖 2. 沒有AJAX的例子:輸入值并點擊了提交
服務(wù)器端的代碼是:一個Struts Action使用struts-config.xml 中定義的值轉(zhuǎn)發(fā)到(相同的)JSP。這個例子代碼中一些需要注意的地方是:
- ·struts-config.xml文件將所有的請求重定向到http://localhost:8080/struts-non-ajax/(或者和你自己的服務(wù)器相同)的index.jsp。
- · index.jsp 包含了一個兩個文本框的Struts form(showBlue和showGreen)。該頁面同樣包含了標簽，但是如同兩個文本框被初始化為空，標簽之間的內(nèi)容并不顯示。
- · 用戶輸入值(true或者false)并點擊提交按鈕，處理控制(經(jīng)過Struts框架，讀取struts-config.xml)提交到SampleAction類中。
- ·SampleAction記錄下值，然后轉(zhuǎn)發(fā)到index.jsp。一個成熟的Struts應(yīng)用可能會處理更多的事情，不如保存或者查詢數(shù)據(jù)庫等。
- · index.jsp 現(xiàn)在重新處理請求;如果ShowBlue或者ShowGreen的值是true，這些表格就顯示出來。
該應(yīng)用并沒有任何“錯誤”。類似的Struts項目好多年都是這樣做的。但是，我們?nèi)绾卧诓惶砑訌?fù)雜的JavaScript或者頻繁的表單提交的前提下，為此應(yīng)用增加動態(tài)的元素呢?
我們的第一個Struts AJAX應(yīng)用
觀察下下面的圖3和圖4。第一眼看上去，它們和前面的例子沒有說明區(qū)別。它們的不同之處在于，頁面載入后(圖3)然后文本框中的值改變了，窗體自動提交而不顯示空白的，然后在圖4中顯示結(jié)果。普通的提交按鈕仍然在，你也可以選擇使用它。
圖 3. 頁面載入后的AJAX例子
圖 4. AJAX調(diào)用后的AJAX例子
添加AJAX是出奇的容易。服務(wù)器端的代碼和前面的例子是一樣的: 一個Struts的ActionForm來后去數(shù)據(jù)，一個Struts的Action來執(zhí)行需要的任務(wù)(例如，存儲數(shù)據(jù)庫)然后轉(zhuǎn)發(fā)到適當?shù)腏SP頁面來顯示結(jié)果。
繼續(xù)
如果你希望就此停止閱讀(跳過這個例子的工作說明)，但是這里的是和你需要轉(zhuǎn)換你的Struts應(yīng)用到一個Struts-AJAX應(yīng)用同樣的風格:
- 1. 在你的web頁面中引入一個Ajax.js (該文件是struts-ajax.zip 例文件中的一部分)。Ajax.js 包含了所有需要發(fā)送和接收AJAX調(diào)用的JavaScript方法。
- 2. 確保你希望在AJAX調(diào)用中更新的web頁面的部分包含在標簽中，并且給每個標簽一個id。
- 3. 當一些事件觸發(fā)的時候就更新頁面(例如，文本框的the onchange()方法)，調(diào)用retrieveURL()方法，通過URL傳遞到需要執(zhí)行服務(wù)器端處理的Struts Action。
- 4. 為了頁面的顯示/更新，最簡單的方法是Struts Action轉(zhuǎn)發(fā)回同樣的頁面。在本例中，showGreen/showBlue 文本框中的onchange()方法來觸發(fā)AJAX調(diào)用。
JavaScript方法retrieveURL()調(diào)用服務(wù)器的Struts(通過URL)，獲取JSP響應(yīng)，然后更新顯示頁面中的 標簽中的部分。就是這么簡單!
AJAX解決方案的細節(jié)
我們將例子變?yōu)锳JAX-Struts應(yīng)用的時候，需要三個變化:
- 1. 增加一個JavaScript方法來完成到服務(wù)器的“背后的”AJAX調(diào)用。
- 2. 增加JavaScript代碼來接收服務(wù)器的響應(yīng)并更新頁面。
- 3. 在JSP頁面增加標簽標簽，這個標簽中內(nèi)容將在AJAX調(diào)用中更新。
我們將詳細的說明上面的每一步。
發(fā)送AJAX請求到服務(wù)器
有兩個方法(在下面列出)用于發(fā)送請求到服務(wù)器。
· retrieveURL()方法獲得服務(wù)器的URL和Struts form。URL用于使用AJAX，form的值用于傳遞到服務(wù)器。
· getFormAsString()方法用于將retrieveURL()中form命名的值組裝成查詢字符串，并發(fā)送到服務(wù)器。
使用方法很簡單，使用onclick()/onChange()事件來觸發(fā)retrieveURL()更新顯示。
在這兩個方法中有一些有趣的東西。
在retrieveURL()方法中，req.onreadystatechange = processStateChange (注意，沒有括號)這一行來告訴瀏覽器在服務(wù)器響應(yīng)到達的時候調(diào)用processStateChange()方法(該方法將在后面介紹)。retrieveURL()方法中(現(xiàn)在已經(jīng)是AJAX的標準了)同樣決定是使用IE瀏覽器(ActiveX)還是使用Netscape/Mozilla (XmlHttpRequest) 來實現(xiàn)跨瀏覽器兼容。
getFormAsString()方法將HTML form轉(zhuǎn)換成字符串連接在URL后面(這樣就允許我們發(fā)送HTTP GET請求)。這個字符串是經(jīng)過轉(zhuǎn)換的(比如，空格轉(zhuǎn)換成%20等)，并且是一個Struts能將其組裝成ActionForm的格式(并不需要Struts清楚的明白這個是來之AJAX的請求)。注意，在本例中我們使用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() 是一個“私有” 方法，在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)化每一個值
returnString+="&"
+escape(formElements[i].name)+"="
+escape(formElements[i].value);
}
//返回字符串
return returnString;
}
根據(jù)AJAX的響應(yīng)更新web頁面
到現(xiàn)在為止，我們學習過了使用JavaScript來完成AJAX調(diào)用(前面列出)，Struts Action，ActionForm以及JSP(基本沒有變化，只是增加了標簽)。為了完善我們對Struts-AJAX項目的了解，我們需要了解三個用于根據(jù)服務(wù)器返回的結(jié)果而更新頁面的JavaScript方法。
- · processStateChange(): 該方法在AJAX調(diào)用前設(shè)定。它在服務(wù)器響應(yīng)到達后由XMLHttpRequest/Microsoft.XMLHTTP 對象調(diào)用。
- ·splitTextIntoSpan(): 根據(jù)響應(yīng)，循環(huán)取出數(shù)組中的元素組裝成NewContent。
- ·replaceExistingWithNewHtml(): 根據(jù)span元素數(shù)組，循環(huán)搜索，將里面的元素調(diào)換掉頁面中和它的'someName'相同的中的內(nèi)容。注意，我們使用的是req.responseText 方法來獲得返回的內(nèi)容(它允許我們操作任何文本的響應(yīng))。與此相對于的是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元素更新頁面
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è)置在第一和第二個引號之間
//確認span元素是以下的格式
//NewContent
startNamePos=newTextElements[i].
indexOf('"')+1;
endNamePos=newTextElements[i].
indexOf('"',startNamePos);
name=newTextElements[i].
substring(startNamePos,endNamePos);
//獲得內(nèi)容－在第一個>標記后的所有內(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("")
//處理每個元素
for(var i=returnElements.length-1;i>=0;--i){
//刪除掉第一個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. 如同一個普通Struts應(yīng)用裝載頁面。
- 2. 用戶改變文本框的值，觸發(fā)一個onChange() 事件，調(diào)用retrieveURL() 方法。
- 3. 該JavaScript方法通過發(fā)送Struts明白的表單變量(后臺)請求到服務(wù)器的Struts Action。
- 4. 該JavaScript方法同樣設(shè)定了第二個JavaScript方法的名字，此方法將到服務(wù)器響應(yīng)完畢后調(diào)用。本例子中，設(shè)定為processStateChange() 方法。
- 5. 如我們所預(yù)期的，服務(wù)器響應(yīng)完畢，調(diào)用processStateChange() 方法。
- 6. JavaScript在(新的)服務(wù)器響應(yīng)中循環(huán)取出所有元素。將頁面上存在與獲得元素名字相同的 中的元素替換掉。
在你的應(yīng)用中設(shè)計AJAX
以上描述的JavaScript方法能在大多數(shù)的應(yīng)用中使用，包括比我們的例子復(fù)雜得多的。但是，在使用之前，你需要注意以下幾點:
· 避免復(fù)制代碼，最好在初始化請求(如，顯示完整的頁面)和AJAX(更新部分頁面)請求中使用相同的Struts Action和JSP。
·在公共的Action(控制器)中，決定JSP頁面(所有的JSP頁面或者其中的一部分)中的一個區(qū)域需要傳送到瀏覽器。通過在web服務(wù)器的session或者ActionForm中設(shè)定標記來讓JSP頁面知道哪些部分需要提交。
· 在JSP中，使用Struts 或者JSTL標簽來決定提交的HTML區(qū)域。
使用AJAX的本例子，可以在以下下載: struts-Ajax.zip
結(jié)語
AJAX技術(shù)允許我們在創(chuàng)建和使用web應(yīng)用的時候完全的改變。本文介紹了一個簡單的技術(shù)，在現(xiàn)有的Struts應(yīng)用中增加Struts的處理。它允許我們利用我們已有的東西，不僅僅是代碼，還包括了開發(fā)的技能。作為一個好的產(chǎn)品，它同樣允許我們寫出更清晰，更具移植性的Java Struts應(yīng)用。
版權(quán)聲明：Techtarget獲Matrix授權(quán)發(fā)布,如需轉(zhuǎn)載請聯(lián)系Matrix
作者:作者:Paul Browne;pawenwen(作者的blog:http://blog.matrix.org.cn/page/pawenwen)
譯文:點擊