Ajax stands for Asynchronous JavaScript and XML and is a set of techniques for creating highly interactive web sites and web applications. The desired result is to update the website pages, using data fetched from the Internet, without refreshing the web page in the users’ browser.
The communication between the server and the web browser is done using XMLHttpRequest objects manipulated through a JavaScript function. The goal is to create a JavaScript function which, based on users action, will change the data displayed on users’ browser following some well defined rules.
Creating the XMLHttpRequest Object
This object is built in the browser and, depending on what browser you are running the code, it is accessed in different way. Netscape Navigator (version 7.0 and later), Apple Safari (version 1.2 and later), and Firefox let you create XMLHttpRequest objects with code like this:
|
1 |
XMLHttpRequestObject = new XMLHttpRequest(); |
In case that you are dealing with Internet Explorer the object can be created using code like this:
|
1 |
XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP"); |
The object is accessed in those browsers through the browser window object, and checking it’s presence means that you are dealing with certain web browsers.
For Netscape, Safari and Firefox the code will be as follows:
|
1 2 3 |
if (window.XMLHttpRequest) {
XMLHttpRequestObject = new XMLHttpRequest();
} |
For Internet Explorer we’ll have:
|
1 2 3 |
if (window.ActiveXObject) {
XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
} |
Although the XMLHttpRequest object supported in different browsers differs we can use the same basic properties and methods of this object.
So, the code used to create XMLHttpRequest object for different web browsers will be:
|
1 2 3 4 5 6 7 |
var XMLHttpRequestObject = false;
if (window.XMLHttpRequest) {
XMLHttpRequestObject = new XMLHttpRequest();
}
else if (window.ActiveXObject) {
XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
} |
Opening the XMLHttpRequest Object
It’s time to open the XMLHttpRequest object. Here’s how you use the XMLHttpRequest object’s open method in general (items in square brackets are optional, and items in italics are placeholders that you fill in yourself):
open(“method”, “URL”[, asyncFlag[, "userName"[, "password"]]])
Where method is the HTTP method used to open the connection, such as GET, POST, PUT, HEAD, or PROPFIND, URL is the requested URL, asyncFlag is a boolean value which indicates if the call is asynchronous (default value true), userName is the user name of your account and the password is the password of your account.
The method used to open the connection will be for this case the GET method. After the connection is open, we can start to open the XMLHttpRequest object and to configure it in preparation for connecting to the server and downloading data.
This piece of JavaScript code will prepare the object:
|
1 |
XMLHttpRequestObject.open("GET", dataSource); |
Note that using the open method like this configures the XMLHttpRequest object and it does not connect, or open any connection to the server.
The onreadystatechange property contains the name of the event handler that should be called when the value of the readyState property changes (read/write). Using this property we can call an anonymous function that will open the connection to the server and to download the necessary data. Inside the anonymous function, we need to check on the data that’s been downloaded: is the download complete and are we ready to use that data? We can determine that with two properties of the XMLHttpRequest object: readyState and status.
The value of 4 for the readyState property means that the download is complete and the value of 200 for the status property means that is completed OK. Checking these values with an if statement which returns the true value means that we can go further with our request.
The JavaScript code will be as follows:
|
1 2 3 4 5 |
XMLHttpRequestObject.onreadystatechange = function(){
if (XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200)
{
//here we'll place the necessary code to fetch the data}
} |
To recover the downloaded text we can use the XMLHttpRequest object’s responseText property. That property is where the XMLHttpRequest object stores downloaded plain text. If we use XML data the object property will be responseXML (we’ll use it a little bit later) which is common for all major browsers.
The JavaScript code will be:
|
1 |
documentGetElementById(divID).innerHTML = XMLHttpRequestObject.responseText; |
where the element with the divID id will be the placeholder for our requested data.
