Some common examples of AJAX include Google's auto-complete responses in the search field. As soon as you start typing in the search field, you see responses in real time, without any page refreshes.
Another example of AJAX is Google Maps. As you drag the screen in new areas, new map content loads from the server dynamically.
The infinite scrolling in Gmail and Google Reader also use AJAX functionality. As you scroll down, calls are made in the background to load new content from the server. The new content loads dynamically, without requiring page refreshes.
Two Components of an AJAX Call
AJAX uses a new object to make the calls:
XMLHttpRequest. However, unlike other functions, AJAX splits the call and response into two separate steps. This division of steps with the call and response allows for the asynchronous element of AJAX.
The XMLHttpRequest Object
The first step is to create a new
XMLHttpRequest object. Because of some cross-browser incompatibility in calling the
XMLHttpRequest object, you have to create a conditional statement to account for Internet Explorer. With this conditional statement in mind, you create the new object as follows:
This above code doesn't specify exactly where on the server the request is being made. However, before you specify more details about the request, you have to specify how to handle the response that will come back from the server.
To handle this response, you use the
Now that you've defined how to handle the responses from the server, you can write a more specific request to send. The specific request might look as follows:
AJAX calls are more advanced and would contain more detail, but this is the basic pattern of the call.