AJAX allows web pages to be updated asynchronously by exchanging small amounts of data with the server behind the scenes. This means that it is possible to update parts of a web page, without reloading the whole page. Classic web pages, which do not use AJAX, must reload the entire page if the content should change. Examples of applications using AJAX: Google Maps, Gmail, Youtube, and Facebook tabs.
AJAX was made popular in 2005 by Google, with Google Suggest. Google Suggest is using AJAX to create a very dynamic web interface: When you start typing in Google's search box, a JavaScript sends the letters off to a server and the server returns a list of suggestions.
With AJAX, the JavaScript does not have to wait for the server response, but can instead:
1. execute other scripts while waiting for server response
2. deal with the response when the response is ready (fully delivered to the browser).
To get the response from a server, use the responseText or responseXML property of the XMLHttpRequest object:
responseText — get the response data as a string responseXML — get the response data as XML data
When a request to a server is sent, we want to perform some actions based on the response. The onreadystatechange event is triggered every time the readyState changes. The readyState property holds the status of the XMLHttpRequest. Three important properties of the XMLHttpRequest object:
onreadystatechange — Stores a function (or the name of a function) to be called automatically each time the readyState property changes 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