Ajax in a minute!

The Ajax, a term that makes me some excited as it provides a lot of terrific functions and instant response to the input of the data from the user. However, the Ajax (Asynchronous Javascript and XML) seems to be very complicated for most of the beginners, therefore I would like to share the very very simple concepts of Ajax, hope all of the beginners could learn from it within a few minutes and write the first Ajax program.

I’ve found some of the useful web links that really simple and easy to read. And I did try to make my first Ajax programme by following it step by step.

Different examples of ajax links
http://www.fiftyfoureleven.com/resources/programming/xmlhttprequest/examples


The major component of Ajax consist of:
1. Client-side language such as Javascript
2. CSS/XHTML
3. Server-side language such as Python, PHP
4. XML

For the beginners, Ajax is not a technology, as mentioned by other classmates in the blog last time, it is a combination of different stuff together to form a new standard of the web design. It is quite useful as it requires no reloading or regenerating the webpage for the information entered by the users, that is, fast and require relatively less processing time for the webpage to display dynamic information.

Remote Scripting
XMLHttpRequest is the core of the Ajax as we need to request objects from the server and listen to the response from it.

Here are the simplified version of the article I read, so that you could at least picking up some of the very basic ideas on how Ajax is working.
Retrieved fromhttp://www.sitepoint.com/article/remote-scripting-ajax on 6th March 2006 from World Wide Web.

Creating HTTP Request from the browser
var requester = new XMLHttpRequest();
But sometimes, IE have some different definition of the creation of object as they use ActiveX, so it is good to check whether the browser is IE or not, to implement different declarations.

try {
var requester = new XMLHttpRequest();
}
catch (error)
{
try
{
var requester = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (error)
{
return false;
}
}


After declaration, we could start using the object.

Sending request from the browser
requester.open("GET", "/feed.xml");

we could use open() for the initalization of the request to get the data from the server, for the above example, it use GET method to get the feed.xml file from the server.

After open(), send() is used for sending extra data such as the parameters of the cgi programmes. Sometimes we will not use it, therefore we could simply write it as

requester.send();

However some browser such as Mozilla is not support the blank parameter of send(), therefore , we need to write it as requester.send(null);

For the GET example,
requester.open("GET", /query.cgi?name=Bob&email=bob@example.com);
requester.send(null);

For the POST Example,
requester.open("POST", "/query.cgi");
requester.send(name=Bob&email=bob@example.com);

After we send the data or request, we would like to listen to the response or the server’s working status and changes, therefore we need to set up a function for the listening of server side action

requester.onreadystatechange = stateHandler;
and the function stateHandler()

function stateHandler() {
if (requester.readyState == 4) {
if (requester.status == 200) {
success();
}
else {
failure();
}
}
return true;
}

The ReadyState has the following numbers for different status:
· 0 – Uninitialised
· 1 – Loading
· 2 – Loaded
· 3 – Interactive
· 4 – Completed

Therefore requester.readyState == 4 means if the request is completed then the whole process is said to be totally complete and the data is successfully retrieved.
After we retrieved the data, two of the variables would store the data, depends on your preference and the complexity of the data, you can use XML or plain text string for the data. The two common variables are responseText, responseXML
For the responseXML, it use the DOM structure for storing of data, therefore we could retrieve any of the items in the variable and make changes.

var nameNode = requester.responseXML.getElementsByTagName("name")[0];
var nameTextNode = nameNode.childNodes[0];
var name = nameTextNode.nodeValue;

Demo of Ajax – Contact List by Andrew
http://cs5281.andrewmok.net/ajax/ajaxdemo.html

Demo from the selected website
http://cs5281.andrewmok.net/ajax/example3.html