Have you heard the buzz? AJAX!

What is AJAX and what does it gives you? Before we will tackle on the implementation of AJAX, let us define it. AJAX is a shorthand for asynchronous JavaScript and XML.

AJAX is based on JavaScript and HTTP requests. It is a type of programming made popular in 2005 by Google (with Google Suggest). It is not a new programming language, but a new way to use existing standards.

With AJAX, a JavaScript can communicate directly with the server, with the XMLHttpRequest object. With this object, a JavaScript can trade data with a web server, without reloading the page.

AJAX uses asynchronous data transfer (HTTP requests) between the browser and the web server, allowing web pages to request small bits of information from the server instead of whole pages. The AJAX technique makes Internet applications smaller, faster and more user-friendly.

This tutorial will cover just the basics with AJAX, and we will start with the base object you need: a XMLHTTP Javascript object. With this object you call a server-side script and get the response back. Most browsers use the same Javascript object, but of course Microsoft has to be different, so they require their own. The following function will return the correct object:

function getXMLHttp()
{
var xmlHttp

try
{
//Firefox, Opera 8.0+, 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 does not support AJAX!")
return false;
}
}
}
return xmlHttp;
}

This code will, again, return an XMLHTTP object to use in our Javascript. What is going to happen is that we are going to use this object to make an HTTP request through Javascript. When we get a response back, we will simply place it in the page, nothing fancy. In order to make the request we use the following code:

function MakeRequest()
{
var xmlHttp = getXMLHttp();

xmlHttp.onreadystatechange = function()
{
if(xmlHttp.readyState == 4)
{
HandleResponse(xmlHttp.responseText);
}
}

xmlHttp.open("GET", "ajax.php", true);
xmlHttp.send(null);
}

The key to this whole process is using the XMLHTTP member readyState, which is pretty much exactly what it sounds like. The readyState corresponds to the state of the object itself, which can be anything from Uninitialized to Loaded. In the case of an AJAX request, we wait for the readyState to be 4, which is the maximum value and tells us that all the data to be loaded from the request is. So when the readyState is 4, the request is done and the data is ready for display.

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 (ie “post” or “get”), the page URL, and a boolean value indicating wheather 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.

After you have your open() method all set up, you need to call send() to make the actual request. The send() method makes the request, sending all the arguments you give it. For this case, we are sending nothing, so the arguments are null. 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 of course. The HandleResponse() function look like so:

function HandleResponse(response)
{
document.getElementById('ResponseDiv').innerHTML = response;
}

All this function does is take the response from the request and puts it in a div on our page. Now, that is all our Javascript, which works just fine all in one file, which we will call ajax.js. After making the javascript file, we will then make a simple ajax.php file. The file may contain like:

<?php
echo "This page is displayed using ajax.";
?>

After making the ajax.php file, we will then use all the file in our page. Lets have the index.html below:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script type='text/javascript' src='ajax.js'></scrip>
<title>PHP AJAX Example</title>
</head>
<body>
<input type='button' onclick='MakeRequest();' value='Use AJAX!!!!'>
<div id='ResponseDiv'>
This is a div to hold the response.
</div>
</body>
</html>

Try it!

Bookmark It

Hide Sites