服務(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)。該頁面同樣包含了標(biāo)簽，但是如同兩個文本框被初始化為空，標(biāo)簽之間的內(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ā)到適當(dāng)?shù)腏SP頁面來顯示結(jié)果。

　　繼續(xù)

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

• 　　1. 在你的web頁面中引入一個Ajax.js (該文件是struts-ajax.zip 例文件中的一部分)。Ajax.js 包含了所有需要發(fā)送和接收AJAX調(diào)用的JavaScript方法。
• 　　2. 確保你希望在AJAX調(diào)用中更新的web頁面的部分包含在標(biāo)簽中，并且給每個標(biāo)簽一個id。
• 　　3. 當(dāng)一些事件觸發(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)，然后更新顯示頁面中的 標(biāo)簽中的部分。就是這么簡單!

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

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

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

　　有兩個方法(在下面列出)用于發(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的標(biāo)準(zhǔn)了)同樣決定是使用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);
}