Что такое JSONP все о?

Я понимаю JSON, но не JSONP. документ Википедии о JSON is (was) верхний результат поиска для JSONP. Он говорит так:

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

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

The 2-й результат поиска С парнем по имени Реми, кто пишет Это О JSONP:

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

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

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

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

7 1863
javascript terminology json jsonp

7 ответов:

это на самом деле не слишком сложно...

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

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

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

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

1826

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

650

JSONP работает, создавая элемент "script" (либо в разметке 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 . ")";
?>
41

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

function_prefix(json_object);

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

иными словами, вы можете иметь междоменные данные обмен.

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

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

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

37

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

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

http://b1t.co/Site/api/External/MakeUrlWithGet?callback=[resultsCallBack]&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, он автоматически запускает whateverJavascriptName, который вы должны реализовать в качестве обратного вызова функция:

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

17

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

клиент.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>

сервер.php

  <?php

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

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

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

    ?>
10

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

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

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

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

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

9