Sprinkle Some AJAX Magic in Your Struts Web Application
Pages: 1, 2, 3
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 <span>
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 <span id="someName">NewContent</span>
elements. replaceExistingWithNewHtml()
: Loops through this array of span elements, searching for <span>
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 <span if(newTextElements[i]. indexOf("<span")>-1){ //get the span name - sits // between the 1st and 2nd quote mark //Make sure your spans are in the format //<span id="someName">NewContent</span> 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("</span>") //Process each of the elements for(var i=returnElements.length-1;i>=0;--i){ //Remove everything before the 1st span spanPos = returnElements[i]. indexOf("<span"); //if we find a match, take out //everything before the span if(spanPos>0){ subString=returnElements[i]. substring(spanPos); returnElements[i]=subString; } } return returnElements;}
By adding the above JavaScript code to our application, the following steps now happen on the server and on the browser.
onChange()
event, which calls the retrieveURL()
JavaScript function. Action
on the server, passing in all of the form variables in a way that Struts will understand. processStateChange()
method. processStateChange()
method is called. <span>
elements in the (new) server response. Where it finds a <span>
in the existing page with the same name, it updates it with the new content. 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:
Action
and JSP for the initial request (i.e., show full page) and the AJAX (update part of page) requests. 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. <logic:equal>
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
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.
Paul Browne has been consulting in enterprise Java with FirstPartners.net for almost seven years.