在Struts应用中使用Ajax - 军军小站|张军博客

未使用AJAX之前

AJAX

在你的Struts应用中使用AJAX

实现方案

现有的Struts应用

图 1. 没有AJAX的例子:初始屏幕

图 2. 没有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区域。

在Struts应用中使用Ajax

更多文章、技术交流、商务合作、联系博主

微信扫码或搜索：z360901061

微信扫一扫加我为好友

QQ号联系： 360901061

您的支持是博主写作最大的动力，如果您喜欢我的文章，感觉我的文章对您有帮助，请用微信扫描下面二维码支持博主2元、5元、10元、20元等您想捐的金额吧，狠狠点击下面给点支持吧，站长非常感激您！手机微信长按不能支付解决办法：请将微信支付二维码保存到相册，切换到微信，然后点击微信右上角扫一扫功能，选择支付二维码完成支付。

【本文对您有帮助就好】元

2元

5元

10元

20元

自定义