An Introduction to AJAX

18 August, 2008

We got a request in through the system to address an introduction to AJAX and what it is all about. So that is what we are going to do.

AJAX, which stands for asynchronous JavaScript and XML, is nothing to be scared of. What it essentially is, is using JavaScript to load a page and getting a response from that page.

For example you might use JavaScript to submit a variable to a server page, and then get the response after the server page has worked with that variable. That is what we'll be doing today.

In our example, we will not be strictly using XML but the theory is the same. We will be submitting a variable to a PHP page, working with it on our PHP page, and returning it back to the original page.

You can see and try out the example for yourself below. Enter your name and click "Get name". Then watch the text magically appear below the form.

Now, let us look at how we do this.

First of all, we have a very simple form to enter the data.

The key element of our form is the button, with which the onclick event will call our JavaScript function. And it is in the JavaScript where the magic will happen.

Our change_content function first creates a new xmlHTTP object. We then use this object to access our server page which we defined in our url variable. We are passing in the text entered into the form field through the get string.

Before we make the call to the page however, we define what we want to happen when the call is completed and we set this as the new_text_ready function. (xmlHttp.onreadystatechange = new_text_ready;)

We then open the connection to the page and send the data through.

When the state changes, we check to see if it is the result which indicates the page has completed. If it is, we then call our change_content function to update our local page. We pass in the responseText which is the code sent by the page. We then use the simple DOM technique of updating the page.

To test that our processes are working on the page we are calling remotely, we can open that page in a separate window for testing purposes. Then we can see any errors that are being thrown, etc. To do this, add the following line after the xmlHTTP.send() command.

This will open the server page in a new window for you to see. The properties at the end are optional and merely style the window how you want - not necessary for our testing.

Our server, PHP page ajax_example_page.php looks like this:

And there you have it. AJAX, in a nutshell. Obviously this is a very brief and basic introduction to the whole, deep scope of AJAX, but now you have got something to work with you can go forth and make great creations.

AJAX is a powerful technology and is currently being used all over the Internet. It is certainly something of a buzz word to drop into a conversation, along with Web 2.0... Great applications can be created with AJAX, and it brings that feeling of a desktop environment to your web application.

ferrari_chris