A Simple Introduction to Ajax

How to implement Ajax Into a Web Page - Easily

Aug 20, 2008
Mark Alexander Bain

: Simple Javascript is the key to Ajax - Mark Alexander Bain

If you're starting to learn how to program using Ajax then this quick tutorial with its simple examples shows just how easy it is to implement Ajax in a web page.

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:

the XML DOM (Extensible Markup Language Document Object Model) which defines the standard for manipulating the documents that makes up web pages - it also allows for asynchronous updating of sections of the web page
the XML HTTP Request Object - this is defined as part of the DOM, and allows for asynchronous communication with a server.

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:

In this case it's a PHP script that returns the date in different formats:

<?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.

Mark Alexander Bain - Mark Alexander Bain is a writer, Mo Bro and consultant for all aspects of software development at dsquared. He has also written regularly ...

Simple Javascript is the key to Ajax - Mark Alexander Bain
A simple Ajax application doesn't need a server - Mark Alexander Bain
Ajax works well with Firefox - Mark Alexander Bain
Ajax works just as well with Explorer - Mark Alexander Bain

Comments

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.

Mar 31, 2010 8:49 AM

Guest :

Thanks for the article :)

Apr 16, 2010 4:59 PM

Guest :

Great article! This is definitely worth reading for someone taking baby steps through AJAX framework. It would have been nice if you continues extending to database requests.

4 Comments