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

• 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;
}

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 и т. Д.), Наш браузер сообщит нам, что это не разрешено с этой уродливой ошибкой:

Как получить нужные данные? Что ж, теги <script> не подлежат ограничению всего сервера (origin ¹ )! Вот почему мы можем загрузить библиотеку, такую ​​как 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 (другой хост)

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

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

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

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

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

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

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

Простой пример использования 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;

    ?>    

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 для практики доступны по адресу: этот пост

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 . ")";
?>

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

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

function_prefix(json_object);

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

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

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

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

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