Download presentation
Presentation is loading. Please wait.
1
Struts 和 Ajax的结合
2
未使用Ajax之前 模仿桌面应用程序的两个选择
1)发送所有的可能作为页面的一部分被请求的信息，使用大量的javaScript来处理（非企业级）； 2)不改变形式的提交到后台服务器； Ajax提供了给你融合前台的最佳解决方案－－动态的页面
3
实现动态页面你的选择 等待下一个融合了Ajax技术的Stuts版本； 直接采用新的方法（dwr或者Ruby on Rails）；
在已然存在的struts中加入ajax，实现struts和ajax的结合；
4
在struts中增加ajax的优势 不需要任何新的库文件或者服务器代码（只需要使用现有的Struts库文件和action ）
解决方案中所有部分――JavaScript，XML，Java和Struts――早已为广泛所知。 此应用可以一块一块地移植到AJAX;我们可以确定哪些部分对用户有益，并首先将它们更新到动态AJAX显示。
5
实现方案 首先看一个现有的struts应用（未添加ajax）； 需要注意的地方；
6
在struts中添加ajax 演示效果 添加AJAX是出奇的容易。服务器端的代码和前面的例子是一样的: 一个Struts的ActionForm来后去数据，一个Struts的Action来执行需要的任务(例如，存储数据库)然后转发到适当的JSP页面来显示结果。
7
继续 在web页面中引入一个ajax.js； 确保你希望在AJAX调用中更新的web页面的部分包含在标签中，并且给每个标签一个id
当一些事件触发的时候就更新页面 为了页面的显示/更新，最简单的方法是Struts Action转发回同样的页面
8
Ajax解决方案的细节 增加一个JavaScript方法来完成到服务器的“背后的”AJAX调用
在JSP页面增加标签标签，这个标签中内容将在AJAX调用中更新
9
发送ajax请求到服务器 retrieveURL()方法获得服务器的URL和Struts form。URL用于使用AJAX，form的值用于传递到服务器。 getFormAsString()方法用于将retrieveURL()中form命名的值组装成查询字符串，并发送到服务器。 使用方法很简单，使用onclick()/onChange()事件来触发retrieveURL()更新显示
10
retrieveURL方法 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(); } } }
11
getFormAsString()方法 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; }
12
根据ajax的响应，更新web页面 processStateChange()： 该方法在AJAX调用前设定。它在服务器响应到达后由XMLHttpRequest/Microsoft.XMLHTTP 对象调用。 splitTextIntoSpan(): 根据响应，循环取出数组中的元素组装成NewContent。 replaceExistingWithNewHtml()： 根据span元素数组，循环搜索，将里面的元素调换掉页面中和它的'someName'相同的中的内容
13
processStateChange()
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); } } }
14
replaceExistingWithNewHtml
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; } } }
15
splitTextIntoSpan( 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; }
16
新的控制流
17
注意几点 避免复制代码，最好在初始化请求(如，显示完整的页面)和AJAX(更新部分页面)请求中使用相同的Struts Action和JSP
在公共的Action(控制器)中，决定JSP页面(所有的JSP页面或者其中的一部分)中的一个区域需要传送到浏览器。通过在web服务器的session或者ActionForm中设定标记来让JSP页面知道哪些部分需要提交 在JSP中，使用Struts 或者JSTL标签来决定提交的HTML区域
Similar presentations
