Simple AJAX - PHP and Javascript

So, we now have a pretty common appearance of Web 2.0 across the world, but what exactly is Web 2.0? Really there are not set definitions or rules behind Web 2.0, it is just a way of describing a new set of technologies that have recreated the web. One of the more exciting and cool technologies is asynchronous server communication, sometimes referred as AJAX. With AJAX you don't need to refresh a page to get information from the server. You can call server pages and get the response, all with Javascript. In this tutorial I will show you the most basic way to get a response from a PHP script.

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:

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:

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:

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:

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:

The HTML itself is very simple and easy to understand, and this page is less than basic. All it has is a button that calls our MakeRequest() method and the Response div that holds the response. To give you a better example :

As you can see, the page did not refresh, yet we got our echo from the php script. Asynchronous communications are so wondrous, aren't they? Now all you have to do is fill in the PHP file with something a little more useful. Some of the more complex stuff includes sending whole objects to Javascript, but that is for another time. For now, this tutorial is all wrapped up. Just Remember that whenever you need coding help, just switch on the code ;)