Что такое JSONP и почему он был создан?

avatar
Cheeso
14 января 2010 в 20:53
532061
10
2285

Я понимаю JSON, но не JSONP. Документ Википедии о JSON является (был) лучшим результатом поиска для JSONP. Там написано следующее:

JSONP или «JSON с заполнением» - это расширение JSON, в котором префикс указывается в качестве входного аргумента самого вызова.

А? Какой звонок? Для меня это не имеет никакого смысла. JSON - это формат данных. Звонка нет.

2-й результат поиска от какого-то парня по имени Реми, который пишет о JSONP:

JSONP - это внедрение тега сценария, передающее ответ от сервера в указанную пользователем функцию.

Я могу это понять, но все равно это не имеет никакого смысла.


Так что же такое JSONP? Почему он был создан (какую проблему решает)? И зачем мне это использовать?


Приложение : я только что создал новую страницу для JSONP в Википедии; теперь у него есть четкое и подробное описание JSONP, основанное на ответе jvenema.

Источник
ninjagecko
27 января 2012 в 20:56
37

Для записи: НЕ используйте JSONP, если вы не доверяете серверу, с которым разговариваете, на 100%. Если он будет скомпрометирован, ваша веб-страница будет тривиально взломана.

Pacerier
29 марта 2015 в 07:20
8

Также обратите внимание, что JSONP может быть взломан, если не реализован правильно.

gawkface
10 февраля 2017 в 06:05
3

Я хотел бы отдать должное автору JSONP, который изложил его философию: Архив Боба Ипполито на JSONP. Он представляет JSONP как «новую технологически независимую стандартную методологию для метода тегов сценария для междоменной выборки данных».

Ответы (10)

avatar
jvenema
14 января 2010 в 21:08
2175

На самом деле это не так уж сложно ...

Допустим, вы находитесь в домене example.com и хотите сделать запрос к домену example.net . Для этого вам необходимо пересечь границы домена, а нет-нет в большинстве браузеров.

Единственный элемент, который обходит это ограничение, - это теги <script>. Когда вы используете тег скрипта, ограничение домена игнорируется, но при нормальных обстоятельствах вы не можете действительно делать что-либо с результатами, скрипт просто оценивается.

Введите JSONP . Когда вы отправляете запрос на сервер с включенным JSONP, вы передаете специальный параметр, который немного сообщает серверу о вашей странице. Таким образом, сервер сможет красиво завершить свой ответ таким образом, чтобы ваша страница могла его обработать.

Например, сервер ожидает параметр с именем callback для включения его возможностей JSONP. Тогда ваш запрос будет выглядеть так:

http://www.example.net/sample.aspx?callback=mycallback

Без JSONP это может вернуть некоторый базовый объект JavaScript, например:

{ foo: 'bar' }

Однако с JSONP, когда сервер получает параметр «обратного вызова», он немного по-другому завершает результат, возвращая что-то вроде этого:

mycallback({ foo: 'bar' });

Как видите, теперь он будет вызывать указанный вами метод. Итак, на своей странице вы определяете функцию обратного вызова:

mycallback = function(data){
  alert(data.foo);
};

И теперь, когда скрипт загружен, он будет оценен, и ваша функция будет выполнена. Вуаля, междоменные запросы!

Также стоит отметить одну серьезную проблему с JSONP: вы теряете большую часть контроля над запросом. Например, нет "хорошего" способа вернуть правильные коды ошибок. В результате вы в конечном итоге используете таймеры для отслеживания запроса и т. Д., Что всегда немного подозрительно. Предложение для JSONRequest - отличное решение для разрешения междоменного сценария, обеспечения безопасности и обеспечения надлежащего управления запросом.

В наши дни (2015 г.) CORS является рекомендуемым подходом по сравнению с JSONRequest. JSONP по-прежнему полезен для поддержки старых браузеров, но с учетом последствий для безопасности, если у вас нет выбора, CORS - лучший выбор.

Erlend
14 января 2010 в 21:24
198

Обратите внимание, что использование JSONP имеет некоторые последствия для безопасности. Поскольку JSONP на самом деле является javascript, он может делать все остальное, что может делать javascript, поэтому вам нужно доверять поставщику данных JSONP. Я написал об этом в блоге: erlend.oftedal.no/blog/?blogid=97

Cheeso
14 января 2010 в 21:45
73

Есть ли какие-то новые последствия для безопасности в JSONP, которых нет в теге <script>? С тегом сценария браузер неявно доверяет серверу доставку безопасного Javascript, который браузер слепо оценивает. меняет ли JSONP этот факт? Вроде нет.

jvenema
14 января 2010 в 21:52
23

Нет, это не так. Если вы доверяете ему доставку javascript, то же самое относится и к JSONP.

jvenema
15 января 2010 в 00:04
15

Стоит отметить, что вы можете немного повысить безопасность, изменив способ возврата данных. Если вы вернете скрипт в истинном формате JSON, таком как mycallback ('{"foo": "bar"}') (обратите внимание, что параметр теперь является строкой), вы можете самостоятельно проанализировать данные вручную, чтобы "очистить" их перед оценка.

Erlend
15 января 2010 в 10:13
2

@Cheeso: Нет, это точно такая же проблема. Но некоторые люди не понимают, что это проблема. @jvenema: Вам все равно придется доверять поставщику данных :-)

jvenema
17 января 2010 в 21:54
1

@Erlend, никаких разногласий - каждый раз, когда вы загружаете что-то междоменное, вы должны хотя бы немного доверять тому, что загружаете :)

JustLearn
8 сентября 2010 в 04:19
0

@jvenema CURL также разработан для междоменного извлечения данных (AFAIK), тогда зачем нужен JSONP?

jvenema
8 сентября 2010 в 13:10
8

CURL - это серверное решение, а не клиентское. Они служат двум разным целям.

jvenema
9 декабря 2010 в 00:36
3

{foo: 'bar'} вполне допустимо использовать как литерал объекта JS, что и показал мой пример - JSONP отлично работает с литералами объекта или строгим JSON.

Joe Coder
13 марта 2013 в 00:41
6

@Stephen { 'foo' : 'bar' } все еще недействителен JSON. Двойные кавычки обязательны.

Martin Capodici
24 сентября 2014 в 21:49
1

@Cheeso - разница в том, что теги <script>, как правило, относятся к ресурсу, находящемуся под вашим контролем. Например. если вы не доверяете CDN, просто скопируйте сценарий на свой сервер. Этот вариант невозможен с JSONP, если вы хотите, чтобы данные передавались с сервера, который вы не контролируете напрямую, на веб-страницу. Однако обходной путь jvenema - хорошая идея.

jvenema
3 марта 2015 в 06:00
0

@Quentin - несколько хороших мыслей в вашей редакции, но они меняют часть простоты и ясности исходного ответа. Я добавил правку, которая также ссылается на CORS в качестве опции.

Quentin
3 марта 2015 в 07:51
0

Я думаю, что JSONRequest - отвлекающий маневр, насколько мне известно, нет браузеров, поддерживающих его.

Quentin
3 марта 2015 в 07:55
0

Также странно давать все примеры, не относящиеся к JSONP, как фрагменты JavaScript вместо JSON, поскольку люди обычно уже используют JSON (особенно если они рассматривают JSONP).

Quentin
3 марта 2015 в 08:18
0

Если подумать, ваш пример JSONP даже не JSONP. Это просто JavaScript, но аргумент функции недопустимый JSON. Это будет работать в большинстве случаев, но не для случайного парсера JSONP, который удаляет материал обратного вызова, а затем передает остальное парсеру JSON.

Cholthi Paul Ttiopic
6 октября 2016 в 06:58
0

Стоит отметить, что возвращенный скрипт не может вмешиваться в вашу DOM. Вот почему вы передаете собственное имя функции, на которую ссылаетесь.

Quentin
12 января 2017 в 15:32
2

@CholthiPaulTtiopic - JSONP работает путем внедрения скрипта на страницу. Возвращенный скрипт может сколько угодно вмешиваться в DOM. JSONP открывает доступ к XSS-атакам из источника данных, поэтому вы должны полностью доверять источнику данных. (Вот почему CORS лучше, он не страдает от этой проблемы).

Cholthi Paul Ttiopic
19 января 2017 в 09:21
1

Я вижу, что соглашения JSONP разработаны для удобства, а не безопасности.

xgqfrms
28 августа 2019 в 06:33
0

Это хорошее объяснение, очень ясное! 1. сервер, использующий переданный обратный вызов, оборачивает данные JSON; 2. клиент, использующий script, обошел лимит Cross-Origin; 3. после загрузки URL-адреса скрипта выполните глобальную функцию обратного вызова.

avatar
MuhammadAliDEV
5 мая 2021 в 20:19
0

Я пытаюсь объяснить проще:

  • JSONP означает JSON с заполнением.
  • JSONP - это метод отправки данных JSON, не беспокоясь о междоменных проблемах.

Почему используется:

Запрос файла из другого домена может вызвать проблемы из-за междоменной политики.

Запрос внешнего сценария из другого домена не вызывает этой проблемы.

JSONP использует это преимущество и запрашивает файлы, используя тег скрипта вместо объекта XMLHttpRequest.

Код для серверного файла:

<?php
$myJSON = '{ "name":"John", "age":30, "city":"New York" }';

echo "myFunc(".$myJSON.");";
?>

Функция, которая будет обрабатывать данные:

function myFunc(myObj) {
  document.getElementById("demo").innerHTML = myObj.name;
}
avatar
Carles Alcolea
17 февраля 2020 в 08:55
19

TL; DR

JSONP - это старый трюк , изобретенный, чтобы обойти ограничение безопасности, которое запрещает нам получать данные JSON, которые находятся на другом веб-сайте (другой оригинал <5472887357353 ), чем тот, в котором мы находимся.

Уловка работает с использованием тега <script>, который запрашивает JSON из этого места, например: { "user":"Smith" }, но заключен в функцию, фактический JSONP («JSON с заполнением») :

peopleDataJSONP({"user":"Smith"})

Получение его в этой форме позволяет нам использовать данные в нашей функции peopleDataJSONP. JSONP - плохая практика и больше не нужен, не используйте его (читайте ниже).


Проблема

Допустим, мы хотим использовать на ourweb.com некоторые данные JSON (или любые необработанные данные), размещенные на anotherweb.com. Если бы мы использовали запрос GET (подумайте XMLHttpRequest или fetch вызов, $.ajax и т. Д.), Наш браузер сообщит нам, что это не разрешено с этой уродливой ошибкой:

Chrome CORS console error

Как получить нужные данные? Что ж, теги <script> не подлежат ограничению всего сервера (origin 1 )! Вот почему мы можем загрузить библиотеку, такую ​​как jQuery или Google Maps, с любого сервера, например CDN, без каких-либо ошибок.

Вот важный момент: если задуматься, эти библиотеки являются актуальным исполняемым кодом JS (обычно это массивная функция со всей логикой внутри). Но необработанные данные? Данные JSON не являются кодом . Бежать нечего; это просто текст.

Следовательно, у нас нет возможности обрабатывать или манипулировать нашими ценными данными. Браузер загрузит данные, на которые указывает наш тег <script>, и при обработке он законно пожалуется:

черт возьми, это {"user":"Smith"} чушь, которую мы загрузили? Это не код. Я не могу вычислить, синтаксическая ошибка!


Взлом JSONP

Старый / хитрый способ использовать эти данные? Если бы мы могли каким-то образом сделать простой текст исполняемым , мы могли бы получить его во время выполнения. Итак, нам нужен anotherweb.com, чтобы отправить его с некоторой логикой, чтобы при загрузке ваш код в браузере мог использовать указанные данные. Нам нужны две вещи: 1) , чтобы получить данные таким образом, чтобы их можно было запустить, и 2) написать некоторый код в клиенте, чтобы при запуске данных этот код вызывается, и мы можем использовать данные.

Для 1) мы просим внешний сервер отправить нам данные JSON внутри функции JS. Сами данные настраиваются как вход этой функции. Это выглядит так:

peopleDataJSONP({"user":"Smith"})

, что делает его кодом JS , наш браузер будет анализировать и запускать без жалоб! Точно так же, как с библиотекой jQuery. Чтобы получить такие данные, клиент «запрашивает» их у JSONP-дружественного сервера, обычно это делается следующим образом:

<script src="https://anotherweb.com/api/data-from-people.json?myCallback=peopleDataJSONP"></script>

Согласно 2) , поскольку наш браузер получит JSONP с этим именем функции, нам нужна функция с таким же именем в нашем коде, например:

function peopleDataJSONP(data){
  alert(data.user); // "Smith"
}

Браузер загрузит JSONP и запустит его, , который вызывает нашу функцию , где аргумент data будет данными JSON из anotherweb.com. Теперь мы можем делать с нашими данными все, что захотим.


Не используйте JSONP, используйте CORS

JSONP - это межсайтовый взлом с несколькими недостатками:

  • Мы можем выполнять только запросы GET
  • Поскольку это запрос GET, запускаемый простым тегом скрипта, мы не получаем полезных ошибок или информации о ходе выполнения
  • Есть также некоторые проблемы с безопасностью, такие как запуск в вашем клиентском JS-коде, который может быть изменен на вредоносную полезную нагрузку
  • Он решает проблему только с данными JSON, но политика безопасности Same-Origin применяется к другим данным (веб-шрифты, изображения / видео, нарисованные с помощью drawImage () ...)
  • Это не очень элегантно и не читается.

Вывод состоит в том, что нет необходимости использовать его в настоящее время .

Вам следует прочитать о CORS здесь, но суть этого:

Совместное использование ресурсов между источниками (CORS) - это механизм, который использует дополнительные заголовки HTTP, чтобы указать браузерам предоставить веб-приложение работает в одном источнике, доступ к выбранным ресурсам из другого источник. Веб-приложение выполняет HTTP-запрос из разных источников, когда оно запрашивает ресурс другого происхождения (домен, протокол или порт) из собственного.



  1. происхождение определяется тремя вещами: протоколом , портом и хостом . Так, например, https://web.com имеет другое происхождение, чем http://web.com (другой протокол) и https://web.com:8081 (другой порт) и, очевидно, https://thatotherweb.net (другой хост)
M'Baku
3 июня 2020 в 02:11
3

Эй, чувак, это обеспечило 100% ясность в виде сноски к утвержденному ответу! Спасибо за это....

avatar
simhumileco
19 июля 2019 в 20:44
1

JSONP означает JSON <31038141083> с заполнением .

Вот сайт с отличными примерами , с объяснением от простейшего использования <31038141092> этой техники до наиболее продвинутых в плоскости JavaScript10: <310383814 >

w3schools.com / JSONP

Один из моих любимых методов, описанных выше, - это Динамический результат JSON , который позволяет отправлять JSON в файл PHP в параметре URL , а также позволяет файлу PHP вернуть объект JSON на основе полученной информации .

Такие инструменты, как jQuery, также могут использовать JSONP:

jQuery.ajax({
  url: "https://data.acgov.org/resource/k9se-aps6.json?city=Berkeley",
  jsonp: "callbackName",
  dataType: "jsonp"
}).done(
  response => console.log(response)
);

avatar
Marcus Thornton
8 декабря 2015 в 04:02
8

Прежде чем понимать JSONP, вам необходимо знать формат JSON и XML. В настоящее время наиболее часто используемый формат данных в Интернете - это XML, но XML очень сложен. Из-за этого пользователям неудобно обрабатывать встроенные в веб-страницы.

Чтобы JavaScript мог легко обмениваться данными, даже в качестве программы обработки данных, мы используем формулировку в соответствии с объектами JavaScript и разработали простой формат обмена данными, которым является JSON. JSON можно использовать как данные или как программу JavaScript.

JSON можно напрямую встроить в JavaScript, используя их, вы можете напрямую выполнять определенную программу JSON, но из-за ограничений безопасности механизм песочницы браузера отключает выполнение междоменного кода JSON.

Чтобы JSON можно было передавать после выполнения, мы разработали JSONP. JSONP обходит ограничения безопасности браузера с помощью функции обратного вызова JavaScript и тега <script>.

Короче говоря, он объясняет, что такое JSONP, какую проблему он решает (когда его использовать).

RobbyD
16 января 2017 в 15:55
4

Я отклонил это предложение, потому что не верю утверждению, что XML был наиболее часто используемым форматом данных в Интернете в декабре 2015 года.

Merunas Grincalaitis
10 февраля 2020 в 08:07
0

Он по-прежнему не отвечает, почему вместо json используется json. Откуда берутся все эти ограничения безопасности? Почему мы можем использовать jsonp, но не json для кросс-доменов?

avatar
sarath joseph
6 июня 2014 в 06:45
14

Простой пример использования JSONP.

client.html

    <html>
    <head>
   </head>
     body>


    <input type="button" id="001" onclick=gO("getCompany") value="Company"  />
    <input type="button" id="002" onclick=gO("getPosition") value="Position"/>
    <h3>
    <div id="101">

    </div>
    </h3>

    <script type="text/javascript">

    var elem=document.getElementById("101");

    function gO(callback){

    script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = 'http://localhost/test/server.php?callback='+callback;
    elem.appendChild(script);
    elem.removeChild(script);


    }

    function getCompany(data){

    var message="The company you work for is "+data.company +"<img src='"+data.image+"'/   >";
    elem.innerHTML=message;
}

    function getPosition(data){
    var message="The position you are offered is "+data.position;
    elem.innerHTML=message;
    }
    </script>
    </body>
    </html>

server.php

  <?php

    $callback=$_GET["callback"];
    echo $callback;

    if($callback=='getCompany')
    $response="({\"company\":\"Google\",\"image\":\"xyz.jpg\"})";

    else
    $response="({\"position\":\"Development Intern\"})";
    echo $response;

    ?>    
avatar
dardawk
28 марта 2013 в 15:59
19

JSONP отлично подходит для обхода ошибок междоменного скриптинга. Вы можете использовать службу JSONP исключительно с помощью JS без необходимости реализации прокси AJAX на стороне сервера.

Вы можете использовать службу b1t.co, чтобы увидеть, как она работает. Это бесплатный сервис JSONP, который позволяет вам минимизировать ваши URL-адреса. Вот URL-адрес для службы:

http://b1t.co/Site/api/External/MakeUrlWithGet?callback=[resultsCallBack provided&url=[escapedUrlToMinify ]

Например, звонок http://b1t.co/Site/api/External/MakeUrlWithGet?callback=whateverJavascriptName&url=google.com

вернет

whateverJavascriptName({"success":true,"url":"http://google.com","shortUrl":"http://b1t.co/54"});

И, таким образом, когда этот get загружается в ваш js как src, он автоматически запускает AnyJavascriptName, которое вы должны реализовать в качестве функции обратного вызова:

function minifyResultsCallBack(data)
{
    document.getElementById("results").innerHTML = JSON.stringify(data);
}

Чтобы действительно выполнить вызов JSONP, вы можете сделать это несколькими способами (включая использование jQuery), но вот пример чистого JS:

function minify(urlToMinify)
{
   url = escape(urlToMinify);
   var s = document.createElement('script');
   s.id = 'dynScript';
   s.type='text/javascript';
   s.src = "http://b1t.co/Site/api/External/MakeUrlWithGet?callback=resultsCallBack&url=" + url;
   document.getElementsByTagName('head')[0].appendChild(s);
}

Пошаговый пример и веб-сервис jsonp для практики доступны по адресу: этот пост

Taryn♦
28 марта 2013 в 19:24
2

Спасибо, что разместили свой ответ! Обратите внимание, что вы должны опубликовать основные части ответа здесь, на этом сайте, иначе ваша публикация может быть удалена. См. FAQ, где упоминаются ответы, которые являются «не более чем ссылкой». Вы все равно можете включить ссылку, если хотите, но только в качестве «ссылки». Ответ должен стоять сам по себе, без ссылки.

avatar
Ajain Vivek
17 марта 2013 в 13:32
48

JSONP работает путем создания элемента «скрипт» (либо в разметке HTML, либо вставленного в DOM с помощью JavaScript), который запрашивает местоположение удаленной службы данных. Ответ представляет собой javascript, загруженный в ваш браузер с именем предопределенной функции вместе с передаваемым параметром, который является запрашиваемыми данными JSON. При выполнении скрипта функция вызывается вместе с данными JSON, позволяя запрашивающей странице получать и обрабатывать данные.

Для дальнейшего чтения посетите: https://blogs.sap.com/2013/07/15/secret-behind-jsonp/

фрагмент кода на стороне клиента

    <!DOCTYPE html>
    <html lang="en">
    <head>
     <title>AvLabz - CORS : The Secrets Behind JSONP </title>
     <meta charset="UTF-8" />
    </head>
    <body>
      <input type="text" id="username" placeholder="Enter Your Name"/>
      <button type="submit" onclick="sendRequest()"> Send Request to Server </button>
    <script>
    "use strict";
    //Construct the script tag at Runtime
    function requestServerCall(url) {
      var head = document.head;
      var script = document.createElement("script");

      script.setAttribute("src", url);
      head.appendChild(script);
      head.removeChild(script);
    }

    //Predefined callback function    
    function jsonpCallback(data) {
      alert(data.message); // Response data from the server
    }

    //Reference to the input field
    var username = document.getElementById("username");

    //Send Request to Server
    function sendRequest() {
      // Edit with your Web Service URL
      requestServerCall("http://localhost/PHP_Series/CORS/myService.php?callback=jsonpCallback&message="+username.value+"");
    }    

  </script>
   </body>
   </html>

Серверная часть кода PHP

<?php
    header("Content-Type: application/javascript");
    $callback = $_GET["callback"];
    $message = $_GET["message"]." you got a response from server yipeee!!!";
    $jsonResponse = "{\"message\":\"" . $message . "\"}";
    echo $callback . "(" . $jsonResponse . ")";
?>
Kevin Beal
2 марта 2014 в 23:52
3

ссылка вверху сейчас только 404

ᴠɪɴᴄᴇɴᴛ
26 августа 2014 в 14:19
0

Содержимое этой ссылки теперь доступно по адресу http://scn.sap.com/community/developer-center/front-end/blog/2013/07/15/secret-behind-jsonp.

avatar
ThatGuy
29 июля 2011 в 21:40
752

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

Итак - вместо использования XMLHttpRequest мы должны использовать скрипт HTML-теги, те, которые вы обычно используете для загрузки файлов 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, это не готовые сценарии.

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

Eduard
2 августа 2012 в 07:35
35

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

Matt
9 марта 2014 в 01:26
14

Это очень хороший дополнительный ответ на ответ jvenema - я не понимал, зачем нужен обратный вызов, пока вы не указали, что в противном случае к данным json пришлось бы обращаться через элемент script.

hashbrown
21 ноября 2014 в 02:50
7

Спасибо за такое ясное объяснение. Желаю, чтобы мои учебники в колледже писали такие люди, как ты :)

SIslam
24 июля 2015 в 12:56
1

Хорошее объяснение, нежели предыдущее. Конечно, отрывок из «тех, которые вы обычно используете для загрузки файлов js, чтобы js мог получать данные из другого домена. Звучит странно?» также открыло мне глаза. Пример кода очень показателен.

ihorbond
23 октября 2020 в 15:21
0

Мне больше нравится это объяснение с конкретными примерами, чем принятый ответ! Спасибо!

vanowm
13 августа 2021 в 14:56
0

Почему это не принятый ответ? Текущий принятый ответ не имеет смысла, поскольку в нем упоминается только <script>, а не то, как его использовать ...

avatar
jldupont
14 января 2010 в 20:58
42

Потому что вы можете попросить сервер добавить префикс к возвращаемому объекту JSON. Например,

function_prefix(json_object);

, чтобы браузер eval "встроил" строку JSON в качестве выражения. Этот трюк позволяет серверу «внедрять» код javascript непосредственно в браузер клиента, обходя ограничения «одинакового происхождения».

Другими словами, вы можете достичь междоменного обмена данными .


Обычно XMLHttpRequest не разрешает междоменный обмен данными напрямую (необходимо пройти через сервер в том же домене), тогда как:

<script src="some_other_domain/some_data.js&prefix=function_prefix> `можно получить доступ к данным из домена, отличного от исходного.


Также стоит отметить: даже если сервер следует считать «доверенным» перед попыткой подобного «трюка», побочные эффекты возможного изменения формата объекта и т. Д. Могут сдерживаться. Если для получения объекта JSON используется function_prefix (т.е. надлежащая функция js), указанная функция может выполнять проверки перед принятием / дальнейшей обработкой возвращенных данных.

jub0bs
22 января 2020 в 08:06
2

"добавить префикс" сбивает с толку :)

apod
7 апреля 2021 в 03:18
0

Не уверен, что предупреждение о сдерживании радиоактивных осадков является правильным. Вредоносный сервер может вернуть function_prefix();super_dangerous_function{window.open('youvebeenhacked!')}()