Introduction to AJAX

Hello and welcome to my tutorial! In this tutorial you'll be learn about AJAX, a new and powerful technique in web development. AJAX stands for Asynchronous JavaScript And XML. What does that mean? It means that you can change the content on your page without reloading? Need an example? Click on the button below:

The Basic AJAX Structure
Basic AJAX is normally composed of three JavaScript functions:

1. A function that creates an http request

2. A function that calls the http request and submits it,

3. A function that handles the information sent back to the page.

So here are the three functions in their less than functional glory:

var xmlHttp;

function createRequest(){

if(window.ActiveXObject){

xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

}

else if(window.XMLHttpRequest){

xmlHttp = new XMLHttpRequest();

}

}

function ajax(){

createRequest();

var url = "ajax2.php?test=hello!";

xmlHttp.open("GET";, url, true);

xmlHttp.onreadystatechange = StateChange;

xmlHttp.send(null);

}

function StateChange(){

if(xmlHttp.readyState == 4){

alert(xmlHttp.responseText);

}}

[ Put this in your favorite text editor and save it as 'ajax.html' ]

Let's Break the Code Down!
The first line declares a function called xmlHttp. This will be used to house our request. The function 'ajax()' is the function you'll want to call when making a request. We'll break this function up and get to the other two in the process.

The first line in the function calls createRequest(). Internet Explorer handles the request differently than Firefox or Netscape or any of those browsers. So we start off by sniffing for IE by seeing if it has ActiveX Objects. If so we make xmlHttp a new ActiveX object. Otherwise, if it's something else, we make xmlHttp a new XMLHttpRequest() which is just a built in object we need to use.

Now, back to our ajax() function. We make a variable called 'url' and make it equal to 'ajax2.php'. We also declare a variable 'test' initialized to 'hello!'. You'll need to set this to be whatever page you are planning on calling. After that we get to the bones and muscles of AJAX.

xmlHttp.open will open up a http connection. We declare that we want to use a 'GET' method, the page is 'url' (our variable), and we want to to be asynchronous, so we put in 'true'. Next, we specify that when the ready state (not loaded, loading, loaded, etc) changes, call StateChange(). In StateChange(), we say that if the state is 4 (loaded), it is time to alert the text that the file called by the http request is ready. The last line in our ajax() function just says that we're sending null to the other page (this would be not null for POST requests, but for GET it's always null).

A question you may have is how do I get information from my second page? Using our example, our script connects to a page and then alerts the information it sends back. But how does the information get there? Simple. Any text that is output on our second page is automatically sent to our first page in the form of responseText. Remember that from our code? Now put this into a file and call it 'ajax2.php'.

This isn't a PHP tutorial, but if you don't know what this does, it simply GETs the variable 'test' from our URL string and prints it to the screen. Now what will happen is our script will connect to the PHP page and send the word 'hello!' which will alert it.

Conclusion
So here is the final code for ajax.html:

Test it out and you should have your very first AJAX application. Of course there's much more you can do with AJAX. This was just a beginners lesson. Maybe if you bug me enough I can make a more advanced one.

Well I hope that you've followed along and understood. If you have any questions/comments you can email me at blazes816[at]yahoo.com or PM me (blazes) on the forums.

Blazes