Базовый пример использования .ajax () с JSONP? - PullRequest
Новая
       15

Базовый пример использования .ajax () с JSONP?

181 голосов
/ 10 мая 2011

Может кто-нибудь помочь мне разобраться, как начать работу с 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/

Насколько я могу судить из документации, должно выдаваться предупреждение: нет (но также не выдает никаких ошибок).

спасибо.

Ответы [ 4 ]

379 голосов
/ 30 июля 2011

JSONP - это действительно простая уловка для преодоления XMLHttpRequest той же политики домена. (Как вы знаете, никто не может отправить AJAX (XMLHttpRequest) запрос в другой домен.)

Итак, вместо использования XMLHttpRequest мы должны использовать теги script HTMLl, которые вы обычно используете для загрузки файлов JS, чтобы JS мог получать данные из другого домена. Звучит странно?

Дело в том - получается скрипт теги можно использовать аналогично 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>

Однако это немного неудобно, потому что мы должны извлечь этот массив из тега script . Итак, создатели JSONP решили, что это будет работать лучше (и это так): 

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

Обратите внимание my_callback функция там? Итак, когда JSONP сервер получит ваш запрос и найдет параметр обратного вызова - вместо возврата обычного массива JS он вернет следующее: 

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

Посмотрите, где прибыль: теперь мы получаем автоматический обратный вызов ( my_callback ), который будет запущен, как только мы получим данные. Это все, что нужно знать о JSONP : это обратный вызов и теги сценария.

Примечание:
Это простые примеры использования JSONP, это не готовые производственные сценарии.

Демонстрация RAW JavaScript (простая лента Twitter с использованием JSONP): 

<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 (простой канал Twitter с использованием JSONP): 

<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 с отступом . (очень плохо названная техника, поскольку она на самом деле не имеет ничего общего с тем, что большинство людей считает «заполнением».)

144 голосов
/ 25 января 2013

Существует еще более простой способ работы с JSONP с использованием jQuery 

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

? в конце URL сообщает jQuery, что это JSONP-запрос, а не JSON. jQuery автоматически регистрирует и вызывает функцию обратного вызова.

Подробнее см. В документации jQuery.getJSON .

27 голосов
/ 09 марта 2012

В ответ на OP есть две проблемы с вашим кодом: вам нужно установить jsonp = 'callback', и добавление функции обратного вызова в переменную, как вы, похоже, не работает.

Обновление: когда я писал это, API Twitter был только что открыт, но они изменили его, и теперь он требует аутентификации. Я изменил второй пример на рабочий (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 () с таким массивом не очень хорошо работает ... Вкладка «Net» в Firebug покажет вам JSON должным образом. Еще один полезный трюк делает 

alert(JSON.stringify(data));

Вы также можете использовать метод jQuery.getJSON . Вот полный пример HTML, который получает список «Gists» от GitHub. Таким образом, он создает для вас функцию обратного вызова со случайным именем, это и есть последнее «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>
3 голосов
/ 29 июля 2013 
<!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.При этом используется метод GET для получения изображений с использованием JSONP.Подробнее можно найти в здесь

...