web-dev-qa-db-ja.com

JSONPで.ajax（）を使用する基本的な例は？

JSONPを使い始める方法を誰かが手助けしてくれませんか。

コード：

$('document').ready(function() {
    var pm_url = 'http://Twitter.com/status';
    pm_url += '/user_timeline/stephenfry.json';
    pm_url += '?count=10&callback=photos';
    var photos = function (data) {
     alert(data);
    };
    $.ajax({
        url: pm_url,
        dataType: 'jsonp',
        jsonpCallback: 'photos',
        jsonp: false,
    });
});

フィドル： http://jsfiddle.net/R7EPt/6/

私がドキュメントから解決することができる限り、警告を生成するべきです：そうではありません（しかし、エラーも生成しません）。

ありがとう。

ajaxjsonjsonp
180
simon

JSONPは、本当に同じドメインポリシーであるXMLHttpRequestを克服するための単なるトリックです。 （ご存じのとおり、AJAX（XMLHttpRequest）requestを別のドメインに送信することはできません。）

そのため、XMLHttpRequestの代わりにscriptHTMLlタグを使用する必要があります。これは通常、JSのロードに使用します。 JSが別のドメインからデータを取得するためのファイル。変に聞こえますか？

つまり、scriptタグはXMLHttpRequest！のように使用できます。これをチェックしてください。

script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://www.someWebApiServer.com/some-data";

データをロードした後は、次のようになるscriptセグメントになります。

<script>
{['some string 1', 'some data', 'whatever data']}
</script>

しかし、これは少し不便です。なぜなら、この配列をscripttagから取得する必要があるからです。そのため、JSONPの作成者は、これでうまくいくと判断しました（そしてそれは正しいです）。

script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://www.someWebApiServer.com/some-data?callback=my_callback";

向こうにmy_callback関数がありますか？つまり、JSONPserverがリクエストを受け取ってコールバックパラメータを見つけたとき - 普通のJS配列を返すのではなく、次のように返されます。

my_callback({['some string 1', 'some data', 'whatever data']});

利益がどこにあるかを見てください：今、自動コールバック（my_callback）を取得します。これはデータを取得するとトリガーされます。JSONPについて知っておくべきことはこれだけです。これはコールバックとスクリプトタグです。

メモ：
これらはJSONPの使用法の簡単な例です。これらは本番用のスクリプトではありません。

RAW JavaScriptデモ（JSONPを使用した簡単なTwitterフィード）：

<html>
    <head>
    </head>
    <body>
        <div id = 'twitterFeed'></div>
        <script>
        function myCallback(dataWeGotViaJsonp){
            var text = '';
            var len = dataWeGotViaJsonp.length;
            for(var i=0;i<len;i++){
                twitterEntry = dataWeGotViaJsonp[i];
                text += '<p><img src = "' + twitterEntry.user.profile_image_url_https +'"/>' + twitterEntry['text'] + '</p>'
            }
            document.getElementById('twitterFeed').innerHTML = text;
        }
        </script>
        <script type="text/javascript" src="http://Twitter.com/status/user_timeline/padraicb.json?count=10&callback=myCallback"></script>
    </body>
</html>


基本的なjQueryの例（JSONPを使った簡単なTwitterフィード）：

<html>
    <head>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
        <script>
            $(document).ready(function(){
                $.ajax({
                    url: 'http://Twitter.com/status/user_timeline/padraicb.json?count=10',
                    dataType: 'jsonp',
                    success: function(dataWeGotViaJsonp){
                        var text = '';
                        var len = dataWeGotViaJsonp.length;
                        for(var i=0;i<len;i++){
                            twitterEntry = dataWeGotViaJsonp[i];
                            text += '<p><img src = "' + twitterEntry.user.profile_image_url_https +'"/>' + twitterEntry['text'] + '</p>'
                        }
                        $('#twitterFeed').html(text);
                    }
                });
            })
        </script>
    </head>
    <body>
        <div id = 'twitterFeed'></div>
    </body>
</html>


JSONPは、のパディング付き/ JSONを表します。 （ほとんどの人が「パディング」と考えるものとはまったく関係ないので、非常に貧弱な名前の付けられた技法。）

378
ThatGuy

JQueryを使ってJSONPを操作する方法はさらに簡単です。

$.getJSON("http://example.com/something.json?callback=?", function(result){
   //response data are now in the result variable
   alert(result);
});

URLの最後にある?は、それがJSONではなくJSONPリクエストであることをjQueryに伝えます。 jQueryはコールバック関数を自動的に登録して呼び出します。

詳しくは、 jQuery.getJSONのドキュメント を参照してください。

144
Petr Peller

OPに応答して、コードに2つの問題があります。jsonp = 'callback'を設定する必要があり、コールバック関数を変数に追加してもうまくいかないようです。

更新日：私がこれを書いたときTwitter APIはオープンしたばかりでしたが、彼らはそれを変更しました、そしてそれは今認証を必要とします。 2番目の例を実用的な（2014Q1）例に変更しましたが、現在はgithubを使用しています。

これはもううまくいきません - 演習として、Github APIで置き換えることができるかどうかを確認してください。

$('document').ready(function() {
    var pm_url = 'http://Twitter.com/status';
    pm_url += '/user_timeline/stephenfry.json';
    pm_url += '?count=10&callback=photos';
    $.ajax({
        url: pm_url,
        dataType: 'jsonp',
        jsonpCallback: 'photos',
        jsonp: 'callback',
    });
});
function photos (data) {
    alert(data);
    console.log(data);
};

そのような配列をalert（）しても実際にはうまくいきませんが…Firebugの「Net」タブにはJSONが正しく表示されます。別の便利なトリックがやっている

alert(JSON.stringify(data));

jQuery.getJSONメソッドも使用できます。これはgithubから "要点"のリストを取得する完全なhtmlの例です。このようにして、ランダムに名前が付けられたコールバック関数を作成します。それが最後の "callback =？"です。 URLで。

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>JQuery (cross-domain) JSONP Twitter example</title>
        <script type="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
        <script>
            $(document).ready(function(){
                $.getJSON('https://api.github.com/gists?callback=?', function(response){
                    $.each(response.data, function(i, Gist){
                        $('#gists').append('<li>' + Gist.user.login + " (<a href='" + Gist.html_url + "'>" + 
                            (Gist.description == "" ? "undescribed" : Gist.description) + '</a>)</li>');
                    });
                });
            });
        </script>
    </head>
    <body>
        <ul id="gists"></ul>
    </body>
</html>
27
PapaFreud
<!DOCTYPE html>
<html>
<head>
<style>img{ height: 100px; float: left; }</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<title>An JSONP example </title>
</head>
<body>
<!-- DIV FOR SHOWING IMAGES -->
<div id="images">
</div>
<!-- SCRIPT FOR GETTING IMAGES FROM FLICKER.COM USING JSONP -->
<script>
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?",
{
  format: "json"
},
//RETURNED RESPONSE DATA IS LOOPED AND ONLY IMAGE IS APPENDED TO IMAGE DIV
function(data) {
  $.each(data.items, function(i,item){
  $("<img/>").attr("src", item.media.m).appendTo("#images");

 });
});</script>
</body>
</html>

上記のコードはFlicker APIから画像を取得するのに役立ちます。これはJSONPを使って画像を取得するためにGETメソッドを使います。詳しくは をご覧ください

3
Ganesh Babu