The 5 Elements of an Ajax Application

The Simple Steps to Creating a Complex Web Page in Ajax

5 simple steps to an Ajax application - Mark Alexander Bain
5 simple steps to an Ajax application - Mark Alexander Bain
This article looks at the 5 simple steps that can be used to build even the most complicated Ajax application.

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:

  1. create the XML HTML Request Object
  2. define the user input and output
  3. process the user input
  4. send the processed data to the server
  5. process the server response

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:

<script type = "text/javascript">
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:

  • a simple form for the user input
  • div areas for displaying any outputs

and, of course, this is all done by using HTML:

<form name=user_input>
Please enter:<br>
<table>
<tr>
<td>First Name</td><td>
<input name = fname></td>
</tr>
<tr>
<td>Surname</td>
<td><input name = sname></td>
</tr>
<tr>
<td colspan=2 align=center>
<input type=button name=send_data value="Get User details"
onclick = "javascript:process_data();" >
</td>
</table>
</form>
<div id=result_area></div>
<div id=result_area2></div>

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.

Popular topics

3. Process the User Input

Before sending the data to the server it should be processed for two reasons:

  • to ensure that the data has been entered correctly
  • to format the data so that it is ready for the server

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);
}

The application now:

  • sends the formatted data to the server
  • waits for the server to carry out its tasks (denoted by the readyState being set to 4)
  • displays the result

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:

  1. use Javascript to initialise the XML HTML request object
  2. use HTML to create areas for user input and output
  3. use Javascript to send the user inputs to a server
  4. process the data on a server
  5. use Javascript to process any response from the server and display the result

Further Reading

A Simple Introduction to Ajax

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

rss
Advertisement
Advertisement

Popular topics

more in ajax programming »

Related Topics

Advertisement