Simple AJAX - PHP and Javascript

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. Now that we have our Javascript, we need to make our ajax.php file, with is one monsterous file, full of complex code:

<?php
echo "This is a php response to your request!!!!!!";
?>

Yep, that is it. 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. But what about the page eh?

The page in question can really be anything as long as it calls the MakeRequest() method in our javascript file. In our case we will make a simple index.html page that will have a button and a div. The code will look something like:

<!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'></script>
    <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>