Software Design UK


Home Page
Contact Us
About Us

Ajax Tutorial
GWT concepts
GWT Tutorial

Clients
Client Login
Autoresponder
 
Ajax Tutorial
Home Page > Training > Tutorials > Web 2.0 > Ajax Tutorial

This tutorial provides an introduction to Ajax. It is aimed at people with reasonable expertise in HTML and a smattering of experience with Javascript.

What is Ajax

Ajax is a mechanism to update a displayed webpage without the need to reload the page. A wonderful example is www.odeondirect.com who list videos to rent. The list of videos can be up to thirty, with about three lines of ratings and description for each. When you want to rent one of the videos, you click a "Rent now" button, at which point the page stays exactly as before, with the exception that a new row magically appears beneath the film title above the commentary, asking you to rank how urgently you want the film and asking you to confirm the order. When the order is confirmed, the newly appeared line disappears and the "Rent now" button's wording is changed to "Rented". For the web vistitor, this means you can continue to order films without ever having left the list of films you were on. For the web programmer, it means you do not have to keep track of where the user was, but can confirm the order "in situ".

The key advantage to Ajax is speed, since the page itself is not reloaded.

The key disadvantage to Ajax is its use of Javascript. Not every browser accepts Javascript. Since so many websites these days require cookies and Javascript, that disadvantage is marginal in the large majority of cases. More significantly, not every browser runs Javascript in the same way as every other. So if you want to use Ajax, some work is needed to ensure that the code runs on all the main browsers - a problem that reduces the more expert you get at it.


How does Ajax work

At the heart of Ajax is the html code that can be modified or manipulated by a simple Javascript function:

HTML

... HTML code, with film lists ...


The Wizzard of Oz



The children's all time favourite ...
... To rent, click here

... HTML code continues ...



Javascript

function RentFilm() {

var Placeholder = document.getElementById( "Placeholder" );
Placeholder.innerHTML = 'Magic Text ... To remove click here ';

}

function ClearRentFilm() {

var Placeholder = document.getElementById( "Placeholder" );
Placeholder.innerHTML = ''

}


The html code has a "div" tag with an id of "Placeholder" (or whatever you want to call it). The html code has a mechanism for the user to click something (in this case an "a" tag) to invoke the Javascript code. The method "RentFilm" finds the "Placeholder" and fills it with any html you want.


How does Ajax get its information from a web server

In the example above, the text was hard coded in the Javascript function. A Javascript function can "collect" information from a webserver as follows:

Javascript

function RentFilm() {

var Placeholder = document.getElementById( "Placeholder" );
ServerText = AjaxCall()
Placeholder.innerHTML = ServerText + ' ... To remove click here ';

}

function AjaxCall() {

Feedback = ''

request = window.XMLHttpRequest?new XMLHttpRequest(): new ActiveXObject("Microsoft.XMLHTTP");
var url = "http://www.softwaredesign.co.uk/cgi-bin/test/AjaxTest.py;
request.open( "POST", url, true );

request.send(null);

request.onreadystatechange = function() {

if (request.readyState != 4) {
return;
}

Feedback = request.responseText;

}

return Feedback

}


The key javascript command is request = new XmlHttpRequest(). This creates an object that handles HTTP communications (the XML part of it seems to be irrelevant) between the server and the webpage. "request.open(...)" opens a connection with the server. "request.send(null)" sends the URL request to the server. There is then a series of handshakes between the browser and the server, each of which returns an updated "readyState". When (State == 4), the response has been sent. "request.responseText" instructs the "response" object to regurgitate the text sent back by the server.

The reason for the strange statement window.XMLHttpRequest?new XMLHttpRequest(): new ActiveXObject("Microsoft.XMLHTTP"), is that Windows and everyone else have different ways of using Javascript. The statement tells the browser to use the Mozilla/Firefox etc. XMLHttpRequest command if it exists, or the Windows ActiveXObject("Microsoft.XMLHTTP") if not.

TIP : Do not waste your time trying to improve on the looping procedure if (request.readyState != 4) {. However much it grates to leave a potentially infinite loop in the code, you are unlikely to achieve the result you want with any other coding.


How does the web server send information to Ajax

The web server receives the Ajax request above in exactly the same way as any other HTML request. So any script that handles HTML requests through the internet will work.

For an example of the python script that responds to the example, download:
www.softwaredesign.co.uk/training/Ajax/AjaxTest.py