A Quick Ajax Example
Asynchronous Javascript or Ajax is one of the hottest buzzwords in web development. Instead of boring you with the technicalities, I thought I would take a minute to show an example of how we recently used Ajax on an order page.
A client had an order page where they took orders for three different types of fuel oils and each type had different data we needed to collect to process an order. Including the options for each of these three types on one order form made the form lengthy and confusing, so we used Ajax to change the form on the fly based on which product the customer was ordering.
First, on the form itself, the select menu for fuel type looked like this:
The “onChange” parameter of the select menu calls a Javascript function makeRequest with the value of the option selected from the menu.
makeRequest looks like this:
function makeRequest(type) {
var textType = ‘’;
if (type == 1)
textType = ‘heating’;
else if (type == 2)
textType = ‘gasoline’;
else (type == 3)
textType = ‘diesel’;
// browser checking to create ajax object
if (window.XMLHttpRequest)
http_request = new XMLHttpRequest();
else if (window.ActiveXObject)
http_request = new ActiveXObject(”Microsoft.XMLHTTP”);
// format request
url = ‘proc.ajax.php?type=’ + textType;
// send and procss resonse
http_request.onreadystatechange = updateForm;
http_request.open(’GET’, url, true);
http_request.send(null);
}
function updateForm() {
if (http_request.readyState == 4) {
if (http_request.status == 200)
document.getElementById(’dynamicForm’).innerHTML = http_request.responseText;
else
alert(’Error’);
}
}
}
This code takes the value from the menu and converts it to a string (heating, gasoline, diesel), creates an Ajax object based on the browser being used, then sends the request to another page that formats the response.
This line :
http_request.onreadystatechange = updateForm; tells the function to call updateForm when a response arrives from the page we sent the request to.
updateForm waits until it receives a “done” (readyState = 4) response and, if the status is 200 (indicating success), this line: document.getElementById('dynamicForm').innerHTML = http_request.responseText; dynamically places whatever was returned into the form (in the ‘dynamicForm’ division).
The page that handles the Ajax request looks like this:
$type = $_GET['type'];
$heating = 'table rows for heating oil form fields here';
$gasoline = 'table rows for gasoline form fields here';
$diesel = 'table rows for diesel form fields here';
switch ($type) {
case 'heating' : echo $heating; break;
case 'gasoline' : echo $gasoline; break;
case 'diesel' : echo $diesel; break;
default : echo ''; break;
}
This PHP code simply defines a table layout for each of the three fuel types, then prints the correct text based on the querystring value (which we specified in the Javascript here: url = 'proc.ajax.php?type=' + textType;). This text is what the Ajax object uses as it’s response to the request and what is then used to update the form based on the fuel type chosen from the menu.
While this certainly could have been accomplished by including code for each version of the form in a Javascript array then switching between them based on a selection from the menu, the Ajax version not only reduces the page size, but separates the functionality so updates to the form (like adding a new fuel type) are much more easily made.
Also, had this form required a few dozen different layouts based on multiple user selections, managing that concurrency on one page would have been a nightmare. With Ajax, simply defining an Ajax call for each dynamic section would allow individual sections of the form to take care of updating themselves without needing to know what’s happening in the rest of the form.