JQuery $ .ajax not working in IE when cross domain calls

Question

I am executing a cross-domain request using $.ajax . It works on Firefox and Chrome, but does not cause a call in IE 7 or 8. Can someone tell me what happened with the following?

• I used JSON and JSONP (which I stopped using due to some user restrictions).
• I already use the Allow-access-control-origin header on my site. (Without them, Chrome and Firefox did not complete successful requests.)
• I already tried https://developer.mozilla.org/en/http_access_control

The code:

 $.ajax({ type: 'GET', url: "http://anotherdomain.com/Service/GetControl?id=" + zoneID, cache: false, contentType: "application/x-www-form-urlencoded", async: false, beforeSend: function (request) { //alert('before send'); //request.setRequestHeader("X-Requested-With", "XMLHttpRequest"); //request.setRequestHeader("X-PINGOTHER", "pingpong"); } , success: function (data, status) { //alert("Data returned :" + data); //alert("Status :" + status); if (status == "success" && data != "") $("#" + div.id).append(data); else $("#" + div.id).attr("style", "display:none;"); }, error: function (XMLHttpRequest, textStatus, errorThrown) { alert(textStatus); alert(errorThrown); } }); 

I have tried various tips featured on several sites, but have so far failed.

Answer 1

Could you check if the problem is related to IE without defining security zones to allow cross-domain requests? see this Microsoft page for an explanation.

OTOH, this page mentions that IE7 and eariler cannot make cross-calls between domains, but IE8 can use a different object than XMLHttpRequest, which one jQuery uses. Could you check if XDomainRequest is working?

EDIT (2013-08-22)

The second link is dead, so I am writing here some information taken from the return path machine :

XDomainRequest Supported: IE8

Instead of implementing the XMLHttpRequest CORS version, the IE team sent with its own relevant object called XDomainRequest. Using XDomainRequest has been simplified from XMLHttpRequest by adding more events (with onload, perhaps the most important).

This implementation has several limitations associated with it. For example, cookies are not sent when using this object, which can be a headache for server-based cookie sessions. In addition, ContentType cannot be installed, which creates a problem in ASP.NET and possibly in other server languages ​​(see http://www.actionmonitor.co.uk/NewsItem.aspx?id=5 ).

 var xdr = new XDomainRequest(); xdr.onload = function() { alert("READY"); }; xdr.open("GET", "script.html"); xdr.send(); 

Answer 2

For IE8 and IE9 you need to use XDomainRequest (XDR). If you look below, you will see it in a similar formatting like $ .ajax. As for my research, I cannot get this cross-domain working environment in IE6 and 7 (still looking for a job for this). XDR first appeared in IE8 (it is also in IE9). So, first of all, I'm testing 6/7 and not doing AJAX.

IE10 + can perform cross-domain like all other browsers (congrats Microsoft ... sigh)

After this else, if the tests for XDomainRequest are in the window (apparently better than browsing the browser) and makes an AJAX JSON request in the same way, the other, as a rule, ELSE does this usually with $ .ajax.

Hope this helps! Took me forever to get it all originally

XDomainRequest Object Information

 // call with your url (with parameters) // 2nd param is your callback function (which will be passed the json DATA back) crossDomainAjax('http://www.somecrossdomaincall.com/?blah=123', function (data) { // success logic }); function crossDomainAjax (url, successCallback) { // IE8 & 9 only Cross domain JSON GET request if ('XDomainRequest' in window && window.XDomainRequest !== null) { var xdr = new XDomainRequest(); // Use Microsoft XDR xdr.open('get', url); xdr.onload = function () { var dom = new ActiveXObject('Microsoft.XMLDOM'), JSON = $.parseJSON(xdr.responseText); dom.async = false; if (JSON == null || typeof (JSON) == 'undefined') { JSON = $.parseJSON(data.firstChild.textContent); } successCallback(JSON); // internal function }; xdr.onerror = function() { _result = false; }; xdr.send(); } // IE7 and lower can't do cross domain else if (navigator.userAgent.indexOf('MSIE') != -1 && parseInt(navigator.userAgent.match(/MSIE ([\d.]+)/)[1], 10) < 8) { return false; } // Do normal jQuery AJAX for everything else else { $.ajax({ url: url, cache: false, dataType: 'json', type: 'GET', async: false, // must be set to false success: function (data, success) { successCallback(data); } }); } } 

Answer 3

Jquery does this for you, only to set $.support.cors = true; . Then cross-domain query works fine in all browsers for jQuery users.

Answer 4

Just install this jQuery plugin: jQuery Cross-Domain AJAX for IE8

This 1.4kb plugin works immediately in Internet Explorer 8 and .

Enable the plugin after jQuery and call the ajax request as usual. Nothing more is required.

• GitHub repo plugin and installation instructions

Answer 5

Add extra transport in jquery for IE. (Just add this code to your script at the end)

 $.ajaxTransport("+*", function( options, originalOptions, jqXHR ) { if(jQuery.browser.msie && window.XDomainRequest) { var xdr; return { send: function( headers, completeCallback ) { // Use Microsoft XDR xdr = new XDomainRequest(); xdr.open("get", options.url); xdr.onload = function() { if(this.contentType.match(/\/xml/)){ var dom = new ActiveXObject("Microsoft.XMLDOM"); dom.async = false; dom.loadXML(this.responseText); completeCallback(200, "success", [dom]); }else{ completeCallback(200, "success", [this.responseText]); } }; xdr.ontimeout = function(){ completeCallback(408, "error", ["The request timed out."]); }; xdr.onerror = function(){ completeCallback(404, "error", ["The requested resource could not be found."]); }; xdr.send(); }, abort: function() { if(xdr)xdr.abort(); } }; } }); 

This solved my problem with Jquery $ .ajax error for AJAX request for cross domain.

Greetings.

Answer 6

Others coming here may well read http://blogs.msdn.com/b/ieinternals/archive/2010/05/13/xdomainrequest-restrictions-limitations-and-workarounds.aspx , which talk about XDomainRequest restrictions

Answer 7

For anyone who might have this problem using jQuery 2.0 (I know that I know), Jay Dave wrote a better way to work around jQuery, but I have something else to add its code, namely:

• make sure you use the same protocol for requests (HTTP → HTTP or HTTPS → HTTPS), Ayush Gupta gave a link to information about the problems
• handle onprogress events using the no-op function (this will prevent IE from rejecting requests after receiving the first bits from the server.

The full code is below:

 // add ajax transport method for cross domain requests when using IE9 if('XDomainRequest' in window && window.XDomainRequest !== null) { $.ajaxTransport("+*", function( options, originalOptions, jqXHR ) { // verify if we need to do a cross domain request // if not return so we don't break same domain requests if (typeof options.crossDomain === 'undefined' || !options.crossDomain) { return; } var xdr; return { send: function( headers, completeCallback ) { // Use Microsoft XDR xdr = new XDomainRequest(); xdr.open("get", options.url); // NOTE: make sure protocols are the same otherwise this will fail silently xdr.onload = function() { if(this.contentType.match(/\/xml/)){ var dom = new ActiveXObject("Microsoft.XMLDOM"); dom.async = false; dom.loadXML(this.responseText); completeCallback(200, "success", [dom]); } else { completeCallback(200, "success", [this.responseText]); } }; xdr.onprogress = function() {}; xdr.ontimeout = function(){ completeCallback(408, "error", ["The request timed out."]); }; xdr.onerror = function(){ completeCallback(404, "error", ["The requested resource could not be found."]); }; xdr.send(); }, abort: function() { if(xdr) xdr.abort(); } }; }); } 

Answer 8

Just add "? Callback =?" (or "& callback =?") to your URL:

 $.getJSON({ url:myUrl + "?callback=?", data: myData, success: function(data){ /*My function stuff*/ } }); 

When making calls (with everything else set up correctly for the cross-domain, as indicated above), this will lead to proper JSONP formatting.

A more detailed explanation can be found in the answer here .

Answer 9

@Furqan Could you tell me if you tested this using the HTTP POST method,

Since I am also working on the same situation, but I cannot send data to another domain.

But after reading this, it was pretty simple ... only you need to forget about OLD browsers. I am giving the code to send using the POST method from the same url for quick reference

 function createCORSRequest(method, url){ var xhr = new XMLHttpRequest(); if ("withCredentials" in xhr){ xhr.open(method, url, true); } else if (typeof XDomainRequest != "undefined"){ xhr = new XDomainRequest(); xhr.open(method, url); } else { xhr = null; } return xhr; } var request = createCORSRequest("POST", "http://www.sanshark.com/"); var content = "name=sandesh&lastname=daddi"; if (request){ request.onload = function(){ //do something with request.responseText alert(request.responseText); }; request.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); request.setRequestHeader("Content-length", content.length); request.send(content); } 

Answer 10

Notice by adding

 $.support.cors = true; 

was enough to force $ .ajax to work with IE8

Answer 11

Microsoft always plows a self-destructive beard (at least in IE):

http://www.nczonline.net/blog/2010/05/25/cross-domain-ajax-with-cross-origin-resource-sharing/

CORS works with XDomainRequest in IE8. But IE 8 does not support preflight or verified requests, while Firefox 3.5+, Safari 4+, and Chrome support such requests.

Answer 12

I have the same problem in IE, I solved it by replacing:

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 

For

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 

So basically upgrade the jquery version.

Answer 13

I had a similar problem in IE9 where some CORS calls were interrupted and others were not. My application also depends on the promises interface, so the XDomainRequest suggestions above were not EXACTLY what I needed, so I added a deferral to my workaround service.get for IE9. Hope this can be helpful for someone else performing this issue.

  get: function (url) { if ('XDomainRequest' in window && window.XDomainRequest !== null) { var deferred = $.Deferred(); var xdr = new XDomainRequest(); xdr.open("get", url); xdr.onload = function() { json = xdr.responseText; parsed_json = $.parseJSON(json); deferred.resolve(parsed_json); } xdr.send(); return deferred; } else { return $.ajax({ url: url, type: 'GET', dataType: 'json', crossDomain: true }); } } 

Answer 14

It's hard to say due to lack of formatting in the question, but I think I see two questions with ajax call.

1) app / x -www-form-urlencoded for contentType must be in quotation marks

2) There must be a comma separating the contentType and async parameters.