Image Gallery User Notes Useful Links Miscellaneous

AJAX Queue Class

This is a Javascript class that I wrote to make all that whacky AJAX stuff a bit easier to deal with. It accounts for browser differences, and seems to be quite robust.

This form is a very simple example of the ajax class in operation. You can download the Javascript, XHTML and PHP source yourself here (Connects to an aggregate SourceForge Project). It consists of three source files: A Javascript file, containing the class itself, an XHTML file that contains a simplified version of this page, and a very simple PHP file to provide a server response.

Here's Why You Might Want to Use This Class

This class does not provide an "AJAX in a box" functionality. It is a low-level driver. Think of it as the Transport Layer in the OSI model. Nevertheless, what it gives you is rock-solid, predictable AJAX that works on all of the following browsers:

IE 5.0 (Windows 98SE) and all subsequent Windows versions of IE, Safari 1.2 and up, Netscape 7 and up, all versions of Mozilla and Firefox, iCab 2.9 and up, and Opera 8 and above. All other modern browsers against which I've tested work with this.

It does not work on Netscape 6 or earlier, or on Opera 7 or earlier. It will not work on any Mac version of IE or on Safari 1.0.

It is SOLID. It won't start a new request until the first one has completed. If you bang around on the icons below, you will see each and every one complete (eventually). If you use the form to submit POST and GET while the icons are spinning, it will wait until the icons have stopped before submitting the form, and vice-versa. It may seem like threading is preferable, but, in most cases, it is not. This is basic usability. Don't have too much stuff going on. This is NOT the same as a host application, in which threads are being resolved and managed locally.

That being said, there are some applications where threading can be useful. In these cases, I have a threading driver, and you should couple it with "tricks" to try to increase the number of concurrent HTTPRequests supported by the browser. Otherwise, as you will see in the threading demo, you won't actually get any advantage.

These files demonstrate the basic use of AJAX in both GET and POST methods, as well as a bit of basic DHTML.

The form below allows you to enter some text into a box, send it to the server in either a GET or a POST transaction, then have the page updated by the callback.

The nice thing about this class is that you don't have to worry about POST transactions. You simply specify a URI as if it were a GET, and the class strips out the parameters for separate submission.

One item of particular interest in this class is that it allows you to send a separate parameter to the callback, which can be used to establish a context (callbacks are usually pretty context-free, and AJAX doesn't have much support for reestablishing the context).

NOTE: The Thread Driver (as of Version 1.4.19) will probably be my implementation choice henceforth. It is lighter and more robust than the queue.

NOTE: Thanks to Jeremy Lucier, who gave me a new object instatiation method that covers variants of Microsoft XMLHTTP class. I have implemented the new method in 1.4.17.

NOTE: Thanks to Diane Benroth for alerting me to an issue with IE (Surprise, surprise, surprise) that I was able to track down and fix toot sweet in Version 1.4.3.

UPDATE: You might like my AJAX Threading Driver.

UPDATE: In 1.4.10, I added a "SimpleAJAXCall()" function that makes this class the very simplest AJAX implementation I've ever seen. Read the comments in the JavaScript File.

If you want to see SimpleAJAXCall() in action, check out this file. Do a "View Source" to see how truly, obnoxiously simple it is.

UPDATE: It turns out that I'm mistaken about my belief that you only get one timeout (Thanks for setting me straight, FotiMan). I'd let someone's bad implementation of it convince me wrong, and I should have done more research. In any case, this is good news, as it means I can implement some timeout handlers. I'll do that in an upcoming version.

Quick Form Workshop

Called 0 Times
preload preload

A More Involved Demonstration of Queued AJAX

Shim Shim Shim
preload preload preload