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

Question

I don't know if it's due the JSON or JQuery .getJSON() but this code doesn't work in IE8/IE9.

I'm trying to fetch some data from foursquare and display it.

It works normal in Chrome,Firefox,Safari,Opera and IE10.

JS

$(document).ready(function){

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

    $.getJSON(url, function(response){

        do{
            var countNum = (response.response.venue.tips.count)-1;
            var randomGroupNum = Math.floor((Math.random()*countNum)+0);
        }while(typeof(response.response.venue.tips.groups[randomGroupNum])==="undefined");

        var countItemNum = response.response.venue.tips.groups[randomGroupNum].count;
        var randomItemNum = Math.floor((Math.random()*countItemNum)+0); 

        var mayorName = response.response.venue.mayor.user.firstName;
        var mayorSurname = response.response.venue.mayor.user.lastName;
        var mayorCount = response.response.venue.mayor.count;
        var mayorPic = "https://is1.4sqi.net/userpix_thumbs"+response.response.venue.mayor.user.photo.suffix;

        var text = response.response.venue.tips.groups[randomGroupNum].items[randomItemNum].text;
        var time = new Date((response.response.venue.tips.groups[randomGroupNum].items[randomItemNum].createdAt)*1000);

        var userName = response.response.venue.tips.groups[randomGroupNum].items[randomItemNum].user.firstName;
        var userSurname = response.response.venue.tips.groups[randomGroupNum].items[randomItemNum].user.lastName;
        var userPic ="https://is1.4sqi.net/userpix_thumbs"+response.response.venue.tips.groups[randomGroupNum].items[randomItemNum].user.photo.suffix;    

        $("#mayor_img").attr("src", mayorPic);
        $("#mayor_name").append("<span style='font-weight:bold;'>"+mayorName+" "+mayorSurname+"</span>");
        $("#mayor_check_in").append("<span>"+mayorCount+" check-ins in last 60 days</span>");

        $("#last_tip_img").attr("src", userPic);
        $("#last_tip_name").append("<span style='font-weight:bold;'>"+userName+" "+userSurname+"</span>");
        $("#last_tip_comment").append("<span>"+text+"</span>");
    });
});

Here is the fiddle of my JS and HTML.

Is this due the IE8/IE9 or something else?

Answer 1

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:

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

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