在Struts应用中使用Ajax(3)

在Struts应用中使用Ajax(3)

[@more@] 根据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: " + 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页面知道哪些部分需要提交。

来自 “ ITPUB博客 ” ，链接：http://blog.itpub.net/7839366/viewspace-920181/，如需转载，请注明出处，否则将追究法律责任。

转载于:http://blog.itpub.net/7839366/viewspace-920181/