Here is a quick overview and example of AJAX in action. Before you begin, this example will only work in FireFox work in FireFox and IE7. You’ll have to change few things in the JavaScript for it to work in IE6. To download the files used below click here. If you don’t have PHP/Apache installed, follow the tutorial I made to install it. The example below assumes you know the basics of PHP, you can learn as you go along if you don’t. A good reference is the base PHP website.
AJAX stands for Asynchronous JavaScript and XML. Conventional web application trasmit information to and from the sever using synchronous requests. This means you fill out a form, hit submit, and get directed to a new page with new information from the server. With AJAX when submit is pressed, JavaScript will make a request to the server, interpret the results and update the current screen. In the purest sense, the user would never know that anything was even transmitted to the server.
A classic example of AJAX is Google Maps. If you havent noticed, with Google Maps you have the ability to click and drag the map. If you drag the map fast enough, you would see the new regions of the map loading in real-time. This is accomplished using AJAX.
If you click here, you’ll see a simple example of AJAX. The example performs the multiplication of two numbers. The top form performs the calculation using AJAX, while the bottom form uses standard techniques.
The Javascript that makes the example work is below. Basically an XMLHttpRequest is used to communicate with the server. Though the name may make you think you need to trasmit XML, it is not necessary (my example doesn’t). So when the function ajax_call() is executed, the already instantiated XMLHttpRequest attemps to open ajaxWork.php (with some parameters). Upon returning from the request (and assuming it was successful) the results are populated into the results input box.
Code:
var xmlhttp=false;
if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
xmlhttp = new XMLHttpRequest();
}
function ajax_call() {
xmlhttp.open("GET", 'ajaxWork.php?num1=' +
document.getElementById('num1').value +
'&num2=' + document.getElementById('num2').value , true);
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4) {
document.getElementById('result').value = xmlhttp.responseText;
}
}
xmlhttp.send(null)
return false;
}
Below is ajaxWork.php which is used in the Javascript above. The code below uses a PHP class called ajax that I defined in ajaxClass.php. The code creates a new instance of the class ajax, reads the parameters from the URL, performs the multiplication, and outputs the result. The results are outputed so that from the response of the XMLHttpRequest, the Javascript can update the example.
Code:
<?php
include("ajaxClass.php");
$objSem = new ajax;
$objSem->readURLParameters();
$objSem->staticExample();
echo $objSem->result;
?>
Below is the ajax class used in the PHP code above. This class is used firstly to read the parameters from the URL (via readURLParameters()) and then to perform the multiplication (via staticExample()) .
Code:
<?php
class ajax {
var $queryParam = array();
var $result = 0;
var $num1 = 0;
var $num2 = 0;
function readURLParameters() {
$qstr = explode("&", $_SERVER['QUERY_STRING']);
foreach ($qstr as $value) {
$paramVal = explode("=",$value);
if (array_key_exists(1,$paramVal)) {
$this->queryParam[$paramVal[0]] = $paramVal[1];
}
}
}
function staticExample() {
if (array_key_exists("num1",$this->queryParam) & array_key_exists("num2",$this->queryParam)) {
$this->result = $this->queryParam["num1"] * $this->queryParam["num2"];
$this->num1 = $this->queryParam["num1"];
$this->num2 = $this->queryParam["num2"];
}
}
}
?>
The HTML is even more straightforward (so I won’t bother putting it here). You can download all the files I used here.
Also, be sure to remember the example above will only work in FireFox. To code would be similair to work in IE6, you’d just need to change some of the Javasript. If you have any questions post a comment.
Good luck
