1. What we want

AJAX, depsite what a lot of people think is actually quite an old technology. Its recent explosion in popularity has essentially happened because some of the major players including Google, Yahoo and Microsoft started playing with it in their web services. Since then more and more people have been implementing these relatively easy to use techniques in order to create some pretty cool stuff.

One of the primary functions of AJAX is being able to access other files on your server (or anywhere on the web) without the end user really knowing about it. The example demonstrated in this tutorial does exactly that and will allow you to change a pages content on the fly. This when used correctly can create all sorts of really interesting sites but to keep things simple the example used here will just be used to change over a few content boxes.

2. Let's get started

Okay. To begin with I will quickly explain how this will work. We will have our index.html page which is of course our homepage. Attached to this will be our JavaScript script which is the 'brains' of this tutorial. Then we will have two other files - one called page_home.html and the other page_contact.html. Then when we click on a 'Contact us' link this home content will be replaced by the contents of page_contact.html. On top of that I have then used a simple style.css stylesheet which sets some basic styling rules for the document. All of this will be done quietly in the background without the need for a single page reload.

Firstly lets create all of these HTML files and then we will look at the JavaScript.

Here is our index.html

Here is our page_home.html

And then our page_contact.html

Here is my style.css - You don't really need this but I have included it just so that you can replicate my page exactly if you so wish.

Now you might have noticed that page_home.html and page_contact.html is much less than index.html. That's because we don't need to include any of the html/head/body related tags as this age will be pulled dynamically into our main page.

3. The JavaScript/AJAX

Now that we have sorted out all of the other files we can now concentrate on the brains behind this script, our javascript file. Here it is in full - I have named it js.js.

Now let me explain what's going on.

To begin with on line 1 we are creating a new variable called myHttpRequest and giving it the value of false. We need this variable for later use throughout the script.

From lines 3 to 6 we are using a simple if/else-if statement to determine which object we should use. Essentially this statement is used to determine whether or not the visitors browser is Internet Explorer or something else. If it is IE then we have to use ActiveXObject() instead of XMLHttpRequest(). Depending on which branch of the if/else-if stateent is true the variable my httpRequest will be set appropiately.

On line 8 and onwards we then create a new function called loadContent(). It has two arguements which are the source and content. The source is the filename of the file which we want to pull into our page. The content is the ID of the element in our page in which the source will be placed.

Within our loadContent() function we have an if statement which checks to see if the variable myHttepRequest is set. If it has not been set then it means the visitors browser does not support thi functionaity and will therefore do nothing. If however the variable has been set then execution will continue.

The next few lines, 12 to 22 are all about loading the pages content (whose filename was provided by the source arguement of the loadContent() function). The if statement on line 18 checks to see if the state of the request is equal to 4. Having the state of 4 essentially means that the files content was returned succesfully. Within that if statement we are then setting the inner HTML of our data item (which was provided by the content arguement of the loadContent() function) to the contents of our loaded file.

Thats the JavaScript over and done with. But how do we get this to work with our links? Take a look at this.

By setting the onClick property of our link to point to our loadContent() function this will then execute it as needed. Simple!

4. Loading the first page

If you have followed this tutorial correctly and have been tryng it out for yourself you should be able to see one small problem. When we open index.html in our browser our content div does not actually have any content. This is because as of yet we haven't clicked on any of the links therefore our loadContent() function has not loaded anything in.

There is a very simple fix to this. Simply add an onLoad property to the body tag of your index.html page. This means that as soon as the page is loaded in the browser our loadContent() function will be called which will pull in the relevant page. This is what your opening body tag needs to look like.