Asynchronous JavaScript Part 2 - The ADIJ Object

In a previous post, I discussed what ADIJ is.

ADIJ is now open source and you can get ADIJ here.

This is part 2 of my series on asynchronous JavaScript and today I will focus on how the ADIJ object itself works. In part 3 of this series, I will discuss how to use the object. Later in the series, I will introduce my AJAX object which is also open source and available along with ADIJ. These 2 objects share a simple interface and so can be interchanged fairly easily.

How does ADIJ work?
Whilst answering this question, we must bear in mind that ADIJ is an asynchronous tool which ultimately will make an HTTP request and indirectly handle the response of that request. JavaScript is simply the intermediate layer which processes the HTTP response and passes that response back to the ADIJ object.

ADIJ is an instance based tool. You create instances of the ADIJ object and apply properties to that instance. Each ADIJ instance is given a unique ID which is used to identify each ADIJ object. This is most useful when handling responses.

The following properties can be applied to each ADIJ instance (and ultimately each request made):

• URL - this is the URL which ADIJ will use for the src attribute of the script tag which will be injected into the document when the ADIJ request is sent. The response from this URL has to be JavaScript formed to work with ADIJ.
• onSuccess - this is the function which will handle the response. It is similar to the handler for onReadyStateChange in an AJAX request.
• scope (optional) - this defines the scope that the onSuccess handler will run within. Scope is a larger JavaScript topic which cannot be covered within this post. Suffice to say that if this optional property is supplied, it should be an object and defines the value of the this keyword in the onSuccess handler function.

Once you are ready to send your ADIJ request, call the send method. The ADIJ object will write out a script tag into the document which will look something like this:

<script type="text/javascript" src="MyADIJUrl.js?rid=ADIJ_1&uqid=1199900579224">

</script>

ADIJ will add 2 items to the querystring of the request:

• rid - this is the ADIJ request ID which the server will need to be aware of
• uqid - this is a date and time stamp of when the request was sent. This is used to stop ADIJ requests being cached.

How does ADIJ process the response?
When the server gets an ADIJ request, it needs to respond with JavaScript. It is very important that the interface developer works closely with an application developer to ensure the server side of the application is setup to handle ADIJ correctly.

The final response to the onSuccess handler defined on the ADIJ object will be JSON, but the response from the server will be a function call which will look something like:

Tools.ADIJ.prototype.handleResponse( id, json );

Tools.ADIJ is the ADIJ object itself.
Tools.ADIJ.prototype.handleResponse is a function on the prototype of Tools.ADIJ
id is the ID of the ADIJ request as passed to the server in the querystring of the request. This ID is auto-generated by the ADIJ object and automatically appended to the specified URL for the ADIJ request
json is the JSON object to pass back to the onSuccess handler defined in the instance of the ADIJ object given the ID id

By this method, multiple ADIJ requests can be sent from and handled by the client side code with ease.

In part 3 of this series, I will show just how simple it is to write the JavaScript code to use ADIJ.