在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区域。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值