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，在IE8/9中它不是必需的。這可能是好的，或者你可能想添加一個版本檢查或某些東西只在舊版本中使用它。