Flyingis

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 <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;
}

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.

1. The page loads as per a normal Struts application.
2. The user changes a textbox value, triggering an onChange() event, which calls the retrieveURL() JavaScript function.
3. 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.
4. 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.
5. As expected, when the server response is finished, the processStateChange() method is called.
6. The JavaScript loops through all of the <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.

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 <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

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.