看看如何在Struts應用中施展AJAX魔法[3]

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() 是一個“私有” 方法，在retrieveURL()中使用。

function getFormAsString(formName){

//設置返回字符串

returnString ="";

//取得表單的值

formElements=document.forms[formName].elements;

//循環數組，組裝url

//像'/strutsaction.do&name=value'這樣的格式

for(var i=formElements.length-1;i>=0; --i ){

//轉化每一個值

returnString+="&"

+escape(formElements[i].name)+"="

+escape(formElements[i].value);

}

//返回字符串

return returnString;

}

根據AJAX的響應更新web頁面

到現在為止，我們學習過了使用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;

}

原文轉自：http://www.anti-gravitydesign.com