jquery - 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 中加载 fiddle ，但这可能只是 JSFiddle 的问题，因为您发现此修复在您的真实页面中确实有效。

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

但是 JSONP 有一些缺点:

1. 您调用的网络服务需要支持它。这个可以，但不是所有的都可以。

2. 存在安全风险:如果您调用的服务遭到破坏，它可能会将恶意 JavaScript 注入(inject)您的页面。

最近，浏览器开始支持 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 的替代方案。

我在使用此库的说明中注意到的一件事是，它似乎会尝试使用 XDomainRequest在 IE10 及更高版本中不需要它的地方，以及在 IE8/9 中需要它的地方。这可能没问题，或者您可能想添加版本检查或仅在旧版本中使用它的东西。