JSON/JQuery .getJSON()在IE8/IE9中不起作用 [英] JSON/JQuery .getJSON() doesn't work in IE8/IE9

问题描述

我不知道是由于 JSON 还是 JQuery .getJSON()而引起的，但是此代码不起作用在 IE8/IE9 .

I don't know if it's due the JSON or JQuery .getJSON() but this code doesn't work in IE8/IE9.

我正试图从 foursquare 中获取一些数据并显示出来.

I'm trying to fetch some data from foursquare and display it.

它在Chrome，Firefox，Safari，Opera和IE10中正常运行.

It works normal in Chrome,Firefox,Safari,Opera and 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还是其他原因?

Is this due the IE8/IE9 or something else?

推荐答案

如果使用JSONP而不是JSON，则它在IE9中有效.只需将&callback=?添加到foursquare URL的末尾，它们的API将提供JSONP:

If you use JSONP instead of JSON, it works in IE9. Simply add &callback=? to the end of your foursquare URL and their API will deliver JSONP:

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

更新了小提琴

我无法在IE8中加载小提琴，但这可能只是JSFiddle的一个问题，因为您发现此修补程序确实可以在实际页面中使用.

I couldn't get the fiddle to load in IE8, but that is probably just a problem with JSFiddle, since you found that this fix does work in your real page.

这是怎么回事:您的$.ajax()呼叫正在进行域XMLHttpRequest ，传统上浏览器根本不允许. JSONP 是一种解决方法，可以解决所有过去，现在和将来的浏览器中的此问题. ，将JSON数据包含在使用<script>标记而不是XMLHttpRequest加载的JavaScript函数调用中.当您查看使用JSONP时foursquare返回的数据时，可以看到此函数调用.由于<script>标签可以从任何域加载，因此已经超出了跨域限制.

Here's what is going on: your $.ajax() call is making a cross-domain XMLHttpRequest, which traditionally was not allowed at all by browsers. JSONP is a workaround that solves this problem in all browsers, past, present, and future, by enclosing the JSON data inside a JavaScript function call which is loaded using a <script> tag instead of XMLHttpRequest. You can see this function call when you look at the data returned by foursquare when you use JSONP. Since <script> tags can be loaded from any domain, this gets past the cross-domain limitation.

JSONP有一些缺点，但是:

JSONP has some disadvantages, though:

1. 您正在调用的Web服务需要支持它.这个可以，但不是全部.

1. The web service you're calling needs to support it. This one does, but not all do.

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

There is a security risk: if the service you're calling gets compromised, it could inject malicious JavaScript into your page.

最近，浏览器开始支持跨域资源共享(CORS) .如果Web服务支持CORS，那么您可以跨域使用XMLHttpRequest，并在JavaScript代码中进行一些附加设置.

More recently, browsers started to support cross-origin resource sharing (CORS). If the web service supports CORS, then you can use XMLHttpRequest across domains with some additional setup in the JavaScript code.

jQuery的$.ajax()自动针对IE10和其他现代浏览器执行此操作，但是 IE8和IE9使用XDomainRequest对象以不同的方式支持CORS . jQuery不支持该对象.

jQuery's $.ajax() does this automatically for IE10 and other modern browsers, but IE8 and IE9 had a different way of supporting CORS using an XDomainRequest object. jQuery does not support this object.

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

This StackOverflow question has some further discussion along with a link to a CORS library for IE8/9 that can be used to add CORS capability to jQuery for those browsers. I haven't tested it myself, but it may be an alternative to JSONP if you'd like to use CORS instead.

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

One thing I notice in the instructions for using this library is that it appears that it will try to use the XDomainRequest in IE10 and greater where it isn't necessary, as well as in IE8/9 where it is needed. This may be OK, or you may want to add a version check or something to only use it in the older versions.

这篇关于JSON/JQuery .getJSON()在IE8/IE9中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！