Sprinkle Some AJAX Magic in Your Struts Web Application
Pages: 1, 2, 3
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.


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.
<span> tags, giving each an id. 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. 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!
<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.
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; } 聯(lián)系客服