The XMLHttpRequest object is supported in Internet Explorer
5.0+, Safari 1.2, Mozilla 1.0 / Firefox, Opera 8+, and Netscape 7. But the
creation of XMLHttpRequest object is different in Internet Explorer than the
other browsers. To use AJAX to request a data from the server we need to do the
following.
1. Create an XMLHttpRequest object.
2. Then using this object, request data from the server.
3. JavaScript will then monitor for the changing of state of
the request.
4. If the response is successful, then the content from the
data store requested will be returned as a response (the response can be in the
form of a String or XML).
5. Use the response in your web page.
Create an XMLHttpRequest object
The XMLHttpRequest object is the key to AJAX. Different
browsers use different methods to create an XMLHttpRequest object. Internet
Explorer uses an ActiveXObject. Other browsers use a built in JavaScript object
called XMLHttpRequest. The following code creates an XMLHttpRequest for all
browsers.
Listing 1
var aj_req;
try
{
// Firefox, Opera, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
alert('Your browser is not IE 5 or higher, or Firefox or Safari or Opera');
}
}
}
In JavaScript, if statements within a try section fail, then
the execution resumes from the corresponding catch block. Here we are first trying
to create an XMLHttpRequest using the built-in function, and if it fails then
we will try using ActiveXObject("Msxml2.XMLHTTP"). If that then
fails, we will try ActiveXObject("Microsoft.XMLHTTP"). If all these
fail, we will alert the user that his/her browser does not support AJAX.
Request for a web page
Now that the XmlHttpRequest object is created, we need to
send a web request using the open method.
Listing 2
aj_req.open ("GET", "ajax.php");
aj_req.send(null);
Here, aj_req is the XMLHttpRequest object. It will request
to the server for test.php using the GET method.
Monitor for the response of the request:
In this step we need to check the actual state of the
XMLHttpRequest object. We need to change the field value only if the state is
complete. For doing this we can assign a function to aj_req.onreadystatechange
(here, aj_req is the XMLHttpRequest object), like below.
Listing 3
aj_req.onreadystatechange = handleResponse( );
function handleResponse( ){
if(aj_req.readyState == 4 && aj_req.status == 200){
//returned text from the PHP script
var response = aj_req.responseText;
}
}
The readyState property holds the status of the server's
response. Each time the readyState changes, the onreadystatechange function
will be executed. Here are the possible values for the readyState property.
State Description
0 The request is not initialized
1 The request has been set up
2 The request has been sent
3 The request is in process
4 The request is complete
Once you take care of catching the readyState, you need to make
the actual request using the open() and send() methods. The open method is what
we use to set up the request. It takes in a request type (i.e. "post"
or "get"), the page URL, and a boolean value indicating whether we
are making an asynchronous call or not. In this case we are, so it is true. So
to set up the open() call, we use GET, ajax.php for the url, and set the
asynchronous boolean to true.
Get the response
The response will be as string or as XML. The data sent back
from the server can be retrieved with the responseText property as string. Use
responseXML for getting the response as XML.
Use the response on your web page
When we get the response back, we have to do something with
the data sent back. We use the HandleResponse() function to display the
information sent back, when the readyState is 4. The HandleResponse() function should
look like the following:
Listing 4
function HandleResponse(response)
{
document.getElementById('ResponseDiv').innerHTML = response;
}
All this function does is takes the response from the
request and puts it in a div on our page. That is all our JavaScript. We need
to make our ajax.php file, which is one monstrous file, full of complex code.
Listing 5
<?php
echo "This is a php response to your request!!!!!!";
?>
One echo statement is all we really need for this tutorial.
The concept is that all we need to do is send something back to the XMLHTTP
object. In the simplest form, this is just some text, where PHP's echo
statement works perfectly. This will return our statement back and JavaScript
will display it on the page.