As shown in the following function, first pull out the XML document object model (DOM) tree from the responseXML property of the passed XHR object. Then use DOM methods to pull out the portion of the packet in which you are interested. Next decide how you want to insert the response into the page. In this case, for brevity, just directly insert it with the innerHTML property. Even so, the DOM code is a bit nasty for a "Hello World" example.
function responseCallback(xhr)
{
if (xhr.readyState == 4 && xhr.status == 200)
{
var xmlResponse = xhr.responseXML;
var responseString = xmlResponse.getElementsByTagName("message")[0].firstChild.nodeValue;
var output = document.getElementById("output");
output.innerHTML = responseString;
}
}Here is the complete example:
<!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=iso-8859-1" />
<title>Ajax Hello World</title>
<script type="text/javascript">
function createXHR( )
{
try { return new XMLHttpRequest( ); } catch(e) {}
try { return new ActiveXObject("Msxml2.XMLHTTP.6.0"); } catch (e) {}
try { return new ActiveXObject("Msxml2.XMLHTTP.3.0"); } catch (e) {}
try { return new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) {}
try { return new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) {}
return null;
}
function sendRequest( )
{
var xhr = createXHR( );
if (xhr)
{
xhr.open("GET","sayhello.php",true);
xhr.onreadystatechange = function( ){responseCallback(xhr);};
xhr.send( );
}
}
function responseCallback(xhr)
{
if (xhr.readyState == 4 && xhr.status == 200)
{
var parsedResponse = xhr.responseXML;
var responseString = parsedResponse.getElementsByTagName("message")[0].firstChild.nodeValue;
var output = document.getElementById("output");
output.innerHTML = responseString;
}
}
window.onload = function ( )
{
document.getElementById("button1").onclick = sendRequest;
};
</script>
</head>
<body>
<form action="#">
<input type="button" value="Say it!" id="button1" />
</form>
<br /><br />
<div id="output"> </div>
</body>
</html>The server-side code that is called is quite simple. It generates a response packet containing a message that says "Hello World" to the user with a time and IP address of access information:
<?php
header("Cache-Control: no-cache");
header("Pragma: no-cache");
header("Content-Type: text/xml");
$str = "Hello World to user from " . $_SERVER['REMOTE_ADDR'] . " at ". date("h:i:s A");
print "<?xml version='1.0' encoding='UTF-8'?>";
print "<message>$str</message>";
?>You can see the example of the data that is returned in Figure 8-4.