AJAX Tutorial

While I would like to call this tutorial, "AJAX Tutorial", you may call it "Yet another AJAX tutorial" or whatever you like :).

AJAX BASICS
AJAX is short for Asynchronous JavaScript and XML. Though the name is new, the technology isn't. The main reasons for using AJAX are
1. Remote Procedure Calls (making posts to the web server without having to reload the page)
2. Javascript parsing capabilities for XML documents.

Before we can make a HTTP request, we will need to create an instance of XMLHTTPRequest class for Safari and Mozilla based browsers (Firefox, Netscape etc). For Microsoft Internet Explorer (MSIE) compatibility, we need to create an instance of Microsoft.XMLHTTP. The reason is because in MSIE, XMLHTTP functionality was implemented as an ActiveX object.

Static function:
Dynamic function

http_request.onreadystatechange = function(){
// code here
};

Creating a request (can use GET, HEAD and POST):

http_request.open('GET', 'http://www.ajax-xml.blogspot.com/atom.xml', true);
http_request.send(null);

3rd party URLs cannot be opened due to browser security features. Toggle the asynchronous mode using the third parameter. As documented on Mozilla.org,

If TRUE, the execution of the JavaScript function will continue while the response of the server has not yet arrived. This is the A in AJAX.

1. Create an instance for XMLHTTP request
2. Override the header returned from the server (to ensure mime-type header is set to always xml). This can be accomplished by calling the member function overrideMimeType for our instance of XMLHTTP object with parameters set to "text/xml".
3. Take care of the response returned by server.
4. Set the onreadystatechange property of HTTP object to the name of function that will be invoked when the server returns a response.
5. To use POST, we must use

http_request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

6. To use GET, we must append "escaped" variables to the URL.
7. HTTP server response: http_request.status == 200
8.

States of readyState (http_request.readyState == 4):
# 0 (uninitialized)
# 1 (loading)
# 2 (loaded)
# 3 (interactive)
# 4 (complete) - means full server response has been received and it's OK for us to continue processing.

To be continued....
AJAX XML


The following sources were consulted, referenced and used in this AJAX tutorial.

  post to Del.icio.us