Why is XMLHttpRequest.status == 0 on all the browsers except IE?

Question

Hi guys!

I'm getting insane with this one...

I made a RESTful.NET webservice with C# and is running as a standalone service. When I make a XMLHttpRequest to retrieve JSON data, all browsers fail, except IE, because the status flag of the instance of XMLHttpRequest is always 0 -- it should be 200, that it's what's happening with IE.

I have already read that 0 is the correct value for a static html page who are not on a webserver. So, I installed Apache and put the page there, but the result is the same (I may have wrongly interpreted the suggestion...)

I ran Fiddler and the requests are always correctly retrieved for any browser!

Here's the JavaScript code that I'm using:

<script type="text/javascript">

var serviceURI = 'http://localhost:8889/WebService/client/25';
var xmlHttp = new XMLHttpRequest();

function clientHandler()
{
    if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
    {
        var json = xmlHttp.responseText;
        var client_id = document.getElementById('clientid');
        var client_name = document.getElementById('clientname');
        var client_address = document.getElementById('clientaddress');
        var client_phone = document.getElementById('clientphone');

        var client = eval('(' + xmlHttp.responseText + ')');
        client_id.value = client.id;
        client_name.value = client.name;
        client_address.value = client.address;
        client_phone.value = client.phoneNumber;
    }
    else
        alert("Error:\nxmlHttp.responseText = " + xmlHttp.responseText + "\nstatus = " + xmlHttp.status);
}

function sendRequest()
{
    if (xmlHttp)
    {
        xmlHttp.onreadystatechange = clientHandler;
        xmlHttp.open('GET', serviceURI, true);
        xmlHttp.setRequestHeader("Content-Type", "application/json; charset=utf-8");
        xmlHttp.send(null);
    }
    else
        alert('xmlHttp not defined!');
}
</script>

I would be really pleased if someone could explain me what's happening; I haven't found any sactisfatory explnation for this...

Also, is it better to use a framework like jQuery for this job?

Thanks everybody!

PS: I've have consulted Jon Flanders RESTful.NET, but it ain't helping much on solving this... :(

Edit: I moved the answer to this question to a comment bellow!

Answer 1

Internet Explorer uses a different object than the other browsers to make Ajax requests.
Microsoft used the Microsoft.XMLHTTP object, while the other browsers use the XMLHttpRequest object.

There's an article here explaining it and explaining how to do a workaround.

http://ajaxpatterns.org/Cross-Browser_Component

Your best bet is to use one of the many libraries out there for making Ajax requests. the'll handle the abstraction for you. I see your post is tagged as C#. If this is the case and you're developing pages with Asp.NET, you could be using the standard Asp.Net Ajax tools (a ScriptManager and an UpdatePanel) although an awful lot of people prefer to use JQuery.

Answer 2

The present problem is related with the same origin policy. I've found 2 articles on StackOverflow that helped me to identify the problem:

• http://stackoverflow.com/questions/1980880/xmlhttprequest-status-returns-0-and-responsetext-is-blank-in-firefox-3-5
• http://stackoverflow.com/questions/3076414/ways-to-circumvent-the-same-origin-policy

The solution for the problem is here! I added the following line to the method of the server:

WebOperationContext.Current.OutgoingResponse.Headers.Add("Access-Control-Allow-Origin", "*");

By adding this line for each method, the response's header comes as follow:

HTTP/1.1 200 OK
Content-Length: 81
Content-Type: application/json; charset=utf-8
Server: Microsoft-HTTPAPI/1.0
Access-Control-Allow-Origin: *
Date: Sun, 31 Oct 2010 02:34:34 GMT

<json data>

This way the service works on Firefox, Safari, Chrome and IE. But, as is said on the link with the answer, there must be a better way to solve this. I'll try to find something about that :)