AJAX Repetitive Request Step By Step Tutorial - Part 3: Now, try to delay request to server. This is scenario:
We want to ask random number from server. The number must be equal or greater than 50. If server send less than 50, we delay request until 3 seconds. After that, ask random number again to server.
For this job, we modify handleXMLData() function like this:
function handleXMLData()
{
var xmlResponse = xmlHttp.responseXML;
// error handling for IE and Opera
if (!xmlResponse || !xmlResponse.documentElement){
throw("1. Invalid XML Structure:\n " + xmlHttp.responseText);
}
var rootNodeName = xmlResponse.documentElement.nodeName;
//error handling for Firefox
if (rootNodeName == "parseerror"){
throw("2. Invalid XML Structure:\n " + xmlHttp.responseText);
}
var xmlRoot = xmlResponse.documentElement;
if(rootNodeName != "datas" || !xmlRoot.firstChild){
throw("3. Invalid XML Structure:\n " + xmlHttp.responseText);
}
var xmlData = xmlRoot.firstChild;
var dataNodeName = xmlData.nodeName;
if (dataNodeName != "random"){
throw("4. Invalid XML Structure:\n " + xmlHttp.responseText);
}
var response = xmlRoot.getElementsByTagName("random");
var getNumber = response.item(0).firstChild.data;
if ( getNumber < 50 ){
myDiv = document.getElementById("myDivElement");
myDiv.innerHTML += "<br />Delay Request # " + requestCounter;
setTimeout("process();", interval = 3000);
}else{
myDiv = document.getElementById("myDivElement");
myDiv.innerHTML += "<br />Request # " + requestCounter + ": ";
myDiv.innerHTML += getNumber;
requestCounter++;
setTimeout("process();", interval = 1000);
}
}
Below, the complete code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Repetitive Request</title>
<script type="text/javascript">
var requestCounter = 0;
var interval = 1;
var serverAddress = "random.php";
var xmlHttp = createXmlHttpRequestObject();
// creates XMLHttpRequest Instance
function createXmlHttpRequestObject(){
// will store XMLHttpRequest object
// at here
var xmlHttp;
// works all exceprt IE6 and older
try
{
// try to create XMLHttpRequest object
xmlHttp = new XMLHttpRequest();
}
catch(e)
{
// assume IE 6 or older
try
{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e){ }
}
// return object or display error
if (!xmlHttp)
alert("Error creating the XMLHttpRequest Object");
else
return xmlHttp;
}
function process()
{
if(xmlHttp)
{
try
{
xmlHttp.open("Get",serverAddress, true);
xmlHttp.onreadystatechange = handleRequestStateChange;
xmlHttp.send(null);
}
catch(e)
{
alert("Can't connect to server\n" + e.toString());
}
}
}
function handleRequestStateChange()
{
myDiv = document.getElementById("myDivElement");
if (xmlHttp.readyState == 4)
{
if(xmlHttp.status == 200)
{
try
{
handleXMLData();
}
catch(e)
{
alert("Error reading the response: " + e.toString());
}
}
else
{
alert("Problem retrieving data:\n" + xmlHttp.statusText);
}
}
}
function handleXMLData()
{
var xmlResponse = xmlHttp.responseXML;
// error handling for IE and Opera
if (!xmlResponse || !xmlResponse.documentElement){
throw("1. Invalid XML Structure:\n " + xmlHttp.responseText);
}
var rootNodeName = xmlResponse.documentElement.nodeName;
//error handling for Firefox
if (rootNodeName == "parseerror"){
throw("2. Invalid XML Structure:\n " + xmlHttp.responseText);
}
var xmlRoot = xmlResponse.documentElement;
if(rootNodeName != "datas" || !xmlRoot.firstChild){
throw("3. Invalid XML Structure:\n " + xmlHttp.responseText);
}
var xmlData = xmlRoot.firstChild;
var dataNodeName = xmlData.nodeName;
if (dataNodeName != "random"){
throw("4. Invalid XML Structure:\n " + xmlHttp.responseText);
}
var response = xmlRoot.getElementsByTagName("random");
var getNumber = response.item(0).firstChild.data;
if ( getNumber < 50 ){
myDiv = document.getElementById("myDivElement");
myDiv.innerHTML += "<br />Delay Request # " + requestCounter;
setTimeout("process();", interval = 3000);
}else{
myDiv = document.getElementById("myDivElement");
myDiv.innerHTML += "<br />Request # " + requestCounter + ": ";
myDiv.innerHTML += getNumber;
requestCounter++;
setTimeout("process();", interval = 1000);
}
}
</script>
</head>
<body onload="process()">
Our collections:
<div id="myDivElement" />
</body>
</html>
