科技行者

行者学院 转型私董会 科技行者专题报道 网红大战科技行者

知识库

知识库 安全导航

至顶网软件频道在Struts应用中施展Ajax魔法(2)

在Struts应用中施展Ajax魔法(2)

  • 扫一扫
    分享文章到微信

  • 扫一扫
    关注官方公众号
    至顶头条

本文将介绍在JSP页面中包含一些JavaScript这样一个简单而有效的方法来结合AJAX和Struts。在此我们介绍如何重新使用已经存在的Struts actions,但此技术同样可用于你选择的其他Java-Web 框架。

来源:IT专家网 2008年5月5日

关键字: AJAX 应用 Struts java

  • 评论
  • 分享微博
  • 分享邮件
发送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应用中增加Struts的处理。它允许我们利用我们已有的东西,不仅仅是代码,还包括了开发的技能。作为一个好的产品,它同样允许我们写出更清晰,更具移植性的Java Struts应用。

    • 评论
    • 分享微博
    • 分享邮件
    邮件订阅

    如果您非常迫切的想了解IT领域最新产品与技术信息,那么订阅至顶网技术邮件将是您的最佳途径之一。

    重磅专题
    往期文章
    最新文章