Recent Weblogs

Links I like

Agile Ajax, Event Driven XHR

An event driven approach for handling XMLHttpRequests.

This idea has been a long time coming, the original post began with Ajax.Service. The article describes how you can create a centralized object for handling XHR requests. This approach opened up many possibilities for specialized features such as bookmarking, history and other stateful problems encountered in ajax programming.

Trials and Tribulations

Prototype came very close and in most cases completely handled most of the inconsistencies in the XHR model in the browsers. My quarrel with prototype's approach is that the Ajax.Request class managed only a single instance of an XHR, you got to send that object once. Upon creation of this object, all listeners must be attached via properties in a config object sent to the constructor. What I envisioned as the ideal solution was a single object that encapsulated functionality of the application's server communications through methods that attached handlers that would in turn dispatch an event when the request had been received. This approach is advantageous because often times a given UI control will request data that it will never handle. For instance, a set of filters that retrieve grid data, the component that handles the filters executes the service method to retrieve the data, and then the component handling the grid listens to the "gridData" event and updates its UI with the fresh data.

Using my Roots

Although I had my quarrel with Ajax.Request I certainly couldn't abandon all of the incredible code in the prototype library. Function.bind is perhaps one of the most useful methods to ever be defined in ECMA. As well as $A and Object.extend. I've incorporated the pilfered code in a way that won't conflict if prototype is already in use.

The Shoulders We Stand On

  • EventDispatcher this class allows for a simple active observer pattern
  • Ajax.Service.Base a base class that extends EventDispatcher and uses an instance of Ajax.Request to handle internal XHR creation.


I recreated my old EventDispatcher class to work with the stripped down proto code, no longer having Class.create I simply used Functions and went from there. EventDispatcher has all of public methods that the AS3 equivalent does, but with one extra fun one, once. This little diddy will listen to the event for one dispatching and then remove itself. This use case comes in real handy when you have to initialize something for an event before regular processing can commence.


The AjaxService class extends from EventDispatcher and handles all of the transaction business. Its constructor takes three parameters, similar to a native XHR's open method, but with a little switch up, url, method and asynchronicity. URL as one can guess specifies the end point to the request and method defines with HTTP method it will use for the each request. This can be changed later with the "setMethod" and "getMethod" functions. The parameters are sent in with the send method. The big difference between the AjaxService class and Ajax.Request is an instance of AjaxService can be re-used for numerous requests. Another big feature boost is timeout functionality, allowing you to set the number of milliseconds that will be considered the maximum wait time for any request made by the instance. If a request is sent and times out, the timeout event will be fired so that user can be notified/accomodated.

AjaxService follows the factory pattern, producing an XHR for each request, handling the readystates and dispatching appropriate

Instance Code

Here is some sample code of what you can do with an instance.

The Google Code Page

I have also created an optimized version of Agile Ajax for Prototype 1.6 and Ext 2.0. I have provided some source below for inspection but when downloading a copy use the Google Code page for the most current versions.

The Demos

The Library

This is the Agile Ajax library in its entirety as of now. There are certainly some issues left but I took on the practice of launch early and often, see what you have to say and bring it back to the drawing board.

Comments are Disabled.