Flyingis

Our First Struts AJAX Application

Take a look at the Figures 3 and 4 below. At first glance, they seem similar to our previous ones. The difference is that after then screen loads (Figure 3) and the values in the textboxes are changed, the screen automatically updates without the screen going blank, giving the result as per Figure 4. The normal Submit button is also still there, should you choose to use it.

Figure 3. AJAX sample after page load

Figure 4. AJAX sample after AJAX call

Adding this AJAX behavior is surprisingly easy. The server-side code is the same as usual: a Struts ActionForm to hold the data, and a Struts Action that performs the tasks required (e.g., database access) and then forwards to the appropriate JSP to display the result.

Don't Just Sit There

If you wish to stop reading here (and skip the explanation of how this works) then here is all you need to do to convert your Struts application to a Struts-AJAX application in a similar manner:

1. Include the Ajax.js JavaScript file on your web page (this file is part of the struts-ajax.zip sample file). Ajax.js contains all of the JavaScript functions necessary to send and receive AJAX calls.
2. Ensure the parts of the web page that you wish to update during AJAX calls are surrounded by <span> tags, giving each an id.
3. When something happens that should update the page (e.g., the onchange() method of a textbox), call the retrieveURL() function, passing in the URL to the Struts Action that will do the necessary server-side processing.
4. For page display/update, the easiest option is for the Struts Action to forward back to the same JSP. In our sample, we trigger the AJAX call in the onchange() method of the showGreen/showBlue textboxes.

The JavaScript function retrieveURL() calls Struts on the server (via the URL provided), takes the JSP response, and updates the web page being displayed, where the <span> tags on the existing web page match those on the newly returned JSP. Simple!

The AJAX Solution in More Detail

When we converted the previous sample into an AJAX-Struts application we made three changes:

1. Added a JavaScript function to do the "behind the scenes" AJAX call to the server.
2. Added JavaScript code to receive the server response and update the web page.
3. Added <span> tags to the JSP page, which mark sections that will be updated during AJAX calls.

We will look at each of these in more detail.

Making the AJAX Call to the Server

There are two functions (listed below) that are used to call the server.

• The retrieveURL() function takes a parameter of the URL of the server and the name of the Struts form. The URL will be called using AJAX and the values of the form passed to the server.
• getFormAsString() is a function that converts the values on the form named in retrieveURL() into a query string suitable for posting to Struts on the server.

To use, simply add the retrieveURL() function to the onclick()/onChange() method of the event you wish to trigger the screen update.

There are some interesting items going on in both methods.

Within the retrieveURL() method, the line req.onreadystatechange = processStateChange (note: no brackets) tells the browser to call the processStateChange() method (which we talk through later in this article) once the server sends back its response. This method (now standard in AJAX) also determines whether it should use the Internet Explorer (ActiveX) or Netscape/Mozilla (XmlHttpRequest) object to ensure cross-browser compatibility.

The getFormAsString() method converts the HTML form into a string to be appended to the URL (which allows us to do a HTTP GET request). This string is escaped (spaces are converted to %20, etc.) and is in a format that Struts can use to populate an ActionForm (without Struts being aware of the special AJAX nature of the request). Note that while we use a HTTP GET in this sample, it would be equally possible to use a HTTP POST by looping in a similar manner and adding the form fields to the request.

function retrieveURL(url,nameOfFormToPost) {
    
  //convert the url to a string
  url=url+getFormAsString(nameOfFormToPost);
    
  //Do the AJAX call
  if (window.XMLHttpRequest) { 
     
    // Non-IE browsers
    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();
    }
  }
}

getFormAsString() is a "private" method used by the retrieveURL() method.

function getFormAsString(formName){
        
  //Setup the return String
  returnString ="";
        
  //Get the form values
  formElements=document.forms[formName].elements;
        
  //loop through the array, building up the url
  //in the format '/strutsaction.do&name=value'
 
  for(var i=formElements.length-1;i>=0; --i ){
        //we escape (encode) each value
        returnString+="&" 
        +escape(formElements[i].name)+"=" 
        +escape(formElements[i].value);
 }
        
 //return the values
 return returnString; 
}