在Struts應用中使用Ajax

 

到現在為止，我們學習過了使用JavaScript來完成AJAX調用(前面列出)，Struts Action，ActionForm以及JSP(基本沒有變化，只是增加了標籤)。為了完善我們對Struts-AJAX項目的瞭解，我們需要瞭解三個用於根據伺服器返回的結果而更新頁面的JavaScript方法。

• • processStateChange()： 該方法在AJAX調用前設定。它在伺服器響應到達後由XMLHttpRequest/Microsoft.XMLHTTP 對象調用。
• •splitTextIntoSpan(): 根據響應，迴圈取出數組中的元素組裝成NewContent。
• •replaceExistingWithNewHtml()： 根據span元素數組，迴圈搜尋，將裡面的元素調換掉頁面中和它的'someName'相同的中的內容。注意，我們使用的是req.responseText 方法來獲得返回的內容(它允許我們操作任何文本的響應)。與此相對於的是req.responseXml (它的作用更大，但是要求伺服器返回是XHTML或者XML)。

function processStateChange() { if (req.readyState == 4) { // 完成 if (req.status == 200) { // 響應正常 //將響應的文本分割成Span元素 spanElements = splitTextIntoSpan(req.responseText); //使用這些Span元素更新頁面 replaceExistingWithNewHtml(spanElements); } else { alert("Problem with server response:/n " + req.statusText); } } } replaceExistingWithNewHtml()是為processStateChange()使用的“私人”方法。 function replaceExistingWithNewHtml (newTextElements){ //迴圈newTextElements for(var i=newTextElements.length-1;i>=0;--i){ //判斷是否以 if(newTextElements[i]. indexOf("-1){ //獲得span的名字- 設定在第一和第二個引號之間 //確認span元素是以下的格式 //NewContent startNamePos=newTextElements[i]. indexOf('"')+1; endNamePos=newTextElements[i]. indexOf('"',startNamePos); name=newTextElements[i]. substring(startNamePos,endNamePos); //獲得內容－在第一個>標記後的所有內容 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("") //處理每個元素 for(var i=returnElements.length-1;i>=0;--i){ //刪除掉第一個span後面的元素 spanPos = returnElements[i]. indexOf(" //如果找到匹配的，獲得span前的內容 if(spanPos>0){ subString=returnElements[i]. substring(spanPos); returnElements[i]=subString; } } return returnElements; }

新的控制流程

添加以下的JavaScript代碼到我們的應用中，以下的步驟將在伺服器和瀏覽器中執行。

• 1. 如同一個普通Struts應用裝載頁面。
• 2. 使用者改變文字框的值，觸發一個onChange() 事件，調用retrieveURL() 方法。
• 3. 該JavaScript方法通過發送Struts明白的表單變數(後台)請求到伺服器的Struts Action。
• 4. 該JavaScript方法同樣設定了第二個JavaScript方法的名字，此方法將到伺服器響應完畢後調用。本例子中，設定為processStateChange() 方法。
• 5. 如我們所預期的，伺服器響應完畢，調用processStateChange() 方法。
• 6. JavaScript在(新的)伺服器響應中迴圈取出所有元素。將頁面上存在與獲得元素名字相同的 中的元素替換掉。

在你的應用中設計AJAX

以上描述的JavaScript方法能在大多數的應用中使用，包括比我們的例子複雜得多的。但是，在使用之前，你需要注意以下幾點：

• 避免複製代碼，最好在初始化請求(如，顯示完整的頁面)和AJAX(更新部分頁面)請求中使用相同的Struts Action和JSP。

•在公用的Action(控制器)中，決定JSP頁面(所有的JSP頁面或者其中的一部分)中的一個地區需要傳送到瀏覽器。通過在web伺服器的session或者ActionForm中設定標記來讓JSP頁面知道哪些部分需要提交。

• 在JSP中，使用Struts 或者JSTL標籤來決定提交的HTML地區。