JSON/JQuery .getJSON() doesn't work in IE8/IE9

jquery, json

Solution

If you use JSONP instead of JSON, it works in IE9. Simply add `&callback=?` to the end of your foursquare URL and their API will deliver JSONP:

var url = "https://api.foursquare.com/v2/venues/4dab1ba55da3ba8a479999b2?oauth_token=ZKLARA2MZVA4VXES3VTMP2XJOVXE1X3OBJMBXMDFAB1NR0V4&v=20130305&callback=?";

Updated fiddle

I couldn't get the fiddle to load in IE8, but that is probably just a problem with JSFiddle, since you found that this fix does work in your real page.

Here's what is going on: your `$.ajax()` call is making a cross-domain XMLHttpRequest, which traditionally was not allowed at all by browsers. JSONP is a workaround that solves this problem in all browsers, past, present, and future, by enclosing the JSON data inside a JavaScript function call which is loaded using a `<script>` tag instead of `XMLHttpRequest`. You can see this function call when you look at the data returned by foursquare when you use JSONP. Since `<script>` tags can be loaded from any domain, this gets past the cross-domain limitation.

JSONP has some disadvantages, though:

The web service you're calling needs to support it. This one does, but not all do.

There is a security risk: if the service you're calling gets compromised, it could inject malicious JavaScript into your page.

More recently, browsers started to support cross-origin resource sharing (CORS). If the web service supports CORS, then you can use `XMLHttpRequest` across domains with some additional setup in the JavaScript code.

jQuery's `$.ajax()` does this automatically for IE10 and other modern browsers, but IE8 and IE9 had a different way of supporting CORS using an `XDomainRequest` object. jQuery does not support this object.

This StackOverflow question has some further discussion along with a link to a CORS library for IE8/9 that can be used to add CORS capability to jQuery for those browsers. I haven't tested it myself, but it may be an alternative to JSONP if you'd like to use CORS instead.

One thing I notice in the instructions for using this library is that it appears that it will try to use the `XDomainRequest` in IE10 and greater where it isn't necessary, as well as in IE8/9 where it is needed. This may be OK, or you may want to add a version check or something to only use it in the older versions.

Problem

Original source

Related problems

• $.getJSON not working in Internet Explorer
• Cross-origin Ajax requests don't work in Opera and IE9?