Asynchronous JavaScript Part 3 - Using ADIJ

In part 1 and part 2 of this series on asynchronous JavaScript techniques, I have introduced the ADIJ object. Now, I will demonstrate just how easy it is to use the object with an extremely simple code example.

var myAdij = new J2.ADIJ( {

URL: "/getADIJdata.json",

onSuccess: successHandler

} );

myAdij.send();

function successHandler(myAdij) {

var jsonData = myAdij.getResponseText();

....

}

In this example, I create a variable called myAdij which is set to a new instance of the ADIJ object. I pass an object literal of values into the constructor of the ADIJ object containing the URL which I wish to request and the success handler which will get called when the ADIJ object gets a response to this request.

I then call the send method which will send the request.

When the ADIJ object gets its response, successHandler will be called. It will be passed one argument which is a different form of the ADIJ object now containing a method getResponseText which will return the JSON object sent as the response to the ADIJ request.

Once successHandler had finished being executed, the original ADIJ object can be garbage collected by the browser assuming there are no other live references to it.

It is also possible to create and send the ADIJ request in one line of code and without assigning it to a variable. This can be useful in instances when the original ADIJ object will not be needed again.

new J2.ADIJ( {

URL: "/getADIJdata.json",

onSuccess: successHandler

} ).send();

function successHandler(myAdij) {

var jsonData = myAdij.getResponseText();

....

}

Note that the send method is now called in line with the construction of the new ADIJ object.

It is as simple and easy as that! So go, play and enjoy and when this series returns, we will be discussing AJAX and particularly JSquared AJAX.

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.

Asynchronous JavaScript Part 1 - ADIJ

This is the first in a series of posts regarding asynchronous JavaScript techniques and tools.

In this edition, I will introduce ADIJ. I will ultimately provide code and examples for each of the tools I recommend using.

The What
Asynchronous DOM Injected JSON or ADIJ is what I have termed a fairly common technique found today for getting data from a server using JavaScript in an asynchronous fashion. This technique is more commonly known as the script tag hack.

The How
Its a very simple technique which involves simply adding a script tag with a valid src attribute to the DOM tree. When the script tag is added to the document, the browser will make a request to the URL specified in the src, and load the returned content which will be interpreted and executed immediately.

The Why
I have found ADIJ most useful thus far in mapping mashups. The data returned will normally be in JSON format and this is efficient for parsing and adding points to a map. But the technique can work very well for any public data which needs to be delivered asynchronously to the browser.

Any issues?
Any data returned using ADIJ can be intercepted and in theory, scripts can be injected into your page. However, I normally ensure that I only accept valid JSON containing Objects and Strings. I would never execute a function returned by this technique. This is not a major issue, but one to be aware of. Only ever use ADIJ for fully public data, never for secure data. Be aware that all cookies are provided when the request is made.

Why ADIJ?
ADIJ is more than just a silly name for the script tag hack. ADIJ is a helper object which can allow you to send multiple requests on demand and receive valid JSON data back with co-operation from the server.

Using ADIJ, you provide a handler function (similar to the callback in AJAX) which will receive the JSON data when the request completes successfully. The ADIJ object will manage your requests and handle all the responses for you, ultimately passing the response back to your specified handler function.

The ADIJ object provides a powerful first item in your asynchronous JavaScript toolkit.

In part 2 of this series I will go through the ADIJ object and provide an example.