Question

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

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

• XMLHTTPRequest.status returns 0 and responseText is blank in FireFox 3.5
• 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 🙂