• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 231
  • Last Modified:

AJAX simple data retrieval from server

I'm trying to write a "simple" web page to test data retrieval from my server into XML format for use in a web page. What happens is, when I click the submit button, the "wait" animation (attached) displays forever. I guess it's not getting what it expects from the server? If I run the php script separately, it seems to generate the expected XML. This is the server side php script:

<?php
header('Content-Type: text/xml');
echo "<?xml version=\"1.0\" ?><clock1><timenow>" .date('H:i:s')."</timenow></clock1>";
?>

Open in new window


And here is the web page:

<html>
<head>
<title>Ajax Demonstration</title>
<style>
.displaybox {
width:150px;
background-color:#ffffff;
border:2px solid #000000;
padding:10px;
font:24px normal verdana, helvetica, arial, sans-serif;
}
</style>
<script language="JavaScript" type="text/javascript">
function getXMLHTTPRequest() {
try {
req = new XMLHttpRequest();
} catch(err1) {
  try {
  req = new ActiveXObject("Msxml2.XMLHTTP");
  } catch (err2) {
    try {
    req = new ActiveXObject("Microsoft.XMLHTTP");
    } catch (err3) {
      req = false;
    }
  }
}
return req;
}

var http = getXMLHTTPRequest();

function getServerTime() {
  var myurl = 'telltimeXML.php';
  myRand = parseInt(Math.random()*999999999999999);
  var modurl = myurl+"?rand="+myRand;
  http.open("GET", modurl, true);
  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:#cccccc" onLoad="getServerTime()">
<center>
<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>
</center>
</body>
</html>

Open in new window

animation gif
0
silentreproach
Asked:
silentreproach
  • 4
  • 3
2 Solutions
 
EyalCommented:
use firebug and put breakpoints in the javascript
also see the console has no errors
0
 
HonorGodCommented:
You could add alert() statements to your callback routine (i.e., useHttpResponse()) to verify that it is, in fact, being called.
0
 
silentreproachAuthor Commented:
Strangely, it's working on my WinXP computer with Firefox 7.0.1, but not on my Win7 computer with the same version of Firefox. It doesn't work with Chrome on either computer.

Firebug seems promising, but it seems to behaves differently on each browser and OS. I've added some alerts also, so I'll see if one of these approaches leads me to a solution first.
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
silentreproachAuthor Commented:
So far I'm finding that when the script does not work, http.status is 0 instead of 200.
0
 
HonorGodCommented:
0
 
HonorGodCommented:
You might consider using something like WireShark (http://www.wireshark.org/) to see what data is actually flowing over the connection.
0
 
silentreproachAuthor Commented:
The responders gave me the debugging tools I needed to find my solution. Thanks very much!!
0
 
HonorGodCommented:
Thanks for the assist, and the points.

Good luck & have a great day.
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now