4

我不知道是由于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>");
    });
});

这是我的 JS 和 HTML 的小提琴。

这是由于 IE8/IE9 还是其他原因？

4

1 回答 1

14

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

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

更新的小提琴

我无法在 IE8 中加载小提琴，但这可能只是 JSFiddle 的一个问题，因为您发现此修复程序在您的真实页面中确实有效。

这是发生的事情：您的$.ajax()呼叫正在发出跨域 XMLHttpRequest，传统上浏览器根本不允许这样做。JSONP是一种解决方法，通过将 JSON 数据封装在使用<script>标签而不是XMLHttpRequest. 使用 JSONP 时查看foursquare 返回的数据可以看到这个函数调用。由于<script>可以从任何域加载标签，这超越了跨域限制。

不过 JSONP 也有一些缺点：

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

  2. 存在安全风险：如果您调用的服务受到威胁，它可能会将恶意 JavaScript 注入您的页面。

最近，浏览器开始支持跨域资源共享（CORS）。如果 Web 服务支持 CORS，那么您可以XMLHttpRequest通过 JavaScript 代码中的一些额外设置跨域使用。

jQuery$.ajax()为 IE10 和其他现代浏览器自动执行此操作，但IE8 和 IE9使用对象支持 CORS 的方式不同。XDomainRequestjQuery 不支持这个对象。

这个StackOverflow 问题有一些进一步的讨论以及指向IE8/9 的 CORS 库的链接，可用于为这些浏览器向 jQuery 添加 CORS 功能。我自己没有测试过，但如果您想使用 CORS，它可能是 JSONP 的替代品。

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

于 2013-03-27T09:43:48.980 回答