Sun Developer Network recently published a series of four articles by Rick Palkovic and Mark Basler, each article highlighting a different approach to adding Ajax functionality to an existing Java EE application. The articles present step-by-step instructions on how to implement each of the techniques described within NetBeans.

The first article, Creating an AJAX-Enabled Application, a Do-It-Yourself Approach shows how to add an Ajax dialog box using hand-coded JavaScript and CSS. The JavaScript and CSS code is then delivered inside a JSP page. When a user interacts with the pop-up balloon, an XMLHttpRequest is instantiated by the JavaScript to send a request for more information to a servlet:

You integrate [the JavaScript and CSS] files with the existing JavaServer Pages (JSP) files in the NetBeans project. This approach is the most direct model for adding Ajax to a legacy application. However, it might not be the easiest to program...

With the JavaScript, CSS, and book catalog JSP files prepared, all you need to implement your Ajax pop-up balloons is a servlet or server-side component to handle the XMLHttpRequest. The most hands-on approach to implementing a dispatcher is to write a servlet... The servlet composes an XML response to a client request, and is unaware of the asynchronous nature of the request.

To reduce the need to write client-side JavaScript by hand, the second article in the series, Creating an AJAX-Enabled Application, a Toolkit Approach relies on the Dojo toolkit to provide much of the script and CSS code, which are still delivered inside a JSP page. The toolkit-based approach offers an additional benefit as well:

One advantage of using Dojo libraries is that they are designed to work with various browsers when desired functionality is missing. As a minimum, JavaScript must be enabled on the client browser in order for Ajax techniques to work. However, if JavaScript has been disabled entirely on the browser, the Dojo libraries do not prevent the page from loading... For more feature-packed Ajax pages, degradable code is ... important.

As for reducing the hand-written client-side code, the authors note that:

Even in the simplest of applications, a JavaScript library such as one provided by the Dojo Toolkit can provide some advantages. Notably,

• It handles events for you
• It adjusts well to browser differences
• It provides support for history and bookmark browser features that can be troublesome in Ajax
• It handles cases in which JavaScript capability in the client browser is disabled or nonexistent
• It provides a wide range of useful widgets such as date picker, rich text editor, time picker, and many more

The third iteration of adding Ajax to a legacy application, Creating an Ajax-Enabled Application, a Component Approach, takes advantage of JSF's server-side component model to display the pop-up dialog:

[JSF]... provides standard components that you can extend to create your own custom components, which you can then reuse in different applications. Along with the custom component, you also create a custom renderer and a custom tag to associate the component with the renderer and to reference the component from the page.

When you create the JavaServer Faces custom component in this approach, you package the resources required by the component directly with the application bundle. The custom component generates the JavaScript code needed to handle Ajax interactions with the server. To fulfill the Ajax request, you use the same Java Servlet that was used in the do-it-yourself method.

The final version of the application, outlined in Creating an Ajax-Enabled Application, a Phase Listener Approach adds the JSF capability to intercept and respond to component life-cycle events on the server via a phase listener:

You can use the phase listener to intercept and fulfill the client component's Ajax requests. The phase listener can delegate responsibility to a managed bean's method or again use the legacy servlet. The client component's resources, such as the JavaScript file and CSS, are accessed through the phase listener.

What are your preferred methods of adding Ajax interaction to an existing enterprise app?