We use AJAX in our project to update real-time informations and it works like a charm.
One of the problems with page refresh is that you will see the page "flicker" because the whole document is reloaded.
If you refresh often then it will not look good. Also, you are forced to regenerate & resend the whole page HTML every time instead of just sending the values (possibly a few bytes) you want to update.
To use AJAX, you will need some basic knowledge of JavaScript, but that's all.
Here is a very simple example:
Suppose you have a value, let's call it Dummy, that you want to refresh on a page.
First you need to create dynamically a very simple XML document that will only contain the required value.
For example whenever you request '
http://utasker/XML?Dummy' from the uTasker HTTP server you will get the following response:
<Dummy>47</Dummy>Here, my dummy value is simply a counter that is incremented every request.
Next, you store a static web page that will look like the following (the simplest AJAX implementation I can think of), let's call it dummy.html:
<html>
<head>
<script language="JavaScript">
var request;
function onLoad()
{
sendRequest();
setTimeout('onLoad();', 500);
}
function sendRequest()
{
request = new XMLHttpRequest();
request.onreadystatechange = onResponseReceived;
request.open("GET", "XML?Dummy");
request.send(null);
}
function onResponseReceived()
{
if (request.readyState == 4 && request.status == 200)
{
document.getElementById("dummyval").innerHTML = request.responseXML.getElementsByTagName("Dummy")[0].firstChild.data;
}
}
</script>
</head>
<body onload="onLoad();">
Some stuff will not be updated.
<br/>
Some stuff will (dummy value = <span id="dummyval">.</span>).
</body>
</html>From a user perspective, you only need to request '
http://utasker/dummy.html'. In this case, the JavaScript code will take care of requesting 'XML?Dummy' every 500 ms and then update the value of the 'dummyval' span element.
You will see something like this in your browser:
Some stuff will not be updated.
Some stuff will (dummy value = 2248).
Of course that's the theory. My AJAX implementation above is very simplistic (no error checking) and only works with Firefox. The hard part of using AJAX is to have a consistent cross-browser experience. Firefox and IE often doesn't use the same objects or methods, so you will have to rely on a few tricks and wrapper methods like the following:
function newXmlHttpRequest()
{
if (window.XMLHttpRequest)
{
// Mozilla
return new XMLHttpRequest();
}
else if (ActiveXObject)
{
// Internet Explorer
return new ActiveXObject("Microsoft.XMLHTTP");
}
}Luckily, there is a lot of AJAX-related documentation and code snippets on the web.
-phil
