The 5 Elements of an Ajax Application

The Simple Steps to Creating a Complex Web Page in Ajax

Sep 19, 2008

It can be quite intimidating for any new web developer when it comes to developing that first, vital, Ajax (Asynchronous Javascript and XML) application; but it needn't be - not if the web developer remembers that there are just 5 simple steps to building any Ajax application:

The application developer can build highly complex pieces of software just by following those simple steps.

1. Create the XML HTML Request Object

The XML (Extensible Markup Language) HTML (Hyper-Text Markup Language) request object is at the core of every Ajax application, and it's this object that enables Javascript to communicate with a server; however, the object is handled slightly differently by each web browser (or to be precise, it's handled one way by Microsoft Explorer and another by all other browsers); therefore, the Javascript code needs to check the browser type and create the object appropriately:

var XMLHttp;

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

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

} else {

XMLHttp = new XMLHttpRequest();

}

</script>

2. Define the User Input and Output

As well as communicating with the server the application must also allow the user to input data - and then to see the results (if there are any). This can be achieved by using:

Please enter:<br>

<table>

<tr>

<td>First Name</td><td>

</tr>

<tr>

<td>Surname</td>

</tr>

<tr>

<input type=button name=send_data value="Get User details"

onclick = "javascript:process_data();" >

</td>

</table>

</form>

This simple form does not directly call any other web pages or cgi scripts; instead it contains an input button that calls a Javascript function - process_data.

3. Process the User Input

In this example the code ensures that the user has entered both a first name and a surname, and then displays the result in one of the div areas:

function process_userdata () {

var user_input = document.forms['user_input'];

var fname = user_input.fname.value;

var sname = user_input.sname.value;

var queryString;

if (fname != "" && sname != "" ) {

queryString = "?fname='"+ escape(fname) + "&sname='" + escape(sname);

} else {

alert ("Firstname and surname are required");

queryString = False

}

return (queryString);

}

function process_data() {

var queryString = process_userdata ();

document.getElementById( 'result_area' ).innerHTML = queryString);

}

4. Send the Processed Data to the Server

The formatted data can now be sent to the server, but before that can be done the server file must exist - in this case a PHP file:

<?php

function get_username () {

$initial = substr($_REQUEST['fname'],0,1);

$username = strtolower($_REQUEST['sname'] . $initial);

return $username;

}

function get_password () {

for ( $i = 1; $i <= 10; $i++) {

$n = rand(0,9);

$password = $password . $n;

}

return $password;

}

$username = get_username ();

$password = get_password ();

echo $username . "|" . $password;

If this file is saved on the web server as process_user_data.php then it can be called from the Ajax application:

function process_on_server (serverFile, queryString) {

document.getElementById( 'result_area' ).innerHTML= "Processing...";

var server_data = serverFile + queryString;

XMLHttp.open("GET", server_data, true);

XMLHttp.onreadystatechange = function() {

if (XMLHttp.readyState == 4) {

process_result (XMLHttp.responseText);

}

XMLHttp.send(null);

}

function process_result (resultText) {

document.getElementById( 'result_area' ).innerHTML = resultText;

}

function process_data() {

var queryString = process_userdata ();

var serverFile = "process_user_data.php"

process_on_server (serverFile, queryString);

}

5. Process the Server Response

If the data returned is simple (i.e. a single piece of information) then is can be used immediately, but if it's more complex (containing a number of pieces of information) then some more Javascript processing will be needed before the data can be used:

function process_result (resultText) {

var result_data = resultText.split("|");

document.getElementById( 'result_area' ).innerHTML = result_data[0];

document.getElementById( 'result_area2' ).innerHTML = result_data[1];

}

In this example the server response is split into a Javascript array, and then each element of that array is displayed in a different div area.

Conclusion

An Ajax application may appear complicated at first glance - but they're not; they all need to carry out those same 5 simple steps: