The purpose of this article is to give the reader a basic understanding of AJAX
-
Table of Contents
Asynchronous JavaScript and XML
“Ajax is a set of technologies that allow web applications to provide rich interaction, just-in-time information and dynamic interfaces without a required page refresh” – slides What this means is that JavaScript can be used to make HTTP requests to a server without the need to reload the page. HTTP requests can be made and responses received, completely in the background and without the user interface being interrupted.
The technologies used to accomplish this is DHTML (HTML, CSS, JavaScript) and the XMLHttpRequest( XHR ) JavaScript object.
Implementing Ajax means understanding JavaScript triggers (events), XMLHttpRequest object, and knowing how to update the DOM.
Triggers (events)
JavaScript events or timer triggers ( onDblClick, onSubmit, onFocus, etc…) is how we are able to initiate a
XMLHttpRequest
XMLHttpRequest is a JavaScript object that lets you make an HTTP request and attach a callback to the response. Since the response has a callback, the browser is free to continue responding to user input. The program
Data returned from the XMLHttpRequest object can be in the form of plain text, html, JavaScript and Json.
The first step in using a XMLHttpRequest object is creating the object itself. Different browsers use different syntax to create an XMLHttpRequest object.
var xhr = new XMLHttpRequest(); //Firefox, Opera, Safari, etc…
var xhr = new ActiveXObject("Microsoft.
Next step would be to attach a function to the XMLHttpRequest property onreadystatechange. The onreadystatechange property is an even handler that is triggered every time the state of the request changes. Attaching a function to this event handler allows us to execute this function every time the status changes while the XMLHttpRequest is receiving the response. This allows the XMLHttpRequest object to handle the web applications HTTP request/responses and the web applications user interface will not have to wait on a HTTP transaction.
xhr.onreadystatechange = handler; //onreadystatechange is a eventlistener on the xhr object
function handler()
{
// only handle DONE requests and 200 status codes
if (xhr.readyState == 4 && xhr.status == 200)
{
alert(xhr.responseText);
}
Ready State values Definition
0 – UNSENT The request is not initialized
1 – OPENED The request has been set up
2 – HEADERS_RECEIVED The request has been sent
3 – LOADING The request is in process
4 – DONE The request is complete
Status codes Definition
200 OK (The request sent by the client was successful )
400 Bad Request (The syntax of the request was not understood by the server)
401 Not Authorised (The request needs user authentication)
404 Not Found (The document/file requested by the client was not found)
500 Internal Server Error (The request was unsuccessful due to an unexpected condition encountered by the server)
503 Service Unavailable (The request was unsuccessful to the server being down or overloaded)
After we have attached a function to the onreadystatechange event handler, we will open a http connection with the specified HTTP method (get, post, etc...).
xhr.open("GET", url, true);
The first parameter specifies the HTTP method.
The second parameter can be either an absolute url or relative url.
Absolute url: http://Myserver/Mypath/Myfile.
Relative url: ../Myfile.java?var1=3
The third parameter is if you want the call to be asynchronous our not.
HTTP Methods Definition
Head Primarily used by applications for discovering and tracking server support and network behavior
Get Retrieves documents
Put and Post Submits documents to the server
Delete Destroys resources or collections
The last step in setting up the XMLHttpRequest is to have the object send the request to the specified server. xhr.send(null);
More information about status codes at: http://www.w3.org/Protocols/
Updating the DOM In order to update the user interface after receiving a HTTP response via the XMLHttpRequest object you will have to use the DOM to add the information to the specific element.
Disadvantages
o Unable to use back button effectively. Page cannot connect with the browser history engine.
o Have to implement for each browser mostly IE and others
Mozilla, safari, or opera: new XMLHttpRequest()
IE: new ActiveXObject()
Fortunately all xhr objects have the same methods and properties
