Основний приклад використання .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,
    });
});

Fiddle: http://jsfiddle.net/R7EPt/6/

Потрібно викликати попередження, наскільки я можу опрацювати документацію: не (але й помилки не створює).

Дякую.


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

Відповіді:


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>

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


3
Ця відповідь зараз дещо застаріла, оскільки зараз браузери підтримують Access-Control-Allow-Originзаголовки, які дозволяють регулярно виконувати дзвінки Ajax до деяких доменів перехресного походження.
jfriend00

Майте на увазі, що ви не можете робити форму POST за допомогою JSONP. Більш детальна інформація тут: markhneedham.com/blog/2009/08/27 / ...
thdoan

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 Він попереджає відсутність даних. Можливо, я щось пропустив
tika

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

1
@PetrPeller Мені дуже цікаво ваше рішення. Але це не працює на мене. Я не хочу розміщувати нове запитання, але це мені не допомагає. Що, схоже, не підтримує сервер ? Що я повинен зробити? І чи можете ви дати мені повну URL-адресу, яка працює для мого сервера? Буду вдячний тобі. Чи потрібна конфігурація сервера?
tika

3
Остання редакція: "Будь ласка, більше не використовуйте jQuery!" означає?
ParkCheolu

1
Зараз це 2018 рік, і я не впевнений, що варто використовувати навіть у 2017 році!
Зал Василя

28

У відповідь на ОП виникають дві проблеми з вашим кодом: вам потрібно встановити jsonp = 'зворотний виклик', а додавання функції зворотного дзвінка у змінну, як ви, здається, не працює.

Оновлення: коли я писав це, API Twitter був просто відкритим, але вони змінили його, і тепер він вимагає автентифікації. Я змінив другий приклад на робочий (2014Q1) приклад, але тепер використовую github.

Це більше не працює - як вправу, подивіться, чи можете ви замінити його на API Github:

$('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);
};

хоча попередження () про такий масив не дуже добре працює ... Вкладка "Net" у Firebug покаже вам JSON належним чином. Ще одна зручна хитрість - це робити

alert(JSON.stringify(data));

Ви також можете використовувати метод jQuery.getJSON . Ось повний приклад html, який отримує список "gists" від github. Таким чином, він створює для вас випадково названу функцію зворотного виклику, ось остаточний "зворотний виклик =?" в 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>

2
Ти маєш рацію, це вже не працює. Twitter змінив свій 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> 

Наведений вище код допомагає отримувати зображення з API Flicker. Для цього використовується метод GET для отримання зображень за допомогою JSONP. Докладно це можна знайти тут

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.