JSON / JQuery.getJSON () does not work in IE8 / IE9

I don't know if this is due to JSON or JQuery.getJSON () , but this code does not work in IE8 / IE9 .

I am trying to extract some data from foursquare and display it.

It works fine 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 script of my JS and HTML .

Is it related to IE8 / IE9 or something else?

+4
source share
1 answer

If you use JSONP instead of JSON, it works in IE9. Just add &callback=? at the end of your quadruple URL, and their API will provide JSONP:

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

Updated fiddle

I was unable to load the script in IE8, but this is probably just a JSFiddle problem, since you found that this fix works on your real page.

Here's what happens: your call to $.ajax() creates a cross-domain XMLHttpRequest that browsers have traditionally not allowed at all. JSONP is a workaround that solves this problem in all browsers, past, present and future, by including JSON data in a JavaScript function that is loaded using the <script> instead of XMLHttpRequest . You can see this function call when you look at the data returned by four squares when using JSONP. Since <script> tags can be loaded from any domain, this overcomes the restriction between domains.

JSONP has some disadvantages:

  • The web service you invoke must support it. It does, but not everyone does.

  • There is a security risk: if the service you are calling is compromised, it may inject malicious JavaScript into your page.

More recently, browsers have begun to support resource sharing (CORS) . If the web service supports CORS, you can use XMLHttpRequest for domains with some additional tweaking in your JavaScript code.

jQuery $.ajax() does this automatically for IE10 and other modern browsers, but IE8 and IE9 used a different way to support CORS using the XDomainRequest object. jQuery does not support this object.

There is additional discussion on this question fooobar.com/questions/369359 / ... , as well as a link to the CORS library for IE8 / 9 , which can be used to add CORS features for jQuery for these browsers. I have not tested it myself, but it can be an alternative to JSONP if you want to use CORS instead.

In the instructions for using this library, I notice that it will try to use XDomainRequest in IE10 and more where it is not needed, as well as in IE8 / 9 where it is necessary, It may be OK, or you can add version checking or something- else to use it only in older versions.

+14
source

All Articles