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

我不知道它是否应该是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(""+mayorName+" "+mayorSurname+""); $("#mayor_check_in").append(""+mayorCount+" check-ins in last 60 days"); $("#last_tip_img").attr("src", userPic); $("#last_tip_name").append(""+userName+" "+userSurname+""); $("#last_tip_comment").append(""+text+""); }); }); 

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

这是IE8 / IE9还是别的？

Answer 1

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

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

更新小提琴

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

这是正在发生的事情：您的$.ajax()调用正在进行跨域XMLHttpRequest ，传统上浏览器根本不允许这样做。 JSONP是一种解决方法，通过将JSON数据封装在使用标记而不是XMLHttpRequest加载的JavaScript函数调用中，在过去，现在和将来的所有浏览器中解决此问题。 当您查看使用JSONP时foursquare返回的数据时，您可以看到此函数调用。 由于标记可以从任何域加载，因此超出了跨域限制。

但JSONP有一些缺点：

1. 您正在呼叫的Web服务需要支持它。 这个，但不是全部。

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

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

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

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

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