PHP AJAX Step By Step Tutorial - part 7: In this post, we modify handleXMLData() at this post. The new code like this:
function handleXMLData()
{
var xmlResponse = xmlHttp.responseXML;
xmlRoot = xmlResponse.documentElement;
calcArray = xmlRoot.getElementsByTagName("calculation");
myDiv = document.getElementById("myDivElement");
myDiv.innerHTML += "Request status: 4 (complete). <br />Server said: ";
myDiv.innerHTML += calcArray.item(0).firstChild.data;
}
Complete code like this:
<!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>Ajax Client</title>
<script type="text/javascript">
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(funcCalc)
{
myDiv = document.getElementById("myDivElement");
myDiv.innerHTML = "";
if(xmlHttp)
{
try
{
var param1 = document.getElementById("param1").value;
var param2 = document.getElementById("param2").value;
var params = "param1=" + param1 + "¶m2=" + param2 + "&func=" + funcCalc;
xmlHttp.open("Get","calc.php?" + params, 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 == 1)
{
myDiv.innerHTML += "Request status: 1 (loading) <br/>";
}
else if (xmlHttp.readyState == 2)
{
myDiv.innerHTML += "Request status: 2 (loaded) <br/>";
}
else if (xmlHttp.readyState == 3)
{
myDiv.innerHTML += "Request status: 3 (interactive) <br/>";
}
else 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;
xmlRoot = xmlResponse.documentElement;
calcArray = xmlRoot.getElementsByTagName("calculation");
myDiv = document.getElementById("myDivElement");
myDiv.innerHTML += "Request status: 4 (complete). <br />Server said: ";
myDiv.innerHTML += calcArray.item(0).firstChild.data;
}
</script>
</head>
<body>
Parameter #1: <input type="text" id="param1"> <br />
Parameter #2: <input type="text" id="param2"> <br />
<input type="button" value="+" onclick="process('add')">
<input type="button" value="-" onclick="process('min')">
<input type="button" value="/" onclick="process('div')">
<input type="button" value="*" onclick="process('mul')">
<div id="myDivElement" />
</body>
</html>
