E-mail    Print    Discuss    Blog

Sprinkle Some AJAX Magic in Your Struts Web Application

Contents What is AJAX? Life Before AJAX AJAX 101 Using AJAX in Your Struts Application Implementing the Solution Existing Struts Application Our First Struts AJAX Application Don't Just Sit There The AJAX Solution in More Detail Making the AJAX Call to the Server Updating the Web Page with the AJAX Response New Flow of Control Designing AJAX into Your Application Conclusion Resources

AJAX is the latest revolution in web development circles, allowing rich dynamic interfaces deployed within a normal web browser. Struts has been one of the de facto standards for Java-Web development for a number of years, with a large number of applications already deployed. This article will show you how to combine the richness of an AJAX user interface with your existing Struts applications.

This article shows a simple and elegant way to do this by including a couple of lines of JavaScript on your JavaServer Pages (JSPs). While we show how to reuse existing Struts actions, the techniques are equally applicable to the Java-Web framework of your choice. The method proposed will also allow a move to the next version of Struts (Shale) or JavaServer Faces (JSF) in the future.

What is AJAX?

AJAX stands for "Asynchronous JavaScript and XML." It is a technique, rather than a framework (such as Struts). The reason for the buzz around it is that it allows web pages to behave less like flat documents and more like dynamic GUI apps that users might expect from their desktop environments. AJAX techniques can be used for all recent browsers (including Internet Explorer and Netscape/Mozilla). It is already used by (among others) Microsoft (for its Outlook web client) and Google (for Google Maps and Gmail).

Life Before AJAX

Most current Struts applications follow the standard "web page as a flat document" structure. If you wanted to mimic the behavior of GUI desktop apps (such as those built using Java Swing, Visual Basic, or Delphi) you had two choices: you could either send all of the information that might possibly required as part the web page with (a lot of) JavaScript to handle the dynamic behavior (a slow and not very enterprise-Java way to do things), or you could do constant form submits back to the server (an effective, if somewhat clunky, method). AJAX gives you the best of both worlds: dynamic web pages, but with most of the application running in Java on your web server.

AJAX 101

AJAX is similar to existing Dynamic HTML techniques, with the addition of a "background" call to the server to get new/updated information as required. The mechanics of AJAX have already been covered in detail elsewhere--take a look at the Resources section at the end of this article for some good examples. The minimum you need to know is:

1. The XMLHttpRequest (or Microsoft.XMLHTTP ActiveX object if you are using Internet Explorer). These objects can be called from the JavaScript on your web page. They allow you to request content from your web server as a background call (i.e., the screen does not "go blank" as usually happens during a form submit).
2. The content that the XMLHttpRequest and Microsoft.XMLHTTP objects return can be treated as either XML or plain text. JavaScript (on your web page) can then update the page with this new content as required.
3. The whole process can be triggered by the usual JavaScript events: onclick, onchange, onblur, etc.

Using AJAX in Your Struts Application

The chances are that if you are reading this article, then you are interested in AJAX's ability to create dynamic web interfaces and would like to know how to add it to a Struts application. What are your options if you want to do this?

• Wait until the next version of Struts (Shale) incorporates AJAX techniques. For Struts developers starting a new application this is probably the best option. The downside is that this will probably require moving to JavaServer Faces--not a bad thing in itself, but this may entail fundamental changes if you have an existing application.
• You could move to a new approach, like Direct Web Remoting (DWR) or Ruby on Rails, which are specifically built for AJAX applications. While these are both very impressive frameworks, and are worth taking a look at if you wish to consider web development without Struts, this option would mean rewriting your entire application.
• Add AJAX to your existing Struts application. Since AJAX is a technique, not a framework, it is straightforward to add it to Struts. For existing applications where stability (e.g., keeping existing libraries) is important, this option is recommended and is the one we explore in more detail.

Some other advantages of our preferred option are:

1. It should not require any new libraries or server side code; only the Struts libraries and actions already in the application need be used.
2. All of the parts of the solution--JavaScript, XML, Java and Struts--are already widely understood.
3. The application can be migrated to AJAX piece by piece; we can identify those parts which will most benefit users, and then choose to upgrade them to dynamic AJAX behavior first.

Implementing the Solution

How do we actually implement our chosen solution? We start by reminding ourselves how a "standard" (non-AJAX) Struts application works. In this application, the normal flow of events is as follows:

1. The user requests a screen by clicking a hyperlink or form submit button.
2. The web server runs the requested Struts Action, generating the web page.
3. The browser displays the page.
4. When the user presses Save, the information is posted to the server, where it's converted by the Struts framework to an ActionForm class containing the posted data.
5. The Struts framework then calls the Struts Action that then processes the request (e.g., saves the data to a database).
6. The page is rendered as per item 2, and the process starts again.

Existing Struts Application

A simple Struts application demonstrating this flow of events can be downloaded here: struts-non-ajax.zip. This application, based on the sample applications provided with Struts, either hides or displays blue and green tables depending on the values entered by the user. Figure 1 shows the screen on initial page load. Figure 2 shows the screen after the user has entered values and pressed Submit. Although simple, it is enough to demonstrate a Struts application at work.

Figure 1. Non-AJAX sample: Initial screen

Figure 2. Non-AJAX sample: Values entered, Submit pressed

The server-side code is as you would expect: a Struts Action that forwards to the (same) JSP using the values defined in struts-config.xml. Some other points to note in this code sample are:

• The struts-config.xml file is set up to redirect all requests to http://localhost:8080/struts-non-ajax/ (or the equivalent in your web server) to index.jsp.
• index.jsp contains a Struts form with two text boxes (showBlue and showGreen). The page also contains <logic:equal> tags, but as the values for these text boxes are initially blank, the content within them is not displayed.
• The user enters values (true or false) and presses the Submit button, passing control (via the Struts Framework, reading struts-config.xml) to the SampleAction class.
• SampleAction logs the values, and then forwards back to index.jsp. A more sophisticated Struts application would do more, such as saving to or retrieving from a database.
• index.jsp now evaluates the request; if showBlue or showGreen are true, the tables will be displayed.

There is nothing "wrong" with this application. After all, similar Struts projects have been deployed for years. But how do we to add dynamic behavior to this application, without adding complex JavaScript or continual form submits?

View all java.net Articles.