Может ли кто-нибудь объяснить, что такое JSONP, в условиях неспециалиста?

Я знаю, что JSONP – это JSON с дополнением.

Я понимаю, что такое JSON, и как его использовать с jQuery.getJSON() . Тем не менее, я не понимаю концепцию callback при введении JSONP.

Может ли кто-нибудь объяснить мне, как это работает?

Предисловие:

Этот ответ старше шести лет. Хотя концепции и применение JSONP не изменились (т. Е. Детали ответа по-прежнему актуальны), вы должны использовать CORS, где это возможно (т. Е. Ваш сервер или API поддерживает его, а поддержка браузера является адекватной), поскольку JSONP имеет неотъемлемые риски безопасности .


JSONP ( JSON с Padding ) – это метод, обычно используемый для обхода междоменных политик в веб-браузерах. (Вы не можете делать запросы AJAX на веб-страницу, которая воспринимается браузером на другом сервере.)

JSON и JSONP ведут себя по-разному на клиенте и на сервере. Запросы JSONP не отправляются с использованием XMLHTTPRequest и связанных с ним методов браузера. Вместо этого создается тэг , источник которого установлен на целевой URL. Этот тег скрипта затем добавляется в DOM (обычно внутри элемента ).

Запрос JSON:

 var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function () { if (xhr.readyState == 4 && xhr.status == 200) { // success }; }; xhr.open("GET", "somewhere.php", true); xhr.send(); 

Запрос JSONP:

 var tag = document.createElement("script"); tag.src = 'somewhere_else.php?callback=foo'; document.getElementsByTagName("head")[0].appendChild(tag); 

Разница между ответом JSON и ответом JSONP заключается в том, что объект ответа JSONP передается как аргумент функции обратного вызова.

JSON:

 { "bar": "baz" } 

JSONP:

 foo( { "bar": "baz" } ); 

Вот почему вы видите запросы JSONP, содержащие параметр callback , так что сервер знает имя функции, чтобы обернуть ответ.

Эта функция должна существовать в глобальной области в момент, когда оценивается браузером (после завершения запроса).


Еще одно отличие от обработки ответа JSON и ответа JSONP заключается в том, что любые ошибки синтаксического анализа в ответе JSON могут быть пойманы путем переноса попытки оценить responseText в инструкции try / catch. Из-за характера ответа JSONP ошибки синтаксического анализа в ответе будут приводить к необратимой ошибке анализа кода JavaScript.

Оба формата могут реализовать ошибки таймаута, установив тайм-аут перед началом запроса и очисткой тайм-аута в обработчике ответа.


Полезность использования jQuery для создания запросов JSONP заключается в том, что jQuery выполняет всю работу за вас в фоновом режиме.

По умолчанию jQuery требует включить &callback=? в URL-адресе вашего запроса AJAX. jQuery будет использовать success функцию success , присвоить ей уникальное имя и опубликовать ее в глобальной области. Затем он заменит знак вопроса ? in &callback=? с именем, которое оно присвоило.


Сопоставимые реализации JSON / JSONP

Следующее предполагает объект ответа { "bar" : "baz" }

JSON:

 var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function () { if (xhr.readyState == 4 && xhr.status == 200) { document.getElementById("output").innerHTML = eval('(' + this.responseText + ')').bar; }; }; xhr.open("GET", "somewhere.php", true); xhr.send(); 

JSONP:

 function foo(response) { document.getElementById("output").innerHTML = response.bar; }; var tag = document.createElement("script"); tag.src = 'somewhere_else.php?callback=foo'; document.getElementsByTagName("head")[0].appendChild(tag); 

Скажем, у вас есть URL-адрес, который дал вам данные JSON, например:

 {'field': 'value'} 

… и у вас был аналогичный URL, за исключением того, что он использовал JSONP, которому вы передали имя функции обратного вызова ‘myCallback’ (обычно это делается путем предоставления ему параметра запроса, называемого обратным вызовом, например http://example.com/dataSource?callback=myCallback ). Затем он вернется:

 myCallback({'field':'value'}) 

… который является не просто объектом, но на самом деле является кодом, который может быть выполнен. Поэтому, если вы определяете функцию в другом месте на своей странице с именем myFunction и выполняете этот скрипт, она будет вызываться с данными из URL-адреса.

Самое приятное в этом: вы можете создать тег сценария и использовать свой URL (в комплекте с параметром callback ) в качестве атрибута src , и браузер запустит его. Это означает, что вы можете обойти политику безопасности «того же самого происхождения» (поскольку браузеры позволяют запускать tags скриптов из других источников, кроме домена страницы).

Это то, что делает jQuery, когда вы делаете запрос ajax (используя .ajax с «jsonp» в качестве значения для свойства dataType ). Например

 $.ajax({ url: 'http://example.com/datasource', dataType: 'jsonp', success: function(data) { // your code to handle data here } }); 

Здесь jQuery позаботится о имени функции обратного вызова и параметре запроса, что делает API идентичным другим вызовам ajax. Но в отличие от других типов запросов ajax, как уже упоминалось, вы не ограничены получением данных из того же источника, что и ваша страница.

JSONP – это способ обойти политику браузера с одинаковым исходным кодом. Как? Как это:

введите описание изображения здесь

objective здесь состоит в том, чтобы сделать запрос на otherdomain.com и alert имя в ответе. Обычно мы делаем запрос AJAX:

 $.get('otherdomain.com', function (response) { var name = response.name; alert(name); }); 

Однако, поскольку запрос отправляется в другой домен, он не будет работать.

Однако мы можем сделать запрос с помощью . И и $.get('otherdomain.com') приведут к тому же запросу:

 GET otherdomain.com 

Q: Но если мы используем , как мы можем получить доступ к ответу? Нам нужно получить к нему доступ, если мы хотим alert его.

A: Мы не можем. Но вот что мы можем сделать - определить функцию, которая использует ответ, а затем сообщить серверу ответить JavaScript, который вызывает нашу функцию с ответом в качестве аргумента.

В: Но что, если сервер не сделает этого для нас и только хочет вернуть нам JSON?

A: Тогда мы не сможем его использовать. JSONP требует, чтобы сервер работал.

В: Использование является уродливым.

A: Библиотеки, такие как jQuery, делают ее более приятной . Пример:

 $.ajax({ url: "http://otherdomain.com", jsonp: "callback", dataType: "jsonp", success: function( response ) { console.log( response ); } }); 

Он работает путем динамического создания элемента DOM тега .

В: tags только делают запросы GET - что делать, если мы хотим сделать запрос POST?

A: Тогда JSONP не сработает для нас.

Q: Все в порядке, я просто хочу сделать запрос GET. JSONP потрясающе, и я собираюсь использовать его - спасибо!

A: На самом деле, это не так здорово. Это действительно просто хак. И это не самая безопасная вещь для использования. Теперь, когда CORS доступен, вы должны использовать его, когда это возможно.

Я нашел полезную статью, которая также объясняет эту тему вполне понятным и легким языком. Ссылка – JSONP

Некоторые из заслуживающих внимания пунктов:

  1. Предварительные даты JSONP CORS.
  2. Это псевдостандартный способ получения данных из другого домена,
  3. Он имеет ограниченные возможности CORS (только метод GET)

Работа заключается в следующем:

  1. включен в html-код
  2. Когда выполняется этап 1, он воспринимает функцию с тем же именем функции (как указано в параметре url) в качестве ответа.
  3. Если функция с данным именем существует в коде, она будет выполнена с данными, если они есть, возвращены в качестве аргумента этой функции.
  • jqgrid json reader для результатов запроса сервера arcgis
  • Как я могу создать JSONP из веб-службы ASP.NET для междоменных вызовов?
  • Требует ли JSONP модификации сервера?
  • Основной пример использования .ajax () с JSONP?
  • Обработка ошибок запроса JSONP
  • Как сделать простой asynchronous запрос JSONP в Angular 2?
  • Вызов JSONP, показывающий «Uncaught SyntaxError: Неожиданный токен:
  • JSONP с веб-интерфейсом ASP.NET
  • Interesting Posts

    Система не может найти файл, указанный в java

    Есть ли способ получить макет текущей активности и представления через adb?

    Как преобразовать одну строку данных в несколько строк в Excel

    Установка переменной окружения перед командой в bash не работает для второй команды в трубе

    Сериализация и десериализация деревьев выражений в C #

    Как ограничить setAccessible только «законным» использованием?

    Будет ли удаление NAT (с использованием IPv6) плохим для потребителей?

    EF codefirst: Должен ли я инициализировать свойства навигации?

    Как перезапустить приложение WPF?

    Как восстановить отсутствующие корзины (и возможные другие системы) в Mozilla Thunderbird

    Динамическое добавление элементов в JComboBox

    Динамически менять цвет на более легкий или более темный процент CSS (Javascript)

    Необходимо усечь переменную% username% в Windows 7 до семи символов

    Что такое Угловой ui-router жизненный цикл? (для отладки бесшумных ошибок)

    Можно ли использовать кабель HDMI для передачи файлов между ноутбуками?

    Давайте будем гением компьютера.