Jquery $.get or $.ajax not working in Internet Explorer

Question

I've been running this code in IE 9 without luck. I've looked at all the posts about UTF-8 fixing and such but to no avail. Any thoughts?

$.get({
    url: 'http://api.flickr.com/services/rest/?api_key={apikey}&method=flickr.collections.getTree&user_id=66970820%40N03&collection_id=66947766-72157631850748939',
    success: function () {
        console.log('success!');
    }
}).done(function () {
    console.log('done');
}).fail(function () {
    console.log('fail')
});

It works just fine in Safari, FF and Chrome. When pasting the URL into IE, the response is fine.

Solution 1

@Iden Gozlan, your answer sounds good, but my feeble mind got confused.

@Erik and @charlietfl your suggestions to JSONP got me down the right path. It definitely is a cross domain scripting issue. Can't understand why IE was the only one to not allow this. I edited my code as such and all worked out great!

$.ajax({
  url: 'http://api.flickr.com/services/rest/?api_key={apikey}&method=flickr.collections.getTree&user_id=66970820%40N03&collection_id=66947766-72157631850748939&jsoncallback=doSomeGreatStuff',
  dataType: "jsonp"
});

function doSomeGreatStuff(response) {
  // do some great stuff with the json response
  console.log( response.collections.collection[0].id );
}

Resources that helped me are here and here and even here

Solution 2

This jQuery XDomainRequest plugin works wonders.
I had ajax issues with IE8 and 9 but simply including this plugin without changing any code has given me IE8 and 9 CORS ajax capabilities :)

Solution 3

Its known issue, please read this post: IE9 jQuery AJAX with CORS returns "Access is denied"

you should use XMLHttpRequest original call or download the following plugin which will provide you the solution for this case:

https://github.com/jaubourg/ajaxHooks/blob/master/src/xdr.js