在Struts应用中使用Ajax(2)

观察下下面的图3和图4。第一眼看上去，它们和前面的例子没有说明区别。它们的不同之处在于，页面载入后(图3)然后文本框中的值改变了，窗体自动提交而不显示空白的，然后在图4中显示结果。普通的提交按钮仍然在，你也可以选择使用它。

498)this.style.width=498;" border="0" />

图 3. 页面载入后的AJAX例子

498)this.style.width=498;" border="0" />

图 4. AJAX调用后的AJAX例子

添加AJAX是出奇的容易。服务器端的代码和前面的例子是一样的: 一个Struts的ActionForm来后去数据，一个Struts的Action来执行需要的任务(例如，存储数据库)然后转发到适当的JSP页面来显示结果。

继续

如果你希望就此停止阅读(跳过这个例子的工作说明)，但是这里的是和你需要转换你的Struts应用到一个Struts-AJAX应用同样的风格：

• 1. 在你的web页面中引入一个Ajax.js (该文件是struts-ajax.zip 例文件中的一部分)。Ajax.js 包含了所有需要发送和接收AJAX调用的JavaScript方法。
• 2. 确保你希望在AJAX调用中更新的web页面的部分包含在标签中，并且给每个标签一个id。
• 3. 当一些事件触发的时候就更新页面(例如，文本框的the onchange()方法)，调用retrieveURL()方法，通过URL传递到需要执行服务器端处理的Struts Action。
• 4. 为了页面的显示/更新，最简单的方法是Struts Action转发回同样的页面。在本例中，showGreen/showBlue 文本框中的onchange()方法来触发AJAX调用。

JavaScript方法retrieveURL()调用服务器的Struts(通过URL)，获取JSP响应，然后更新显示页面中的 标签中的部分。就是这么简单！

AJAX解决方案的细节

我们将例子变为AJAX-Struts应用的时候，需要三个变化：

• 1. 增加一个JavaScript方法来完成到服务器的“背后的”AJAX调用。
• 2. 增加JavaScript代码来接收服务器的响应并更新页面。
• 3. 在JSP页面增加标签标签，这个标签中内容将在AJAX调用中更新。

我们将详细的说明上面的每一步。

发送AJAX请求到服务器

有两个方法(在下面列出)用于发送请求到服务器。

• retrieveURL()方法获得服务器的URL和Struts form。URL用于使用AJAX，form的值用于传递到服务器。

• getFormAsString()方法用于将retrieveURL()中form命名的值组装成查询字符串，并发送到服务器。

使用方法很简单，使用onclick()/onChange()事件来触发retrieveURL()更新显示。

在这两个方法中有一些有趣的东西。

在retrieveURL()方法中，req.onreadystatechange = processStateChange (注意，没有括号)这一行来告诉浏览器在服务器响应到达的时候调用processStateChange()方法(该方法将在后面介绍)。retrieveURL()方法中(现在已经是AJAX的标准了)同样决定是使用IE浏览器(ActiveX)还是使用Netscape/Mozilla (XmlHttpRequest) 来实现跨浏览器兼容。

getFormAsString()方法将HTML form转换成字符串连接在URL后面(这样就允许我们发送HTTP GET请求)。这个字符串是经过转换的(比如，空格转换成%20等)，并且是一个Struts能将其组装成ActionForm的格式(并不需要Struts清楚的明白这个是来之AJAX的请求)。注意，在本例中我们使用HTTP GET，使用HTTP POST的方法也是类似的。

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
"+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; 

}