Rolling Your Own AJAX (Part 1)

As AJAX has grown as a programming paradigm for the web, there has been an emergence of platforms to support development. I was lucky enough to work for a company that got into the web 2.0-game fairly early and was tasked with designing and creating a client-side framework along with some new form controls (the code I’m going through here was written about a year ago). Today, I’ll talk a little about some of the benefits and challenges of using AJAX in web user-interface design.

This was one of those rare projects where we were given adequate time to do a good job, so I spent a lot of time thinking about what some of the challenges were going to be, both for this and future implementations. AJAX creates an illusion of immediacy to the user by bypassing many of the redundant processes of a typical postback. Think about the lifecycle (we’ll do a simplified version) of an HTTP page request on the web.

1. The user makes a request by clicking a link or submitting a form


2. The browser makes a request to the destination web server


3. The browser receives the response as a text stream


4. The response is de-serialized into a document object


5. The page artifacts (images, video files, JavaScript and CSS files, etc) are identified, and latent HTTP calls are made for objects that are not available in the browser cache.


6. The browser paints the HTML page based on the document object and page artifacts

In an AJAX model, steps 4 - 6, are bypassed and the data from the request is simply inserted into the existing DOM. Three fairly expensive and unnecessary processes (because they were handled with a prior request) have been replaced with a lightweight operation. So how does an intrepid developer take advantage of this technological wizardry? Basically, the same object that is used by the browser to make server request is exposed and can be accessed through JavaScript.

It looks like this could get a bit long, so I think I’ll make it a trilogy. In the next part, I’ll dig into the hows and whys of the framework I put together for the aforementioned project, and see where it goes from there.