Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

XMLHttpRequest asynchronous not working, always returns status 0

Here's a sample XMLHttpRequest I cobbled together from w3schools

<html>
<head>
<script type="text/javascript">
function loadXMLDoc()
{
  var T="nothing";

  xmlhttp=new XMLHttpRequest();
  xmlhttp.overrideMimeType('text/plain');  // don't sc
  xmlhttp.onreadystatechange=function()
  {
    alert ("rdystate: " + xmlhttp.readyState);
    alert ("status: "   + xmlhttp.status);
    alert ("Text: "     + xmlhttp.statusText);
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
      T = xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","SBL_PROBES.htm",true);
xmlhttp.send(null);
//T = xmlhttp.responseText;
alert(T);
}
</script>
</head>
<body>

<h2>Using the XMLHttpRequest object</h2>
<div id="myDiv"></div>
<button type="button" onclick="loadXMLDoc()">CHange Content</button>

</body>
</html>

XMLHttpRequest always returns a zero status.

Nothing shows up in Firefox's error console.

If I change the request to synchronous one by changing the line

xmlhttp.open("GET","SBL_PROBES.htm",true);

to

xmlhttp.open("GET","SBL_PROBES.htm",false);

and un-comment the line

//T = xmlhttp.responseText;

The text of the requested file is returned.

The HTM and the file reside in the same directory. If you try this you will need a file SBL_PROBES.htm there also, it's contents are irrelevant.

I'm using Firefox 3.6.22.

Could this be a cross domain problem? If so, why does it work as a synchronous request?

like image 944
Mike D Avatar asked Sep 12 '11 20:09

Mike D


2 Answers

You can use a function inside the if statement. This function is executed when readystate changes to 4.

var handleResponse = function (status, response) {
   alert(response)
}
var handleStateChange = function () {
   switch (xmlhttp.readyState) {
      case 0 : // UNINITIALIZED
      case 1 : // LOADING
      case 2 : // LOADED
      case 3 : // INTERACTIVE
      break;
      case 4 : // COMPLETED
      handleResponse(xmlhttp.status, xmlhttp.responseText);
      break;
      default: alert("error");
   }
}
var xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange=handleStateChange;
xmlhttp.open("GET","SBL_PROBES.htm",true);
xmlhttp.send(null);

Your old code did a asynchronous call and continued just with the alert Statement. T was empty at this time.

Ok, I'll explain a little bit how this whole thing works:

First we define two callback functions, which we call later in the request, named handleResponse and handleStateChange.

Afterwards we create a Object, which represents the XMLHttpRequest

var xmlhttp=new XMLHttpRequest();

This results in an Object as follows (simplyfied):

XMLHttpRequest { status=0, readyState=0, multipart=false, onreadystatechange=handleEvent()}

With the open(...) function call you set parameters for the request:

xmlhttp.open("GET","SBL_PROBES.htm",true);

This means, do a asynchronous GET Request to fetch the Page SBL_PROBES.htm Then the send(...) function is called which fires the request itself.

We registered a callback function for the onreadystatechange, as you can imagine, this is actually an eventHandler. Each time the state changes this function is called. (It is the same as if you register a callback function to an onKeyUp Event in a form, this callback is triggered each time your key goes up :) )

The only case which is of interest for your problem is state 4. Therefor the handleRequest callback function is called only in state 4. At this time you Request has actually a result, and further a status. (Status means your webserver returned a status code 200=ok, 404=not found etc.)

That is not all the magic which is behind the ajax stuff, but should give you a simplified overview, what is actually happening behind the scenes. It is important that you test this on a webserver, do not use file:// for testing.

If you need more in detail info, just let me know.

like image 155
evildead Avatar answered Nov 15 '22 15:11

evildead


Status Zero happens for two reasons.

  1. You are running off the file protocol.
  2. Something is posting back the page when the Ajax request is active.

I believe you are seeing #2 here. SO you need to cancel the button click.

<button type="button" onclick="loadXMLDoc(); return false;">CHange Content</button>

In your code above that alert(T) will always say nothing when the request is asynchronous.

like image 32
epascarello Avatar answered Nov 15 '22 15:11

epascarello