getJSON or AJAX requests not working with IE9

Question

I have been trying to solve this problem for hours (searched here as well but none of the solutions worked) so I had no other option but to hope for someone to tell me why this is happening and how can I fix it.

This is a simple code that works with Firefox but not with IE9 (don't have other versions)

Example code is here:

http://jsfiddle.net/z5b2J/

Source is this one:

$.ajax({
  url: "http://query.yahooapis.com/v1/public/yql?q=select%20script%20from%20html%20where%20url%3D%27https%3A%2F%2Ftesting.website.com%2F%3Fcid%3D48hgfd45430DD%26id%3D4830F8CF0454312%27&format=json&diagnostics=true&_maxage=86400",
  success: function(){
   alert('hi');
  }
});

The website doesn't need to be real for testing purpose.

As you can see in the fiddle under Firefox, an alertbox appears saying "hi" BUT if you run the exact same code in IE9, the alertbox doesn't appear.

The same situation occurs with getJSON method, this is a problem for me because I want to run some code instead the alert but it won't run in IE9.

Answer 1

Did you try using getJSON() instead of ajax? This is a cross-domain request and you're fetching json so that it probably the problem.

It's working in both browsers now:

$.getJSON("http://query.yahooapis.com/v1/public/yql?q=select%20script%20from%20html%20where%20url%3D%27https%3A%2F%2Ftesting.website.com%2F%3Fcid%3D48hgfd45430DD%26id%3D4830F8CF0454312%27&format=json&diagnostics=true&_maxage=86400&callback=?",function(){
   alert('hi');
});

Answer 2

The problem of IE9 depends on advanced cache management.

If you empty the cache of IE and re-run the ajax request: the first time will work.

To resolve this problem you must send your HTTP response with "noStore = true" and "Duration = 0" or equivalent.

Here is an example in MVC.

Answer 3

Using $.getJSON or $.ajax you must also specify dataType parameter 'jsonp'

Here the example using getJSON:

var webpage = ".... your very long url ....";
var anchor = document.createElement('a');
anchor.href = webpage;
// handle the multiple parameters
anchor.search += ((anchor.search.length > 0) ? "&" : "?");
anchor.search += "callback=?";

$.getJSON(anchor.href, 'jsonp',  function(data, textStatus, jqXHR){
   alert('hi');
});

Answer 4

I solved problem by adding "Duration=0" with the url

Answer 5

If you add callback=? to the URL, it will be transformed to something like callback=jQuery1820719005049791166_1366033695001 . It is the name of the function and on the server side you should wrap your json encoded object in this function call. So your response body should be not just {ok: true}, but jQuery1820719005049791166_1366033695001({ok: true}); . It worked for me!