Progress Bar with AJAX

Greg Murray
Status: In Early Access

Problem Description

Server-side operations may require interactions with external systems or services that may take time or be asynchronous in design. Imagine a web application that must interact with a credit card processing system, order processing system, or travel system which may take longer to process than a standard request-response on the web will allow. The conventional web application interaction model uses synchronous interactions between the client and the server. Some applications will use HTML page refreshes to track the results of a server-side process which put a large burden on a server as the number of users increases.

Users may get frustrated not knowing the state or progress of a server side operation. This frustration may lead to duplicate form submissions, angry users, or lost sales if the users gives up.

The problem is, how do you display the progress of a long running operation without refreshing the page?

Solution

The solution is to use supply an HTML page that uses AJAX technologies along with a server-side component to track the progress of a long running server-side task. The progress bar involves two AJAX interactions which first initialize a server side operation which returns a unique id representing that operation and second start polling the server for the state of the server side operation until the operation is complete. This strategy is outlined in more detail below.

AJAX Progress Bar with a Monitoring Servlet

The following sequence diagram describes an HTML page that uses AJAX interactions to show a progress bar.

An HTML form event calls a JavaScript function which creates an XMLHttpRequest object. The function will configure the XMLHttpRequest object with the HTTP method, URL, and whether or not the interaction is asynchronous. If the interaction is asynchronous a callback function to call when the call to the servlet is complete must also be set. The XMLHttpRequest object will then make a call to the URL it was configured with and events in the HTML page will continue to be processed.

A servlet mapped to the URL which the XMLHttpRequest object is configured with will receive the call and initialize a task. The task is assigned a unique id which is included in an XML response to the XMLHttpRequest object. The XMLHttpRequest object will call a callback function which sets the task id to a global variable and starts a polling loop.

In the pooling loop the JavaScript in the HTML page will poll the servlet by creating an configuring an XMLHttpRequest object in the same way that was described above. In this case the task id and the current progress being displayed by the page are also sent the servlet as URL parameters.

The servlet will receive the request and compare the progress of the specified task. If the progress has not changed the servlet will set the HTTP response code to 304 (No Content) and send no body content. If the progress has changed the servlet will send back an XML document containing the progress of the task.

The XMLHttpRequest object will receive the response and call the callback function. The callback function will update the DOM of the HTML page using the JavaScript DOM APIs if the progress has changed (an HTTP 200 response code signifies that the progress has changed). The portions of the HTML page that were effected by updates will be re-render immediately.

The polling will continue at a specific interval until the task has been completed.

References

For more information about this topic, refer to the following:

<>


© Sun Microsystems 2005. All of the material in The Java BluePrints Solutions Catalog is copyright-protected and may not be published in other works without express written permission from Sun Microsystems.