The repeated page-reload and refresh cycle presents one of the biggest usability hurdles in Web application development and is a serious challenge for Java developers. This article introduces a pioneering approach to creating dynamic Web application experiences. Ajax (Asynchronous JavaScript and XML) is a programming technique that allows you combine Java technologies, XML and JavaScript for Java-based Web applications that break the page-reload paradigm.

Ajax is an approach to Web application development that uses client-side scripting to exchange data with the Web server. As a result, Web pages are dynamically updated without a full page refresh that interrupts the interaction flow. With Ajax, you can generate richer, more dynamic Web application user interfaces that approach the closeness and usability of local desktop applications.

Ajax isn’t a technology, it is more of a pattern, a way to identify and portray a useful design technique. Ajax is new in the sense that many developers are just beginning to realize its importance, but all the components that implement an Ajax application have been used for a number of years. The current buzz is because of the emergence in 2004 and 2005 of some great dynamic Web UIs based on Ajax technology, most notably Google’s GMail and Maps applications and the photo-sharing site, Flickr. These UIs were sufficiently groundbreaking to be dubbed “Web 2.0″ by some developers, with the resulting interest in Ajax applications on the rise.

You can use Ajax to enhance traditional Web applications, streamlining interaction by eliminating page loads. To demonstrate this, there is a simple example of a shopping cart that is dynamically updated as items are added to it. Incorporated into an online store, this approach would let users continue browsing and adding items to their carts without having to wait after each click for a full-page update.

An Ajax interaction begins with a JavaScript object called XMLHttpRequest. As the name suggests, it allows a client-side script to perform HTTP requests and it will parse an XML server response. The first step in this Ajax roundtrip is to create an XMLHttpRequest instance. The HTTP method to use for the request (GET or POST) and the destination URL are then set on the XMLHttpRequest object.

When you send that HTTP request, you don’t want the browser to hang around waiting for the server to respond. Instead, you want it to continue reacting to the user’s interaction with the page and deal with the server’s response when it ultimately arrives. To accomplish this, you can register a callback function with the XMLHttpRequest and then dispatch the XMLHttpRequest asynchronously. Control then returns to the browser, but the callback function will be called when the server’s response arrives.

On the Java Web server, the request arrives just like any other HttpServletRequest. After parsing the request parameters, the servlet invokes the necessary application logic, serializes its response into XML and writes it to the HttpServletResponse. Back on the client side, the callback function registered on the XMLHttpRequest is now invoked to process the XML document returned by the server. Finally, the user interface is updated in response to the data from the server, using JavaScript to manipulate the page’s HTML DOM.

Tags: Enhance Web Applications through AJAX