神马文学网java.net: Sprinkle Some AJAX Magic in Your Struts Web Application part III
来源：百度文库 编辑：神马文学网 时间：2024/04/29 21:38:05
Sprinkle Some AJAX Magic in Your Struts Web Application
Pages:1,2, 3
Updating the Web Page with the AJAX Response
So far, we have looked at the JavaScript to do the AJAX call (listed above) and the Struts Action, ActionForm, and JSP (mostly the same, with the addition of tags). To complete our understanding of the Struts-AJAX project, we need to look at the three JavaScript functions that are responsible for updating the current web page when the results from the server are received.
processStateChange(): The method name that we set before making the AJAX call. This method is called by the XMLHttpRequest/Microsoft.XMLHTTP object once the server has completed sending back its response. splitTextIntoSpan(): Loops through the response, picking out an array of NewContent elements. replaceExistingWithNewHtml(): Loops through this array of span elements, searching for elements in the existing page with ‘someName‘ and replacing them with the new content from the server. Note that we get the returned content via req.responseText for robustness (since it allows us to manipulate any text response), rather than req.responseXml (which is more powerful, but requires that you return valid XHTML or XML).
function processStateChange() { if (req.readyState == 4) { // Complete if (req.status == 200) { // OK response //Split the text response into Span elements spanElements = splitTextIntoSpan(req.responseText); //Use these span elements to update the page replaceExistingWithNewHtml(spanElements); } else { alert("Problem with server response:\n " + req.statusText); } }}
replaceExistingWithNewHtml() is a "private" method used by the processStateChange() method.
function replaceExistingWithNewHtml (newTextElements){ //loop through newTextElements for(var i=newTextElements.length-1;i>=0;--i){ //check that this begins with -1){ //get the span name - sits // between the 1st and 2nd quote mark //Make sure your spans are in the format //NewContent startNamePos=newTextElements[i]. indexOf(‘"‘)+1; endNamePos=newTextElements[i]. indexOf(‘"‘,startNamePos); name=newTextElements[i]. substring(startNamePos,endNamePos); //get the content - everything // after the first > mark startContentPos=newTextElements[i]. indexOf(‘>‘)+1; content=newTextElements[i]. substring(startContentPos); //Now update the existing Document // with this element, checking that // this element exists in the document if(document.getElementById(name)){ document.getElementById(name). innerHTML = content; } }}
splitTextIntoSpan() is a "private" method used by the processStateChange() method.
function splitTextIntoSpan(textToSplit){ //Split the document returnElements=textToSplit. split("") //Process each of the elements for(var i=returnElements.length-1;i>=0;--i){ //Remove everything before the 1st span spanPos = returnElements[i]. indexOf("0){ subString=returnElements[i]. substring(spanPos); returnElements[i]=subString; } } return returnElements;}New Flow of Control
By adding the above JavaScript code to our application, the following steps now happen on the server and on the browser.
The page loads as per a normal Struts application. The user changes a textbox value, triggering an onChange() event, which calls the retrieveURL() JavaScript function. This JavaScript function makes a (background) call to the Struts Action on the server, passing in all of the form variables in a way that Struts will understand. This JavaScript function also sets the name of a second JavaScript function, which will be called when the server response is finished. In this case, it is set to the processStateChange() method. As expected, when the server response is finished, the processStateChange() method is called. The JavaScript loops through all of the elements in the (new) server response. Where it finds a in the existing page with the same name, it updates it with the new content.
Designing AJAX into Your Application
The JavaScript outlined above can cope with the way Struts is used in most applications, including those that are much more complex than our simple example. However, you may find that following the points below makes it easier to write and use your code:
To avoid duplicated code, it can often be better to use the same Struts Action and JSP for the initial request (i.e., show full page) and the AJAX (update part of page) requests. Within the common Action (controller) class, decide which sections of the JSP page (all of the JSP or only part of it) need to be sent to the browser. By setting flags in either the web server session or ActionForm, the JSP page knows which sections need to be rendered. Within the JSP, use Struts or JSTL tags to decide if we need to render a section of HTML or not.
An updated version of this project, with AJAX enabled, can be downloaded here:struts-Ajax.zip
Conclusion
AJAX techniques promise to completely revolutionize how we build and use web applications. This article showed a simple technique to add AJAX behavior to existing Struts applications. It allows us to reuse our existing investment, not only in code but also in developer skills. As a nice by-product, it also allows us to write cleaner, more reusable, Java Struts applications.
Sample code for this articleDefinition of AJAX "Using AJAX to Catch JavaScript Errors" (XML.com article) "Developing AJAX Applications the Easy Way" (java.net article) "An Introduction to AJAX" (dev2dev article) "AJAX on Rails" (ONLamp.com article)DWR: Direct Web Remoting ProjectStruts Framework ProjectJSF: Java Server Faces Project
Paul Browne has been consulting in enterprise Java withFirstPartners.net for almost seven years.
Pages:1,2, 3
Updating the Web Page with the AJAX Response
So far, we have looked at the JavaScript to do the AJAX call (listed above) and the Struts Action, ActionForm, and JSP (mostly the same, with the addition of tags). To complete our understanding of the Struts-AJAX project, we need to look at the three JavaScript functions that are responsible for updating the current web page when the results from the server are received.
processStateChange(): The method name that we set before making the AJAX call. This method is called by the XMLHttpRequest/Microsoft.XMLHTTP object once the server has completed sending back its response. splitTextIntoSpan(): Loops through the response, picking out an array of NewContent elements. replaceExistingWithNewHtml(): Loops through this array of span elements, searching for elements in the existing page with ‘someName‘ and replacing them with the new content from the server. Note that we get the returned content via req.responseText for robustness (since it allows us to manipulate any text response), rather than req.responseXml (which is more powerful, but requires that you return valid XHTML or XML).
function processStateChange() { if (req.readyState == 4) { // Complete if (req.status == 200) { // OK response //Split the text response into Span elements spanElements = splitTextIntoSpan(req.responseText); //Use these span elements to update the page replaceExistingWithNewHtml(spanElements); } else { alert("Problem with server response:\n " + req.statusText); } }}
replaceExistingWithNewHtml() is a "private" method used by the processStateChange() method.
function replaceExistingWithNewHtml (newTextElements){ //loop through newTextElements for(var i=newTextElements.length-1;i>=0;--i){ //check that this begins with -1){ //get the span name - sits // between the 1st and 2nd quote mark //Make sure your spans are in the format //NewContent startNamePos=newTextElements[i]. indexOf(‘"‘)+1; endNamePos=newTextElements[i]. indexOf(‘"‘,startNamePos); name=newTextElements[i]. substring(startNamePos,endNamePos); //get the content - everything // after the first > mark startContentPos=newTextElements[i]. indexOf(‘>‘)+1; content=newTextElements[i]. substring(startContentPos); //Now update the existing Document // with this element, checking that // this element exists in the document if(document.getElementById(name)){ document.getElementById(name). innerHTML = content; } }}
splitTextIntoSpan() is a "private" method used by the processStateChange() method.
function splitTextIntoSpan(textToSplit){ //Split the document returnElements=textToSplit. split("") //Process each of the elements for(var i=returnElements.length-1;i>=0;--i){ //Remove everything before the 1st span spanPos = returnElements[i]. indexOf("
By adding the above JavaScript code to our application, the following steps now happen on the server and on the browser.
The page loads as per a normal Struts application. The user changes a textbox value, triggering an onChange() event, which calls the retrieveURL() JavaScript function. This JavaScript function makes a (background) call to the Struts Action on the server, passing in all of the form variables in a way that Struts will understand. This JavaScript function also sets the name of a second JavaScript function, which will be called when the server response is finished. In this case, it is set to the processStateChange() method. As expected, when the server response is finished, the processStateChange() method is called. The JavaScript loops through all of the elements in the (new) server response. Where it finds a in the existing page with the same name, it updates it with the new content.
Designing AJAX into Your Application
The JavaScript outlined above can cope with the way Struts is used in most applications, including those that are much more complex than our simple example. However, you may find that following the points below makes it easier to write and use your code:
To avoid duplicated code, it can often be better to use the same Struts Action and JSP for the initial request (i.e., show full page) and the AJAX (update part of page) requests. Within the common Action (controller) class, decide which sections of the JSP page (all of the JSP or only part of it) need to be sent to the browser. By setting flags in either the web server session or ActionForm, the JSP page knows which sections need to be rendered. Within the JSP, use Struts
An updated version of this project, with AJAX enabled, can be downloaded here:struts-Ajax.zip
Conclusion
AJAX techniques promise to completely revolutionize how we build and use web applications. This article showed a simple technique to add AJAX behavior to existing Struts applications. It allows us to reuse our existing investment, not only in code but also in developer skills. As a nice by-product, it also allows us to write cleaner, more reusable, Java Struts applications.
Sample code for this articleDefinition of AJAX "Using AJAX to Catch JavaScript Errors" (XML.com article) "Developing AJAX Applications the Easy Way" (java.net article) "An Introduction to AJAX" (dev2dev article) "AJAX on Rails" (ONLamp.com article)DWR: Direct Web Remoting ProjectStruts Framework ProjectJSF: Java Server Faces Project
Paul Browne has been consulting in enterprise Java withFirstPartners.net for almost seven years.
java.net: Sprinkle Some AJAX Magic in Your Struts Web Application part III
java.net: Sprinkle Some AJAX Magic in Your Struts Web Application part I
java.net: Sprinkle Some AJAX Magic in Your Struts Web Application part II
java.net: Dynamic Interaction with Your Web Application
Add dynamic Java code to your application
Creating a Simple Web Application in NetBeans...
C Q&A: Displaying a JPG in your MFC Application
Java in Action - Struts分页显示
Struts标签-Logic - Java in Action - BlogJav...
Java in Action - Struts分页显示1
Your Guide To Music On The Web – Part #1
Ajax Programming in BEA WebLogic Portal 8.1, Part 2
Mastering Ajax, Part 6: Build DOM-based Web applications
AJAX Software AJAX Technology J2EE Application Rich Web Applications JSF Components
AJAX Software AJAX Technology J2EE Application Rich Web Applications JSF Components 网站
关于java Application打包JRE - 网全资料库 wnetw.net
WEB PART ASP.NET 2.0 Web Part编程入门（实践篇）-- 电脑报 函授学院
THE PART III
java.net: Introduction to Nutch, Part 1: Crawling
java.net: Introduction to Nutch, Part 2: Searching
ASP.NET 2.0 Web Part编程入门（实践篇）
【简历篇】power words in your application ——高盛HR提供
struts 学习园地 Java / Web 开发 - CSDN社区 community....
面向 Java 开发人员的 Ajax: 探索 Google Web Toolkit