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

JSONの代わりにJSONPを使用する場合、IE9で機能します。Foursquare URLの最後に追加&callback=?するだけで、APIがJSONPを配信します。

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

更新されたフィドル

IE8にフィドルを読み込むことができませんでしたが、この修正が実際のページで機能することがわかったため、これはおそらくJSFiddleの問題にすぎません。

何が起こっているのか：あなたの$.ajax()呼び出しはクロスドメインXMLHttpRequestを行っていますが、これは従来ブラウザではまったく許可されていませんでした。JSONP<script>は、の代わりにタグを使用して読み込まれるJavaScript関数呼び出し内にJSONデータを含めることにより、過去、現在、未来のすべてのブラウザーでこの問題を解決する回避策ですXMLHttpRequest。JSONPを使用するときにfoursquareによって返されるデータを見ると、この関数呼び出しを確認できます。<script>タグは任意のドメインからロードできるため、これはクロスドメインの制限を超えます。

ただし、JSONPにはいくつかの欠点があります。

  1. 呼び出しているWebサービスはそれをサポートする必要があります。これはそうですが、すべてがそうするわけではありません。

  2. セキュリティ上のリスクがあります。呼び出しているサービスが危険にさらされると、悪意のあるJavaScriptがページに挿入される可能性があります。

最近では、ブラウザがクロスオリジンリソースシェアリング（CORS）のサポートを開始しました。WebサービスがCORSをサポートしている場合はXMLHttpRequest、JavaScriptコードでいくつかの追加設定を行うことで、ドメイン間で使用できます。

jQuery$.ajax()は、IE10やその他の最新のブラウザーでこれを自動的に実行しますが、 IE8とIE9では、オブジェクトを使用してCORSをサポートする方法が異なりXDomainRequestます。jQueryはこのオブジェクトをサポートしていません。

このStackOverflowの質問には、IE8 / 9用のCORSライブラリへのリンクとともに、これらのブラウザーのjQueryにCORS機能を追加するために使用できるいくつかの詳細な説明があります。自分でテストしたことはありませんが、代わりにCORSを使用したい場合は、JSONPの代わりになる可能性があります。

このライブラリの使用方法の説明で気付いたのはXDomainRequest、IE10以降では不要な場合とIE8/9では必要な場合に使用しようとしているように見えることです。これで問題ない場合もあれば、バージョンチェックなどを追加して、古いバージョンでのみ使用する場合もあります。

于 2013-03-27T09:43:48.980 に答える