AJAX - A quick revision

AJAX

1. AJAX = Asynchronous JavaScript and XML

2. AJAX is the art of exchanging data with a server, and update parts of a web page - without reloading the whole page.

3. Examples of applications using AJAX: Google Maps, Google Suggest, Gmail, Youtube, and Facebook tabs. AJAX was made popular in 2005 by Google, with Google Suggest.

4. AJAX is based on internet standards, and uses a combination of:

            1. XMLHttpRequest object (to exchange data asynchronously with a server)

            2. JavaScript/DOM (to display/interact with the information)

            3. CSS (to style the data)

            4. XML (often used as the format for transferring data)

 5. AJAX applications are browser and platform-independent!

Disadvantages

1. Javascript dependency. It will not work if javascript is blocked.

2. View source is allowed and anyone can view the code source written for AJAX.

3. Debugging is difficult.

4. Complexity of the code makes it difficult for web developers.

5. Search engines would not be able to index an AJAX application.

6. Bookmarking and Back Button functionality of browser is affected.

The XMLHttpRequest Object (and ActiveXObject)

1. The XMLHttpRequest object is used to exchange data with a server behind the scenes. This means that it is possible to update parts of a web page, without reloading the whole page.

2. All modern browsers (IE7+, Firefox, Chrome, Safari, and Opera)  support the XMLHttpRequest object (IE5 and IE6 uses an ActiveXObject).

3. Properties: open, send, onreadystatechange, readystate, status, responseText, responseXML

GET vs POST

GET is simpler and faster than POST, and can be used in most cases.

However, always use POST requests when:

            1. Sending a large amount of data to the server (POST has no size limitations)

            2. Sending user input (which can contain unknown characters), POST is more robust and secure than  GET

ReadyState

Holds the status of the XMLHttpRequest. Changes from 0 to 4:
0: request not initialized
1: server connection established
2: request received
3: processing request
4: request finished and response is ready

Note: The onreadystatechange event is triggered four times, one time for each change in readyState.

Status

200: "OK"
404: Page not found

Kinds of Response:

1. responseText

2. responseXML

Note: While sending XML request to server, header of the request must be mentioned as

xmlhttp.open("GET","result.xml",true);

xmlhttp.onreadystatechange=myfunction;

request.setRequestHeader(“Content-Type”,”text/xml”);

xmlhttp.send();