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