$.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.

Are you sure you are returning valid JSON? I had cases where IE evaluated malformed JSON (like `{ "key" : "value", }`) where other browser fail (as they should). Any error messages? — Daff, Jan 02 '12 at 08:15
Actually you cannot make Ajax calls to an external site, unless you have a specific setup. — Felix Kling, Jan 02 '12 at 08:19
@Andreas: Right, I'd say this belongs to special setup ;) It does not look like the OP is using JSONP, so the only other way is to set the `Access-Control-Allow-Origin ` header. — Felix Kling, Jan 02 '12 at 08:26
When i check the error in Chrome Browser developer tools, it's returning the error message like this --- "XMLHttpRequest cannot load http://devserver:7995/stdpart/services/GetAllPartsWithFilter?_=1325492196886. Origin http://ie1alt5nhm2bs is not allowed by Access-Control-Allow-Origin." — Dinesh, Jan 02 '12 at 08:29
I think, because of this only, it's not working in Firefox also. How to fix this security issue? — Dinesh, Jan 02 '12 at 08:30
That's what I'm saying.... you cannot access third party domains. Search here on SO how to solve this, it was already asked quite often. — Felix Kling, Jan 02 '12 at 08:31
How to add custom headers to my $.ajax call? I got confused a little. — Dinesh, Jan 02 '12 at 09:17

Chamika Sandamal · Accepted Answer · 2012-02-11T19:28:19.237

6

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

edited Feb 11 '12 at 19:28

answered Jan 02 '12 at 08:28

Chamika Sandamal

23,565
5
63
86

1

Or use the `Access-Control-Allow-Origin` header (which is not supported in all browsers though). – Felix Kling Jan 02 '12 at 08:43
1

Can you please share some sample code, if you have. I Have tried few examples, but nothing worked for me :( – Dinesh Jan 02 '12 at 10:27
1

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 Jan 02 '12 at 11:40
1

@Dinesh: is this sample is fine for you? or do i need to update more? – Chamika Sandamal Jan 04 '12 at 04:17
@Sandamal: we are trying the wrapper services as exactly you have suggested. – Dinesh Jan 04 '12 at 05:29

score 3 · Answer 2 · answered Nov 18 '13 at 13:29

3

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

answered Nov 18 '13 at 13:29

nachtigall

2,447
2
27
35

score 0 · Answer 3 · answered Jan 02 '12 at 08:17

0

I do think there is anything wrong with your code.

Please see Pure JavaScript Ajax calls

Different libraries implement Ajax APIs in different manner. So, in your case it must be a problem with the version of jquery you are using.

Please try Pure JavaScript Ajax call, and see if it works on all browsers. If it does, then there is a problem with jquery which you do not want to spend time on. If it does not then you are missing something.

answered Jan 02 '12 at 08:17

hrishikeshp19

8,838
26
78
141

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 :( – Dinesh Jan 02 '12 at 10:29
Can you confirm that pure JS Ajax DOES work in IE and NOT in chrome/ff/safari ? – hrishikeshp19 Jan 02 '12 at 11:28

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

3 Answers3

Linked

Related