Introduction to AJAX

Firstly

• What is AJAX (Asynchronous Javascript and XML) ?
  If you have used any of the google.com services (eg. gmail.com) then you have encountered an AJAX application. Remember, when you compose an email, type in an email address already in your address book, gmail auto suggests some emails matching what you have typed, YUP ! thats AJAX buddy. Another example would be google maps. Anyways
  AJAX is that technology through which we can update data without the need of refreshing that page in the browser. In other words, eliminating the need to reload an entire page to view a particular block of updated data.
• Is AJAX a new technology ?
  Well lets just say, its taken the internet by storm only recently. But it has been around ever since browsers had the ability to decode javascript.
• How does it work ?
  All you have to do is create an object of the XMLHttpRequest type, validate that it has been created successfully, point where it will go and where the result will be displayed, and then send it. That’s it !.
  To understand XMLHttpRequest you will have to understand HTTP Request and Response Fundamentals.

HTTP Request/Response Methods

HTTP Request/Response – Whenever we visit a website, a request is made by the browser to the web server, using http protocol (http://www.google.com – Ring a bell ?) using different request methods (GET,POST,HEAD etc – Common Request methods). The server sends a response back to the browser (200 OK, 403 Forbidden, 404 Not found, 500 Internal Server Error etc – Must have seen all this somewhere ?! Common HTTP Response Codes)

Phew ! That was about HTTP Request/Response Methods. Since AJAX uses an object of XMLHttpRequest it has its own set of properties . It is Listed Below.

XMLHttpRequest Properties

1. onreadystatechange – Used as an event handler for events that trigger upon state changes
2. readyState – Contains the current state of the object (0: uninitialized, 1: loading,2: loaded, 3: interactive, 4: complete)
3. responseText – Returns the response in string format
4. responseXML – Returns the response in proper XML format
5. status – Returns the status of the request in numerical format (regular page errors are returned, such as the number 404, which refers to a not found error)
6. statusText – Returns the status of the request, but in string format (e.g., a 404 error would return the string Not Found)

Disadvantages of AJAX

Ok ! The only disadvantage of AJAX is that, it won`t work if Javascript is disabled in the browser rendering all the user friendliness useless. But there are methods to make pages detect whether javascript is enabled and respectively execute ajax functions.

Well thats about all the basics about AJAX ! Lets see how to create an AJAX function.