A Simple Introduction to Ajax: How to implement Ajax Into a Web Page - Easily

The most revolutionary thing about Ajax (Asynchronous JavaScript and XML) is not that it's a brand new technology - it's not: the techniques for asynchronous web content loading have existed for more than 10 years. No, the revolutionary thing about Ajax is the way that these techniques have been adopted throughout the world as a web standard.

The second most revolutionary thing about Ajax is that it's very easy to implement.

The Technology Behind Ajax

The technology used by the Ajax technique is quite simple (from a web developer's point of view); it makes use of:

And its the way that these objects have been implemented by web browser developers (such as Microsoft and Mozilla) that makes Ajax so useful.

Although there's an important point to take note of here - it's not necessary to develop sever applications in order to benefit from using Ajax.

Ajax Without a Server

The simplest Ajax application doesn't need to have access to a server (apart, of course, from the hosting of the web site itself); in this case the Ajax application just makes use of the DOM's ability to update areas of the web page asynchronously:

function choice_made (selection) {

document.getElementById( 'choice_area' ).innerHTML = "You chose " + selection;

}

</script >

<input type = radio onclick = "javascript: choice_made (1)" name = x >Choice 1<br />

<input type = radio onclick = "javascript: choice_made (2)" name = x >Choice 2<br />

<input type = radio onclick = "javascript: choice_made (3)" name = x >Choice 3<br />

<input type = radio onclick = "javascript: choice_made (4)" name = x >Choice 4<br />

Please make a choice

</div >

This is a simple example, but shows how the same area of the screen (the choice_area div) can be updated by just clicking a radio button, and without having to update the whole web page.

Ajax With a Server: Using the XML HTTP Request Object

The first thing that's needed is a script to run on the server, and this can be anything that is able to accept an input and return a result, so that could (for example) be:

<?php

function date_format ($choice) {

switch ($choice) {

case 1:

echo "The Day is " . date ("l");

break;

case 2:

echo "The Date is the " . date ("jS \of F Y");

break;

case 3:

echo "The time is " . date ("h:i:s A");

break;

case 4:

echo "The timezone is " . date ("T");

break;

}

date_format (trim( $_REQUEST['choice'] ) );

If that is saved as show_date.php then it can be used in the following Ajax web page:

var XMLHttp;

if(navigator.appName == "Microsoft Internet Explorer") {

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

} else {

XMLHttp = new XMLHttpRequest();

}

function choice_made (choice) {

XMLHttp.open("GET", "show_date.php?choice=" + choice, true);

XMLHttp.onreadystatechange = function() {

document.getElementById( 'choice_area' ).innerHTML = XMLHttp.responseText;

}

XMLHttp.send(null);

}

</script>

<input type = radio onclick = "javascript: choice_made (4)" name = x>Timezone<br />

Please make a choice

</div>

There's an important point to take note of here - the first task for the Javascript to do is to create the XML HTTP Request Object; however, how this object is accessed depends on the browser being used: Microsoft does it one way, everyone else does it another. The script, therefore, tests to see whether or not a Microsoft browser is being used, and then calls the appropriate object.

Once Javascript is using the correct object then it's just a matter of sending any inputs to the server script and processing the result (i.e. displaying them in the web page).

Conclusion

Ajax is just a simple technique, but it's a technique that has revolutionised the way that web sites operate. Fortunately it's a painless revolution that every web page developer can benefit from.

The copyright of the article A Simple Introduction to Ajax in AJAX Programming is owned by Mark Alexander Bain. Permission to republish A Simple Introduction to Ajax in print or online must be granted by the author in writing.

Sep 4, 2008 11:56 PM

Guest :

technically i would suggest that the first item of "ajax without a server" isn't ajax in the truest sense... it's simple dom manipulation available a whlie ago in simple "DHTML". AJAX at it's best is really about getting new data that wasn't available at time of initial page load.

Sep 5, 2008 12:19 AM

Mark Alexander Bain :

You are, of course, completely correct - the first example is just what would have been known previously as DHTML; but then that's the point of the article - to show how easily this simple, yet powerful, technique can be introduced into a web page.