Struts AJAX应用

======================================================
注：本文源代码点此下载
======================================================

我们的第一个struts ajax应用

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

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

图 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\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;

}

新的控制流

添加以下的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区域。

使用ajax的本例子,可以在以下下载:struts-ajax.zip

结语

ajax技术允许我们在创建和使用web应用的时候完全的改变。本文介绍了一个简单的技术,在现有的struts应用中增

======================================================
在最后，我邀请大家参加新浪APP，就是新浪免费送大家的一个空间，支持PHP+MySql，免费二级域名，免费域名绑定 这个是我邀请的地址，您通过这个链接注册即为我的好友，并获赠云豆500个，价值5元哦！短网址是http://t.cn/SXOiLh我创建的小站每天访客已经达到2000+了，每天挂广告赚50+元哦，呵呵，饭钱不愁了，\(^o^)/