XMLHttpRequest object is empty after server response - what am I doing wrong? - ajax

Question

This is my first post on stackoverflow, and it concerns a problem I'm having while trying to learn the basics of Ajax.
This is the scenario:
I have created an HTML file with an embedded script
The script ...
- creates an XMLHttpRequest object
- invokes open() to assign the HTTP method and URL
- assigns the event handler to the onreadystatechange
property
- sends the request
What is the request?
The request is simply going to the local web server (Apache) on the same host to run a php script. The php script creates an XML file, and populates the file with a single value, which is the time on the server.
What does the client do with the response?
The event handler uses DOM to extract the time value from the XML and inserts it as the innerHTML in a div element.
What's not working?
Actually it works fine in IE8, but I can't get it to work in Firefox!
What does work, and what doesn't?
The request is being sent, and the event handler is indeed being invoked, both in IE8 and in Firefox. Whereas IE8 populates the div on the web page beautifully, in Firefox the XMLHttpRequest object appears to be empty; that is to say, the readyState is being updated but there are no reponse headers or text, and no status or status text.
What I have done to investigate
- I have reviewed the MDN documentation for XMLHttpRequest to see whether I'm doing something wrong, but my code appears ok.
- I have populated the script with lots of alerts statements to try to debug this, but I can find only the symptoms, not the cause.
- I have downloaded and installed Fiddler to examine the request and responses: I can confirm that the requests are being sent from both IE8 and Firefox, and (not only that) that the web server is returning the EXACT same responses to both browsers - headers and body.
So the question is:
Why is this not working? Ajax is no longer a new technology and if it works ok in IE8 (6 years old) then surely Firefox 31 (1 year old) should have no problem.
Here is my server request code:
function getServerTime()
{
if (http)
{
var url;
var userAgent = window.navigator.userAgent
var msie = userAgent.indexOf("MSIE") >= 0;
var msieVerNum;
if (msie)
{
/* The string "MSIE" has been found so this script
* is running under Internet Explorer. */
//Remove the portion of the user agent string to the left of "MSIE ".
userAgent = userAgent.substring(userAgent.indexOf("MSIE "));
/* Remove "MSIE " from the user agent string thus leaving the
* version number at the start of the string. */
userAgent = userAgent.replace("MSIE ","");
msieVerNum = parseInt(userAgent);
if (msieVerNum <= 8)
{
/* This script is running under Internet Explorer 8 or older.
* Hence, using the Date.getTime() function.
*/
url = "http://localhost./telltimeXML.php?" + (new Date()).getTime();
}
}
if (! msie || msieVerNum >= 9)
{
if (Date.now)
{
url = "http://localhost./telltimeXML.php?" + Date.now();
}
}
if (typeof(url) != "undefined")
{
http.open("GET", url, true);
http.onreadystatechange = useHttpResponse;
//http.send(null);
http.send();
}
}
else
{
alert("no XMLHttpRequest object");
}
}
...and here is my event handler:
function useHttpResponse()
{
if (http.readyState == 4)
{
if (http.status == 200)
{
document.getElementById("ShowTime").innerHTML =
http.responseXML.getElementsByTagName("timenow")[0].childNodes[0].nodeValue;
}
}
else
{
document.getElementById("ShowTime").innerHTML = "<img src=\"0002.gif\" />";
}
}