I've been following an example in an Ajax book I've been reading.
I have put together the code as instructed. The idea is to fetch the php server time and display it when a button is clicked.
The publication was 2006 and I'm unsure if anything I have written is outdated and perhaps not supported anymore causing it to break?
I would be grateful for any guidance, thanks!
AJAX page
<!DOCTYPE html>
<html>
<head>
<title>Ajax Demonstration</title>
<style>
.displaybox{
width: 150px;
margin:0 auto;
background-color: #fff;
border: 2px solid #000;
padding: 10px;
font:24px normal verdana, helvetica, arial, sans-serif;
}
</style>
<script language="JavaScript" type="text/javascript">
function getXMLHTTPRequest(){
try{
reg = new XMLHttpRequest();
}
catch(err1){
try{
req = new ActiveXObject("Msxm12.XMLHTTP");
}
catch(err2){
try{
req = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(err3){
req = false;
}
}
}
}
var http = getXMLHTTPRequest();
function getServerTime(){
var myurl = 'telltimeXML.php';
myRand = parseInt(Math.random()* 999999999999999);
//add random number to URL to avoid cache problems
var modurl = myurl+"?rand="+myRand;
http.open("GET", modurl, true);
//set up the callback function
http.onreadystatechange = useHttpResponse;
http.send(null);
}
function useHttpResponse(){
if(http.readyState == 4){
if(http.status == 200){
var timeValue = http.responseXML.getElementsByTagName("timenow")[0];
document.getElementById('showtime').innerHTML = timeValue.childNodes[0].nodeValue;
}
}
else{
document.getElementById('showtime').innerHTML = '<img src="anim.gif">';
}
}
</script>
</head>
<body style="background-color:#ccc; text-align:center" onLoad="getServerTime()">
<h1>Ajax Demonstration</h1>
<h2>Getting the server time without page refresh</h2>
<form>
<input type="button" value="Get Server Time" onClick="getServerTime()" />
</form>
<div id="showtime" class="displaybox"></div>
</body>
PHP page
<?php
header('Content-Type: text/xml');
echo "<?xml version='1.0' ?><clock1><timenow>".date('H:i:s')."</timenow></clock1>";
?>
This line:
var http = getXMLHTTPRequest();
is expecting that getXMLHttpRequest() will return the instance. However, the function is instead attempting to directly set req:
// ...
req = new XMLHttpRequest();
// ...
Probably the simplest solution would be to change each req = to return:
function getXMLHTTPRequest(){
try{
return new XMLHttpRequest();
}
catch(err1){
// etc.
}
}
Though, you could also declare http sooner and set it directly instead:
var http;
function getXMLHTTPRequest(){
try{
http = new XMLHttpRequest();
}
catch(err1){
// etc.
}
}
getXMLHttpRequest(); // no need for `http =` here, since they're in the function