$.ajax call working fine in IE8 and Doesn't work in firefox and chrome browsers

Question

here is my code

$.ajax(
{
    type: "GET", 
    url: 'http://devserver:7995/stdpart/services/GetAllPartsWithFilter',
    dataType: 'json',
    data: jsonPartsData,
    success: fnGetPartsData, 
    error: PartsLoadError  
});

This is code working fine in IE8, But getting failed in Firefox and Chrome browsers. When i, inspect the XHR object, it's saying the status code code is 0. I have checked all other questions, none of them are helped me to identify the issue.

Let me know, if i am doing any thing wrong in this code. If $.ajax has some compatibility issues, then please suggest something equivalent to it.

Update: We found one solution at http://www.xml.com/pub/a/2005/12/21/json-dynamic-script-tag.html

It is using the concept of Dynamic Scripting. We have done the same thing in our application, then every thing seems to be working now. Yet to analyze fully.

Solution 1

this is because of the Same origin policy. you cannot use ajax to call external sites. if you really want to use, you have to use JSONP. Or you can use serverside proxy for this. means, call external site in the server side and do ajax call to the that webservice.

---

UPDATE:

create webserveice in your site and in the webmethod put following code

string proxyURL = "http://devserver:7995/stdpart/services/GetAllPartsWithFilter";
HttpWebRequest request = (HttpWebRequest)WebRequest.Create(proxyURL);
request.Method = "GET";
HttpWebResponse response = (HttpWebResponse)request.GetResponse();

if (response.StatusCode.ToString().ToLower() == "ok")
{
    Stream content = response.GetResponseStream();
    StreamReader contentReader = new StreamReader(content);         
    return contentReader.ReadToEnd();
}
return string.Empty;

then access local service using your code.

for more information please refer this link

Solution 2

Another solution would be to use the jQuery ajaxTransport extension that uses XDomainRequest for IE8+.

Comments

[Felix Kling]

Or use the Access-Control-Allow-Origin header (which is not supported in all browsers though).

[Dinesh]

Can you please share some sample code, if you have. I Have tried few examples, but nothing worked for me :(

[Dinesh]

With the pure JavaScript also, i am getting the same issue. I have customized the header by adding Access-Control-Allow-Origin and some other parameters. Nothing worked :(

[hrishikeshp19]

Can you confirm that pure JS Ajax DOES work in IE and NOT in chrome/ff/safari ?

[Chamika Sandamal]

if you want to use JSONP, you have to change the server code as well. easyest way is using serverside proxy for this. try this link for more details how to use serverside proxy, see the updated answer

[Chamika Sandamal]

@Dinesh: is this sample is fine for you? or do i need to update more?

[Dinesh]

@Sandamal: we are trying the wrapper services as exactly you have suggested.