在Struts应用中使用Ajax
2007-03-16 17:10
549 查看
未使用AJAX之前 AJAX 在你的Struts应用中使用AJAX 实现方案 现有的Struts应用 图 1. 没有AJAX的例子:初始屏幕 图 2. 没有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; } |
到现在为止,我们学习过了使用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
- 在Struts应用中使用Ajax
- struts2+ajax的应用
- 在Struts 2中使用JSON Ajax支持
- 使用AJAX 异步提高Web应用交互能力(徐承禹)
- 9.3 Eclipse中使用Ant(转自:《项目实践精解:基于Struts-Spring-Hibernate的Java应用开发》)
- 结合struts使用AJAX验证密码是否正确(一)
- 看看如何在Struts应用中施展AJAX魔法
- 在Struts 2中怎样使用使用JSON Ajax支持
- dojo.js中使用ajax提交方式的应用实例
- 使用Jquery应用到Asp.net ajax中时3个误区应该避免
- ASP.Net Ajax应用初步:使用AJAX调用WebService
- rails应用ajax之二:使用rails自身支持
- ASP.Net Ajax应用初步:使用AJAX直接调用后台方法
- 在Struts 2中使用JSON Ajax支持
- 在Struts 2中使用JSon ajax支持
- 在struts 2中使用json ajax支持
- 如何在Struts中使用Ajax
- 使用Asp.net MVC, Jquery, Jquery UI构建基于Ajax的RIA应用.(更新Demo下载)
- AJAX开发的性能冲击:使用AJAX提高WEB应用的带宽使用率