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

187

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

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

Спасибо.

ajax json jsonp Саймон
источник

$ .ajax ({url: pm_url, dataType: 'jsonp', jsonpCallback: photos, jsonp: false,}); Вы ввели фотографии в виде строки.

ВИЛВЕН

388

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

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

Дело в том, что теги сценариев можно использовать аналогично XMLHttpRequest ! Проверь это:

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

В результате вы получите сегмент сценария, который выглядит следующим образом после загрузки данных:

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

Этот парень
источник

3

Этот ответ сейчас несколько устарел, потому что браузеры теперь поддерживают Access-Control-Allow-Originзаголовки, которые позволяют совершать регулярные Ajax-вызовы в некоторые домены разных источников.

jfriend00

Имейте в виду, что вы не можете сделать форму POST с JSONP. Более подробная информация здесь: markhneedham.com/blog/2009/08/27/…

15.15

4

Что нужно учитывать, если вы хотите сделать эти сценарии готовыми к работе?

гость

1

Вау, это действительно полезно! Наконец-то я узнал, что такое JSONP и как он работает!

Джерри Лю

146

Существует еще более простой способ работы с 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 .

Петр Пеллер
источник

2

@PetrPeller, кажется великолепно, но я, кажется, не делаю из этого продукт. Ты когда-нибудь видел это? JSFiddle Предупреждает об отсутствии данных. Может быть, я что-то пропустил

тика

Ответ @xDNP JSONP должен поддерживаться сервером. Ваш сервер, кажется, не поддерживает это, поскольку я не могу видеть никакого добавленного обратного вызова здесь: mylivecanvas.com/api/… . Также вы должны использовать, так &callback=?как это не первый параметр в вашем случае.

Петр Пеллер

1

@PetrPeller Я очень заинтересован в вашем решении. Но это не работает на меня. Я не хочу публиковать новый вопрос, но это не помогает мне. Что, кажется , не поддерживает сервер ? Что я должен делать? И можете ли вы дать мне полный URL, который работает для моего сервера? Буду благодарен вам. Нужна ли какая-либо конфигурация сервера?

Тика

3

Что последнее редактирует: «Пожалуйста, не используйте jQuery больше!» значит?

ParkCheolu

1

Сейчас 2018 год, и я не уверен, что предполагается использовать в 2017 году!

Василий Холл

28

В ответ на 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>

PapaFreud
источник

2

Ты прав, это больше не работает. Твиттер изменил свой API.

PapaFreud

3

<!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. Подробнее можно найти здесь

Ганеш Бабу
источник

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

Ответы: