Optimising the Use of Web Technologies with AJAX

Learn How to Use an AJAX Application and Test it by Using Dummy Data

Sep 27, 2009
Mark Alexander Bain

Optimising the Use of Web Technologies with AJAX - Mark Alexander Bain

AJAX is a powerful technique but requires data in order to work correctly. However, the programmer can develop and test an application using dummy data from static sites.

Current web technologies mean that the Internet is an indispensable for many people in today: for the business man it provides a way of advertising and distributing their goods cheaply and easily; for friends and family members it provides a way of communicating across the world for little or no cost; and for the programmer it provides a way of accessing masses of data and incorporating it into their own applications.

For example, by using AJAX (Asynchronous Javascript and XML) a programmer can use the the output of any web based application, regardless the language in which the application was written, and then use it as a component of their own program. And all of this can be achieved by using just a few lines of Javascript.

Understanding the AJAX Technique

It is always worth stressing the point that AJAX is not a programming language in its own right. AJAX is a programming technique that makes use of web technologies. This technique is quite simple to understand:

the Javascript application sends a request to a web server and then waits for a response
the server processes the request from Javascript and then replies
the Javascript application, in its turn, processes the response from the server

Of course, all that the application user sees is a single, seamless front end. And it's all made possible by one little piece of web technology – the HTML XML Request.

Creating the HTML XML Request Object

Although Javascript is accepted universally by the developers of web browsers (such as Microsoft who develop Internet Explorer and the Mozilla Foundation who develop Firefox) the way that they handle Javascript is not always the same.

The creation of the HTML XML Request object is one of those times when the code required for Internet Explorer is different from the code required for other web browsers:

<head>

var XMLHttp;

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

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

} else {

XMLHttp = new XMLHttpRequest();

}

</script>

</head>

With that in place then any requests will be handled correctly.

Setting Up the Server Response

All that is required for AJAX to work is for the Javascript code to send a request to a server, and for the server to return a response. The language used on the server is not important as long as it replies in HTML.

So, the server application can be written (for example) in PHP, C++, Perl, Python or Visual Basic. In fact, it can be a static HTML file and the HTML doesn't even need to be on another server. This is particularly useful for a programmer learning the AJAX technique or testing out an application before the real data is available. Therefore, for testing and learning purposes, the web application to be queried can be as simple as:

<body><p>This a my response</p></body>

If this is saved into a .html file (for example "dummy01.html") then it can be accessed from the the AJAX application.

Creating a Sample AJAX Application

The sample AJAX application will need to send a request to the dummy file (just by calling it) and then display the result (which will be the text in the body of the file). It will, therefore, require:

a means of initiating the request (such as a button)
a web page element in which to display the result (such as a div area)

This can be done by using some simple HTML code:

<body>

<input type=button value="Get Server Response"

id ="btn_get_response" onclick="show_response ()>

<div id = "response_div">Click the button to see what the server has to say</div>

</body>

And the display that this produces can be seen in figure 1 at the bottom of this article. If the button is clicked it will call a Javascript function and so the next stage is to define that function:

function show_response () {

XMLHttp.open("GET", "dummy01.html", true);

XMLHttp.onreadystatechange = function() {

if (XMLHttp.readyState == 4) {

document.getElementById("response_div").innerHTML = XMLHttp.responseText;

}

XMLHttp.send(null);

}

</script>

The function looks complicated at first, but all it does is:

send the request to the server (by calling "dummy01.html"
monitors the state of the request
processes the result when the server signals that it has completed its processing

The final stage is to start querying live data but, as can be seen here, that is not vital for testing and learning purposes. The developer can create a complete, working application using only dummy data, and then convert it to live data once their front end has been fully test and is ready for real users.

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