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?
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.
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.
For more information about this topic, refer to the following: