Ajax Patterns: Concurrent Document Loader

This article was originally published in the AjaxWorld magazine.

Introduction

AJAX stands for Asynchronous JavaScript processing with XML. It is the asynchronous part that gets everyone excited. Fetching the data without reloading the page allows AJAX applications to mimic the desktop-like behavior.

Since AJAX applications are getting quite complex these days, they tend use XML files to store the initial configuration settings and bootstrap information. When the application starts, it needs to load the configuration files in order to setup the application screens.

Loading each configuration time sequentially would take a long time. Clearly, we would like to leverage the power of AJAX and load the files concurrently. To do that we need to create a separate XMLHttpRequest for each configuration file and then dispatch the requests one of another.

We can set the callback on each request, which would be invoked once the configuration file is loaded. But the problem is that all these documents can come at different times, so how do we know when all of them are loaded? To solve this problem, we need to have a loader that keeps track of what has been loaded and invokes a callback once all the documents have been fetched.

Concurrent Document Loader Interface

We start by thinking how we want to interact with this document loader. We want to issue multiple requests and then get a callback when all of them are done.

The callback function will have the array of XMLHttpRequests as its parameter:

So the consumer of this API, would be able to write the following code:

Note how the callback function is declared in place in the example above. This is called closure and looks similar to anonymous functions in Java. Actually it is much more complex than it looks, so if you have not seen this before, you will find complete explanation in this article.

Concurrent Document Loader Implementation

The following implementation has been tested in Firefox 1.5.0.4. We implement the ConcurrentDocumentLoader as a singleton, declaring it like this:

Lets focus on a few things in the code above. The first thing to note is that we keep a count of the number of the outstanding requests using a variable. Every time when a request comes back, we decrement the count. Once the count reaches zero, we know that we are done and we invoke the callback function. This is thread-safe, since there is no one polling on the outstanding requests variable.

The second thing to note is the call to the asyncLoadDocument function. This function is going to do the actual loading using XMLHttpRequest. You can write this function using either your favorite AJAX library like prototype or MochiKit or you can do it by directly manipulating the object as shown in the listing below.

And finally, we list the function that creates XMLHttpRequest in different browsers.

Conclusion

The Concurrent Document Loader pattern is useful in cases when you need to load multiple XML documents concurrently and get notified when all requests are completed.