Need help debugging this...

Wuhtzu · April 9, 2007

Hey

I'm reading Sams Teach Yourself Ajax in 10 Minutes and I can't get the "Get server time without refreshing the page"-example to work even though my code is identical to the one in the book. Here are the files/scripts:

server_clock.php: The html/xml markup, <div>'s ect. to show the content (working)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
  
<head>
  <title>AJAX</title>
  <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<link rel="stylesheet" type="text/css" href="style/server_clock.css" />
<script language="JavaScript" type="text/javascript" src="js/general.js"></script>
<script language="JavaScript" type="text/javascript" src="js/server_clock_functions.js"></script>

<script language="JavaScript" type="text/javascript">
	var http = getXMLHttpRequest();
</script>

</head>
  
<body>



<div id="container">

<h1>Server Clock</h1>
</h2>Get the server time without refreshing the page</h2>


<form>
	<input type="button" value="Get server time" onClick="getServerTime()" />
</form>

<br />

<div id="displaybox" class="displaybox"></div>

</div>

</body>

</html>

server_clock_functions.js: The two javascript functions used to get the server time and display it (some problem)

//Get the servertime
function getServerTime() {

var timestamp = new Date().getTime();

var requrl = "php/server_clock_script.php" + "?time=" + timestamp;

http.open("GET", requrl, true);
  http.onreadystatechange = displayServerTime;
  http.send(null);
}


//Use the server response
function displayServerTime() {

if(http.readyState == 4) {
	if(http.status == 200){
		var timeValue = http.responseXML.document.getElementByTagName('currenttime')[0];
		document.getElementById('displaybox').innerHTML = timeValue.childNodes[0].nodeValue;
	}
	else{
		alert("An error occured: " + http.statusText);
	}
}
else{
	document.getElementById('displaybox').innerHTML = '<img src="gfx/loading_circle40x40.gif">';
}
}

server_clock_script.php: The PHP script to return the server time (working)

<?PHP
header('Content-Type: text/xml');

$time = time();

echo "<?xml version='1.0' ?><time><currenttime>" . date("H:i:s",$time) . "</currenttime></time>"

?>

general.js: Function to create the XMLHTTPRequest object (working)

//getXMLHTTPRequest() - create an instance of the XMLHTTPRequest object
function getXMLHttpRequest() {

	var request = false;

	if(window.XMLHttpRequest)	{

			request = new XMLHttpRequest();

	}
	else if(window.ActiveXObject) {

			try {
					request = new ActiveXObject("Msm12.XMLHTTP");
			}
			catch(error1) {
					try {
							request = new ActiveXObject("Microsoft.XMLHTTP");
					}
					catch(error2) {
							request = false;
					}
			}
	}
	else {
			return false;
	}

	return request;

}

By inserting my own functions / code pieces into the code provided by "Sams Teach Yourself Ajax in 10 Minutes" I have found that my "getXMLHttpRequest()" and "getServerTime()" works, but displayServerTime doesn't, but I simple can't find the problem. Hopefully one of you guys can help me out....

The actual page / script can be view here:

Sams example: www.humlebo.org/ajax/ajaxfreakshelp/sams/Eksempel113.html

My code: www.humlebo.org/ajax/ajaxfreakshelp/wuhtzu/server_clock.php

Best regards

Wuhtzu

Wuhtzu · April 9, 2007

I kind of forgot to tell what the actual problem was...

When i hit the "Get server time"-button it sends the request correctly (checks out in both my apache log and with Firebug addon for FF) but it seems like "http.readystate == 4" never gets true and therefore it keeps on showing the loading gif. Btw. Firebug tells me that the readystate of the http-object is 4 :S

Wuhtzu · April 9, 2007

I found the bug my self, but thanks for looking at it though!

server_clock_functions.js:

//Use the server response

function displayServerTime() {

if(http.readyState == 4) {

if(http.status == 200){

var timeValue = http.responseXML.document.getElementByTagName('currenttime')[0];

var timeValue = http.responseXML.getElementsByTagName('currenttime')[0];

document.getElementById('displaybox').innerHTML = timeValue.childNodes[0].nodeValue;

}

else{

alert("An error occured: " + http.statusText);

}

else{

document.getElementById('displaybox').innerHTML = '<img src="gfx/loading_circle40x40.gif">';

}

The above color coded code pretty much shows what was wrong.

Sign In

Need help debugging this...

Recommended Posts

Wuhtzu

Link to comment

Share on other sites

Wuhtzu

Link to comment

Share on other sites

Wuhtzu

Link to comment

Share on other sites

Archived

Browse

Activity

Important Information