JSON/JQuery的.getJSON（）在IE8/IE9不工作

Question

我不知道这是否是由于该JSON或JQuery的.getJSON（）但是这个代码不IE8工作/IE9。

我试图从foursquare中获取一些数据并显示它。

它在Chrome，Firefox，Safari，Opera和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。

这是由于IE8/IE9或其他？

Answer 1

如果您使用JSONP而不是JSON，它可以在IE9中工作。只需添加&callback=?到您的foursquare URL的末尾，他们的API将提供JSONP：

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

Updated fiddle

我无法得到的小提琴在IE8加载，但是这可能是只是一个的jsfiddle问题，因为你发现这个修补程序在你的真实页面中工作。

发生了什么事情：您的$.ajax()致电cross-domain XMLHttpRequest，传统上，浏览器根本不允许这样做。 JSONP是一种解决方法，通过将JSON数据封装在使用<script>标记而不是XMLHttpRequest加载的JavaScript函数调用中，解决了所有浏览器中过去，现在和将来的问题。当您使用JSONP查看由foursquare返回的数据时，您可以看到此函数调用。由于<script>标签可以从任何域加载，因此会超过跨域限制。

JSONP有一些缺点，但：

1. 你调用需要的web服务，以支持它。这个可以，但不是全部。

2. 存在安全隐患：如果您打电话的服务遭到入侵，可能会向您的页面注入恶意JavaScript。

最近，浏览器开始支持cross-origin resource sharing (CORS)。如果Web服务支持CORS，那么你可以跨域使用XMLHttpRequest与JavaScript代码一些额外的设置。

jQuery的$.ajax()会自动为IE10和其他现代浏览器执行此操作，但IE8 and IE9 had a different way of supporting CORS会使用XDomainRequest对象。 jQuery不支持这个对象。

这个StackOverflow question有一些进一步的讨论，以及一个链接到CORS library for IE8/9，可以用来为这些浏览器的jQuery添加CORS功能。我没有自己测试过，但如果您想使用CORS，它可能是JSONP的替代方案。

我在使用这个库的说明中注意到的一件事是，它似乎会尝试在IE10及更高版本中使用XDomainRequest，在IE8/9中它不是必需的。这可能是好的，或者你可能想添加一个版本检查或某些东西只在旧版本中使用它。