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网址末尾，其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>标记而不是{{1}加载的JavaScript函数调用中，在过去，现在和将来的所有浏览器中解决此问题}。当您查看使用JSONP时foursquare返回的数据时，您可以看到此函数调用。由于XMLHttpRequest标记可以从任何域加载，因此会超出跨域限制。

JSONP有一些缺点：

您正在呼叫的网络服务需要支持它。这个可以，但不是全部。
存在安全风险：如果您呼叫的服务遭到入侵，则可能会将恶意JavaScript注入您的网页。

最近，浏览器开始支持cross-origin resource sharing (CORS)。如果Web服务支持CORS，那么您可以跨域使用<script>，并在JavaScript代码中使用一些其他设置。

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

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

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

JSON / JQuery .getJSON（）在IE8 / IE9中不起作用

1 个答案: