Complete Ajax Tutorial Step by Step

AJAX is a buzzword these days. What really is AJAX ? Is it a new technology ? New framework ?
AJAX ( Asynchronous Javascript And XML ) is mainly used for manipulating the part of the web page and transfering some computation to the client system. Using this technology the page need not be reloaded when a part of the page changes because of user actions. This can be achieved by dynamically getting the data from the server when user interaction happens using the XMLHTTPRequest object. This is the new approach of developing rich client application.
AJAX is the mix of :

XML and DOM

Javascript

XMLHttpRequest Object.

HTML ( or XHTML )

CSS

The traditional problem we have is, a lack of interactiveness for web applications like Desktop applications. When we submit a form or request some data from the server from the client side, the client has to wait till the request is processed and response is sent back to the client. If the server side request handler is taking long time to process the request, the client has to wait till the response comes back, probably with "working-in-background" mouse pointer or "Busy" mouse pointer. This is really annoying to the users and if user clicks many times on the windows that’s working on the request, OS may report that window as "Not Responding" and shows a blank white screen with just the title bar appearing (referring to IE on Windows). And users like me will definitely go to the taskbar and try to end the process. What if we can do this request processing work in the background asynchronously not disturbing the front-end screen and display a proper and relevant message "Processing Request" or "Waiting for reply" and allow the user to continue with some other tasks in the same window.

A Simple usecase:

In the web application I am working on has user selection field, which can be used to select any corporate user. (This is used to select users in a HTML form). Once the user selects "user selection" field and selects the particular corporate user, then the information regarding the selected user , like phone number, mailstop, mail address, manager, will be displayed in other fields of the form. The present solution developed waits till the request is processed and user can’t do any other task, like filling up other fields of the form in the same page. And sometimes, it takes nearly 30 seconds to 1 min for the response. If the user tries to click the window two or three times during this period then a blank window will appear and nothing works. And as I told you before, users like me will definitely kill the window using Task Manger and I have done that many times. This is a real annoying situation for the end user. This can be quite enough for a user to stop using the application altogether. So, what if we process that request of getting user information in the background asynchronously and still allowing the user to work on other fields of the form and process the information once we get the response from the back-end server ?
This kind of situations can be very well handled using AJAX, which has A ( Asynchronous ) at it’s core. Let’s get to the code and see how we can use AJAX in an application.

XMLHttpRequest Object:

One of the core component in AJAX framework is XMLHttpRequest object which allows asynchronous processing. XMLHttpRequest object also supports events. So, we can take actions whenever that’s necessary instead of continously checking for the status of the request. For example, we can just set a event handler to execute when the request is completed and response is received and continue with other tasks in the page and or wait for user input. This object also supports XML content. If the response is XML content then we can directly get a XML DOM object instead of taking the string and constructing the XML DOM object explicitly. Let’s look at the features of this object.

Object Methods (Most commonly used ):

open( method, URL, [isAsynchronous]) : This method is used to tell XMLHTTPRequest object which url to be considered to open the connection, what’s the method to use (GET/POST/PUT) and whether to process this request (accessing the specified URL) asynchronously or synchronously. The third parameter is option and by default it’s true, meaning that the request is processed asynchronously. The other optional parameters include username and password.
Example:
var xmlHttpRequest; //XMLHTTPRequest object
...... ( object construction goes here...will look into this later)
xmlHttpReuqest.open("GET","http://www.geocities.com/keelypavan/test.xml",true) // This method tells the object to get using GET method asynchronously. This is a dummy URL I used for demonstration purpose.
Note: This open doesn’t really open the connection to the server. We should call send(..) method for the request to be actually sent.

send( parameters as string ) : This method is used to actually send the request to the server for processing. Parameters if any specified will be sent to the server. Typically if the method id GET then the parameter will be null or an empty string or call the method without any parameters. If the method is POST then the parameter string would be the POST parameters in query string format, i.e. name=value pairs delimited by "&".
Example:
var xmlHttpRequest; //XMLHTTPRequest object
xmlHttpRequest.send( null ); //for GET
xmlHttpRequest.send( "name1=value1&name2=value2....");
Note: Make sure to set the onreadystatechange event handler before using the send method on the object.

abort():This Method aborts the request operation.
setRequestHeader( headerName, headerValue): Sets the request headers that will be sent to the server with the request.
Example:
var xmlHttpRequest; //XMLHTTPRequest object
xmlHttpRequest.setRequestHeader("IF-MODIFIED-SINCE","Sat, 04 Feb 2006 17:47:00 PST");
getResponseHeader( headerName ): Gets the specified response header sent by the server. Example response header are, content-type, content-length etc.
getAllResponseHeaders():Gets all the response header with header name and value as a string.

Properties:
readystate: Returns the ready state of the http request, which represents the internal state of the obejct. Values are listed below.

0	Unintialized
1	Loading
2	Loaded
3	Interactive
4	Completed

onreadystatechange: Sets the event handler function which will be called everytime there is a state change (readystate value change).This method is useful as we are requesting the resource from server asynchronously not waiting for the response. So, applications can use this method to come back and perform the necessary action when the request is completed.

status: Returns the status sent by the server. This status is HTTP status code. At the high level these codes mean:

1xx	Informational
2xx	Successful
3xx	Redirection
4xx	Client Error
5xx	Server Error

statusText:Returns the text message (string) associated with the status code returned by the server.
For Example: Server send "OK" with the status code 200.

responseText: Returns the content of the response as a string returned by the server. Using this properly when the object is not is completed "readystate" will give an error.

reponseXML: Returns the XML DOM Document object if the response content is XML. For this to work, the server should send the XML content with content-type set as "text/xml" otherwise the responseXML will be empty. This is an important thing for developers as sometimes everything would be fine, the response will be XML content and XML will be well-formed but the responseXML method will not return DOM Document object.
If the response content is not well-formed XML, then the responseXML will return DOM Document with the parseError properly set so that applications can be aware of the problem.

Example:
Now let’s take an example and see how AJAX works.
Note: The sample application I developed works in IE, will try to develop a cross-browser app soon.
The sample application gets the RSS feeds from http://www.traffic.com/ site and displays them in the page.

Note: As this application tries to get the RSS feeds from traffic.com site, the security option allowing access to other domain resources should be enabled.
Object Creation:First let’s look at the object creation.
Object creation code:
if( window.XMLHttpRequest )
{
try{
xmlHTTPObj = new XMLHttpRequest();
}catch(e)
{
xmlHTTPObj = null;
}
}
else if( window.ActiveXObject )
{
try{
xmlHTTPObj = new ActiveXObject("MSXML2.XMLHTTP");
}catch( e )
{
xmlHTTPObj = null;
}
if( xmlHTTPObj == null )
{
try{
xmlHTTPObj = new ActiveXObject("Microsoft.XMLHTTP");
}catch(e)
{
xmlHTTPObj = null;
}
}
}

This code uses the object detection technique to find out whether the object is defined in the browser environment. If yes, then this code creates that particular object and returns it. The other way of creating this object is using browser detection technique, meaning, check which browser is executing this piece of code and create the object accordingly. If it can't create the object, it would return a null value.

Sending Request:
Piece of code used for sending request:

document.getElementById("trafficDetails").innerHTML = "Loading Data ...";
var selectedCity = obj.options[ obj.selectedIndex ].value;
if( selectedCity != "" )
{
xmlhttp.open("GET",rssXMLBaseURL+trafficRSSXMLs.get( selectedCity ),true );
xmlhttp.setRequestHeader("If-Modified-Since","Thu, 26 Jan 2006 00:00:00 GMT");
xmlhttp.onreadystatechange = processRequest;
xmlhttp.send( "" );
}
else
{
document.getElementById("trafficDetails").innerHTML = "Select a city";
}

it uses, open(...), setRequestHeader(...), onreadystatechange, send() with the XMLHttpRequest object.
The first method used with XMLHttpRequest object is open(...). This method assigns the HTTP method to use to get the resource, URL and asynchronous flag.
setRequestHeader method is used in this case to check to see if the server resource has changed after the specified date and time. This has been set to a past date to get the content everytime.
onreadystatechange(..) method is used to set the event handler method.
At this point, the request is not yet sent but all other parameters are set. The next method send() transmits the HTTP request to the server. Be sure to set event handler method, onreadystatechange, before using send() method on the object.

Event Handler Method ( i.e. processRequest ): This method will be called every time there is a change in the readystate of the object. This method checks the readystate value and if it’s in completed state ( value 4 ) then it tries to see what’s the status code returned by the server. If status is 200 (successful) then it tries to get the content with responseXML and transforms using XSLT. You can get the XSLT source. If the status code is not 200, then it reports an error string statusText.
The piece code is:
if( xmlhttp.readystate == 4 )
{
var divObj = document.getElementById("trafficDetails");
if( xmlhttp.status == 200 )
{
divObj.innerHTML = xmlhttp.responseXML.transformNode( xsltDoc );
}
else
{
divObj.innerHTML = "Could not load data";
alert( "Error:"+xmlhttp.statusText );
}
}
End of example:

Conclusion:
AJAX is very much useful to get the dynamic content from the server. This can be used to get the content of from the server even after the page load, in better terms, lazy loading and create very rich and interactive applications.

Data Interchange formats for Ajax based applications using XML and JSON

With the introduction of Ajax, the classic web-applications are moving towards sending data instead of content to the web browser (in most of the cases). The emphasis on data interchange formats is more than before. This article points out available data interchange formats.

If you consider a normal web-application (non-Ajax), server sends some content (normally, HTML content) and like a faithful servant, web browser displays it and it may have Javascript working but to a limited level. But when we talk about richness of the application, we need something more than this. Most part of how we display the content should be left to the application running in browser, so that it can change the content or even look and feel dynamically, i.e. Ajax app, especially Javascript.

As we all know, the XMLHttpRequest is the core component of Ajax and it communicates with the server to get data to display in the browser without any reload of the page. Different applications use different data formats based on their application needs.

Following types of data interchange I can think of in the industry now.

- XML (eXtensible Markup Language)
- JSON (Javascript Object Notation)
- String with delimiters
- Script-centric approach
- Classic way of sending content.


Well, first three formats together can be considered data-centric approaches. But for clarity I am separating them. Let’s discuss each of the formats individually.

XML:

XML is a web standard for data interchange formats. It’s been around for quite sometime now. The support for XML in Javascript is very good as most of the browser implemented XML DOM specifications. The main usage of XML is that structured and hierarchical data can be represented very well and it’s readable by human beings. This comes with a cost of including meta-data, which describes what that data represents. Of course, I have seen many XML documents, which you can’t make out anything from but let’s keep that aside for now. One good thing about this is its pure data representation, which lacks in HTML. (HTML represents data intermingled with styles and formatting.)

Once you get the XML content as a response to the client-side you can use XSLT to transform the data into HTML content or you can use XML DOM API to parse and access XML and form HTML content, may be using innerHTML or standard DOM API.

Let’s take an example and see how we can represent the same data/content in all the formats. The example I am going to take is folder contents’ information. The XML is self-explanatory, so I am not spending much time explaining what it represents.

<?xml version="1.0"?>
<items>
<item>
<name>Test Document</name>
<type>document</type>
<creator>Test creator</creator>
</item>
<item>
<name>Test Folder</name>
<type>folder</type>
<creator>Test Creator 2</creator>
</item>
<item>
<name>Test Shortcut</name>
<type>shortcut</type>
<creator>Test Creator 3</creator>
</item>
</items>
JSON:

JSON is a light-weight data interchange format. It’s a text (string) representation of Javascript objects. An object in Javascript is represented in key, value pairs. A key is a string enclosed in double-quotes whereas the value can be number, string, boolean (true or false), object, array or null. Following paragraph explains JSON format in brief.

An object is a set of name, value pairs and it’s enclosed in "{" and "}". Name and value is separated by " : " and Name, value pairs are separated by " , ".

An array is ordered collection of values and is enclosed in "[" and "]" and values are separated by " , ".

Name is a string enclosed in double-quotes.

Value can be anyone of the following. String, Number, Boolean (true or false), Object, Array, null.

The advantage of JSON is that it’s more compact than XML format and parsing JSON is a lot simpler than XML. You just need to pass JSON string to eval of Javascript or you can also download JSON parsers for different programming languages from http://www.json.org/. As we have parsers for most of the famous programming languages, it makes JSON a good data interchange format. I know that a lot of people think that eval is very evil but doing eval once to evaluate the JSON string will not cause any big performance impact. But if the data grows larger then definitely JSON will not be a good option.

Example: Let’s take the same example I represented in XML and write that in JSON format.

{items:[
{"name": "Test Document", "type": "document", "creator": "Test creator"},
{"name": "Test Folder", "type": "folder", "creator": "Test Creator 2"},
{"name": "Test Shortcut", "type": "shortcut", "creator": "Test Creator 3"}
]}

String with delimiters:
Though it’s not a standard to use a plain string with delimiters as the response format, it has some advantages. We can use regular expressions or split the string into pieces using the delimiter and use the data as an array. Not much of processing is required for parsing the string.

The problem with this approach is that we need to rely on the position of the elements. And if there is any change in the positions of the elements (data) then it requires a change in the client side code. And representing deep hierarchical data is very difficult and error-prone in this approach.

Example:The data represented in two examples above could be represented in this approach as:

Test Document#document#Test creator$$Test Folder#folder#Test Creator 2$$Test Shortcut#shortcut#Test Creator 3

As you see this format is very compact because it doesn’t contain any meta-data but as the nested ness of data increases, like corporate taxonomy, representing that data is this fashion would definitely be a problem.

Script-centric approach:
In this approach a piece of script will sent from the server like assigning values to variables, function calls, which will be dynamically evaluated at the client side to perform the necessary actions.

The disadvantage of this approach is that it assumes some Javascript environment (like some functions defined in the page) at the client side. This means more coupling with the response with the page that’s requesting the resource.

Example: As we can’t represent data as-is and there will be piece of Javascript code as a response in this approach, there could be multiple ways you can represent this.

Response:
var matchingItems = {items:[
{"name": "Test Document", "type": "document", "creator": "Test creator"},
{"name": "Test Folder", "type": "folder", "creator": "Test Creator 2"},
{"name": "Test Shortcut", "type": "shortcut", "creator": "Test Creator 3"}
]} //new lines are just for clarity.

someMethod( matchingitems,… )

Content-Centric Approaches:

In the content-centric approach, the response from the server contains HTML content. So, the client side application (Javascript) has to take the content as is and place the content in any container using innerHTML or related methods. The advantage of this approach is that there is no explicit parsing of the data required. I used “explicit”, because internally when you use HTML content, the data has to parsed and shown in the web page. But the disadvantage is that it’s data with formatting tags. If you want to reuse the data of a response in this approach then we have to rely on DOM methods to retrieve the data, which is cumbersome.

Example:

As the response would be in HTML format, we can represent this in many ways depending on the need. Here is a way:

Response:

<div><span>Test Document</span><span>document</span><span>Test Creator</span></div>
<div><span>Test Folder</span><span>folder</span><span>Test Creator2</span></div>
<div><span>Test Shortcut</span><span>shortcut</span><span>Test Creator3</span></div>

We can take this content as-is and insert as HTML content in any of the allowed elements using innerHTML (or related) method. There’s not much processing required at the client side.

Sites/Apps using these formats:

XML:

Netflix

Dell

Google suggestions toolbar (new beta)

Script-centric approach:

Google Suggest

JSON format:

Yahoo provides JSON for its web services.

Conclusion: Depending on application needs, appropriate data interchange format has to be chosen. This article just describes the options available and the decision is yours.