Nowadays everybody talks about Ajax. To be truly honest, I thought that is something extremely difficult, but it is not.
It is no more than a programming technique (Asynchronous JavaScript and XML) in order to load external info in DIVs, without reloading the whole page (Gmail users probably knows best what I’m talking).
The reason why it was not widely used was that the XMLHttpRequest object is not supported by all browsers. Internet Explorer has his own object called XMLHTTP (as an ActiveX object).
Since all new browsers have this facility, this technology (I think that calling this “Language” is not fair) exploded.
First of all we need to define some javascripts to create the object and handle the request. For this particular example, I used another javascript function to make the request.
<script language=
"javascript" type=
"text/javascript">
//cross-browser object creation function
function createRequestObject() {
var ret;
//read the user’s browser
var browser = navigator.appName;
//Internet Explorer has his own object
if(browser == "Microsoft Internet Explorer"){
ret = new ActiveXObject("Microsoft.XMLHTTP");
}
else{
ret = new XMLHttpRequest();
}
return ret;
}
//create a request object
var http = createRequestObject();
//you will call this function
function sendRequest(action) {
//here’s the catch – call an external page
http.open(‘get’, ‘req.php?action=’+action);
//wait until the request is completed
http.onreadystatechange = handleResponse;
//finalize the request
http.send(null);
}
//function that handle response state changes
function handleResponse() {
//fires only the object change to state 4
if(http.readyState == 4){
//get the text from the external procedure
var response = http.responseText;
var update = new Array();
//parse the text
if(response.indexOf(‘|’ != -1)) {
//response should be ‘divID|value"
update = response.split(‘|’);
//update the element with the divID with the value
document.getElementById(update[0]).innerHTML = update[1];
}
}
}
</script>
After this we need to call sendRequest function from HTML, just like this:
<a href="javascript:sendRequest(‘currentDateTime’)">update time
</a>
As you see, this example get the date from an external script (req.php), and return a string with the id of the DIV that will be updated and the value of the DIV, separated by a pipe:
Below is the entire code from req.php. It’s easy, don’t it?
<?
//test the action from request
switch($_REQUEST[‘action’]) {
case ‘currentDateTime’:
//return the divID and the value separated by a pipe
echo "currentDateTime|".
date("d/m/Y h:i:s");
break;
}
?>
In the original page we need a DIV to be filled with external info
<div id="currentDateTime">
</div>
The whole code from HTML file is:
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Ajax demystified
</title>
<style type="text/css">
A {
color: #336699;
text-decoration: none;
font-weight: bold;
}
A:hover {
color: #FF0000;
font-weight: bold;
}
BODY {
font-family: Tahoma, Verdana, Arial, sans-serif;
font-size: 12px;
}
.mark {
color: #FF0000;
font-weight: bold;
}
</style>
<script language="javascript" type="text/javascript">
//cross-browser object creation function
function createRequestObject() {
var ret;
//read the user’s browser
var browser = navigator.appName;
//Internet Explorer has his own object
if(browser == "Microsoft Internet Explorer"){
ret = new ActiveXObject("Microsoft.XMLHTTP");
}
else{
ret = new XMLHttpRequest();
}
return ret;
}
//create a request object
var http = createRequestObject();
//you will call this function
function sendRequest(action) {
//here’s the catch – call an external page
http.open(‘get’, ‘req.php?action=’+action);
//wait until the request is completed
http.onreadystatechange = handleResponse;
//finalize the request
http.send(null);
}
//function that handle response state changes
function handleResponse() {
//fires only the object change to state 4
if(http.readyState == 4){
//get the text from the external procedure
var response = http.responseText;
var update = new Array();
//parse the text
if(response.indexOf(‘|’ != -1)) {
//response should be ‘divID|value"
update = response.split(‘|’);
//update the element with the divID with the value
document.getElementById(update[0]).innerHTML = update[1];
}
}
}
</script>
</head>
<body onload="javascript:sendRequest(‘currentDateTime’)">
This page shows how Ajax is working. Is is nothing fabulous here.
Click here for
<a href="javascript:sendRequest(‘currentDateTime’)">update time</a>
<div id="currentDateTime" class="mark">
</div>
Nothing else but the date and time is updated.
©2006 <a href="mailto:andrei@webxpert.ro">Andrei DANEASA</a>
</body>
</html>
If you want to see this example working and test it, click here.
*This is not intended to be a complete tutorial of Ajax, but it covers the main functionalities. The rest is only programmer’s imagination.
Andrei
http://www.webxpert.ro
Entries (RSS)