Struts 和和 Ajax的结合的结合 未使用未使用Ajax之前之前模仿桌面应用程序的两个选择 1)1)发送所有的可能作为页面的一部分被请求的信息，使发送所有的可能作为页面的一部分被请求的信息，使用大量的用大量的javaScriptjavaScript来处理（非企业级）；来处理（非企业级）； 2) 2)不改变形式的提交到后台服务器；不改变形式的提交到后台服务器；Ajax提供了给你融合前台的最佳解决方案动态的页面 实现动态页面你的选择实现动态页面你的选择等待下一个融合了Ajax技术的Stuts版本；直接采用新的方法（dwr或者Ruby on Rails）；在已然存在的struts中加入ajax，实现struts和ajax的结合；在在struts中增加中增加ajax的优势的优势不需要任何新的库文件或者服务器代码（只需要不需要任何新的库文件或者服务器代码（只需要使用现有的使用现有的StrutsStruts库文件和库文件和action action ）解决方案中所有部分解决方案中所有部分JavaScriptJavaScript，XMLXML，JavaJava和和StrutsStruts早已为广泛所知。早已为广泛所知。 此应用可以一块一块地移植到此应用可以一块一块地移植到AJAX;AJAX;我们可以确我们可以确定哪些部分对用户有益，并首先将它们更新到动定哪些部分对用户有益，并首先将它们更新到动态态AJAXAJAX显示。显示。 实现方案实现方案首先看一个现有的struts应用（未添加ajax）；需要注意的地方；在在struts中添加中添加ajax演示效果添加AJAX是出奇的容易。服务器端的代码和前面的例子是一样的: 一个Struts的ActionForm来后去数据，一个Struts的Action来执行需要的任务(例如，存储数据库)然后转发到适当的JSP页面来显示结果。继续继续在web页面中引入一个ajax.js；确保你希望在AJAX调用中更新的web页面的部分包含在标签中，并且给每个标签一个id 当一些事件触发的时候就更新页面 为了页面的显示/更新，最简单的方法是Struts Action转发回同样的页面 Ajax解决方案的细节解决方案的细节增加一个JavaScript方法来完成到服务器的“背后的”AJAX调用 增加JavaScript代码来接收服务器的响应并更新页面在JSP页面增加标签标签，这个标签中内容将在AJAX调用中更新 发送发送ajax请求到服务器请求到服务器retrieveURL()retrieveURL()方法获得服务器的方法获得服务器的URLURL和和Struts Struts formform。URLURL用于使用用于使用AJAXAJAX，formform的值用于传递的值用于传递到服务器。到服务器。 getFormAsString()getFormAsString()方法用于将方法用于将retrieveURL()retrieveURL()中中formform命名的值组装成查询字符串，并发送到服务命名的值组装成查询字符串，并发送到服务器。器。 使用方法很简单，使用使用方法很简单，使用onclick()/onChange()onclick()/onChange()事事件来触发件来触发retrieveURL()retrieveURL()更新显示更新显示 retrieveURL方法方法function retrieveURL(url,nameOfFormToPost) function retrieveURL(url,nameOfFormToPost) / /将将urlurl转换成字符串转换成字符串url=url+getFormAsString(nameOfFormToPost);url=url+getFormAsString(nameOfFormToPost); / /调用调用AJAXAJAXif (window.XMLHttpRequest) if (window.XMLHttpRequest) / / 非非IEIE浏览器浏览器req = new XMLHttpRequest();req = new XMLHttpRequest();req.onreadystatechange = processStateChange;req.onreadystatechange = processStateChange;try try req.open(GET, url, true); req.open(GET, url, true); catch (e) catch (e) alert(Server Communication Problemn+e);alert(Server Communication Problemn+e); req.send(null);req.send(null); else if (window.ActiveXObject) else if (window.ActiveXObject) / IE/ IE req = new ActiveXObject(Microsoft.XMLHTTP); req = new ActiveXObject(Microsoft.XMLHTTP);if (req) if (req) req.onreadystatechange=processStateChange;req.onreadystatechange=processStateChange;req.open(GET, url, true);req.open(GET, url, true);req.send();req.send(); getFormAsString()方法方法function getFormAsString(formName)function getFormAsString(formName) / /设置返回字符串设置返回字符串returnString =;returnString =; / /取得表单的值取得表单的值formElements=document.formsformName.elements;formElements=document.formsformName.elements; / /循环数组，组装循环数组，组装urlurl/ /像像/strutsaction.do&name=value/strutsaction.do&name=value这样的格式这样的格式 for(var i=formElements.length-1;i=0; -i ) for(var i=formElements.length-1;i=0; -i )/ /转化每一个值转化每一个值returnString+=& returnString+=& +escape(formElementsi.name)+= +escape(formElementsi.name)+= +escape(formElementsi.value);+escape(formElementsi.value); / /返回字符串返回字符串return returnString; return returnString; 根据根据ajax的响应，更新的响应，更新web页面页面processStateChange()processStateChange()： 该方法在该方法在AJAXAJAX调用前调用前设定。它在服务器响应到达后由设定。它在服务器响应到达后由XMLHttpRequest/Microsoft.XMLHTTP XMLHttpRequest/Microsoft.XMLHTTP 对象调对象调用。用。 splitTextIntoSpan(): splitTextIntoSpan(): 根据响应，循环取出数组中根据响应，循环取出数组中的元素组装成的元素组装成NewContentNewContent。 replaceExistingWithNewHtml()replaceExistingWithNewHtml()： 根据根据spanspan元素元素数组，循环搜索，将里面的元素调换掉页面中和数组，循环搜索，将里面的元素调换掉页面中和它的它的someNamesomeName相同的中的内容相同的中的内容 processStateChange() function processStateChange() function processStateChange() if (req.readyState = 4) / if (req.readyState = 4) / 完成完成if (req.status = 200) / if (req.status = 200) / 响应正常响应正常 / /将响应的文本分割成将响应的文本分割成SpanSpan元素元素spanElements = spanElements = splitTextIntoSpan(req.responseText);splitTextIntoSpan(req.responseText); / /使用这些使用这些SpanSpan元素更新页面元素更新页面replaceExistingWithNewHtml(spanElements);replaceExistingWithNewHtml(spanElements); else else alert(Problem with server response:n alert(Problem with server response:n + req.statusText);+ req.statusText); replaceExistingWithNewHtml function replaceExistingWithNewHtml function replaceExistingWithNewHtml (newTextElements)(newTextElements) / /循环循环newTextElementsnewTextElementsfor(var i=newTextElements.length-1;i=0;-i)for(var i=newTextElements.length-1;i=0;-i) / /判断是否以判断是否以 if(newTextElementsi. if(newTextElementsi. indexOf(-1)indexOf(-1) / /获得获得spanspan的名字的名字- - 设置在第一和第二个引号之间设置在第一和第二个引号之间/ /确认确认spanspan元素是以下的格式元素是以下的格式/NewContent/NewContentstartNamePos=newTextElementsi. startNamePos=newTextElementsi. indexOf()+1;indexOf()+1;endNamePos=newTextElementsi. endNamePos=newTextElementsi. indexOf(,startNamePos);indexOf(,startNamePos);name=newTextElementsi. name=newTextElementsi. substring(startNamePos,endNamePos);substring(startNamePos,endNamePos); / /获得内容在第一个获得内容在第一个 标记后的所有内容标记后的所有内容startContentPos=newTextElementsi. startContentPos=newTextElementsi. indexOf()+1; indexOf()+1; content=newTextElementsi.content=newTextElementsi.substring(startContentPos);substring(startContentPos); / /现在更新现有的现在更新现有的DocumentDocument中的元素，中的元素， / / 确保文档存在该元素确保文档存在该元素if(document.getElementById(name)if(document.getElementById(name)document.getElementById(name). document.getElementById(name). innerHTML = content;innerHTML = content; splitTextIntoSpan( function splitTextIntoSpan(textToSplit)function splitTextIntoSpan(textToSplit) / /分割文档分割文档returnElements=textToSplit. returnElements=textToSplit. split()split() / /处理每个元素处理每个元素 for(var i=returnElements.length-1;i=0;-i)for(var i=returnElements.length-1;i=0;-i) / /删除掉第一个删除掉第一个spanspan后面的元素后面的元素spanPos = returnElementsi. spanPos = returnElementsi. indexOf( indexOf( / /如果找到匹配的，获得如果找到匹配的，获得spanspan前的内容前的内容if(spanPos0)if(spanPos0)subString=returnElementsi.subString=returnElementsi.substring(spanPos);substring(spanPos);returnElementsi=subString;returnElementsi=subString; return returnElements;return returnElements; 新的控制流新的控制流注意几点注意几点避免复制代码，最好在初始化请求避免复制代码，最好在初始化请求( (如，显示完如，显示完整的页面整的页面) )和和AJAX(AJAX(更新部分页面更新部分页面) )请求中使用相请求中使用相同的同的Struts ActionStruts Action和和JSP JSP 在公共的在公共的Action(Action(控制器控制器) )中，决定中，决定JSPJSP页面页面( (所有所有的的JSPJSP页面或者其中的一部分页面或者其中的一部分) )中的一个区域需中的一个区域需要传送到浏览器。通过在要传送到浏览器。通过在webweb服务器的服务器的sessionsession或者或者ActionFormActionForm中设定标记来让中设定标记来让JSPJSP页面知道哪页面知道哪些部分需要提交些部分需要提交在在JSPJSP中，使用中，使用Struts Struts 或者或者JSTLJSTL标签来决定提交标签来决定提交的的HTMLHTML区域区域