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 .这可能没问题，或者您可能想要添加版本检查或仅在旧版本中使用它的东西。