Каковы различия между JSON и JSONP?

формат мудрый, тип файла мудрый и практическое использование мудрый?

363
javascript json jsonp

7 ответов

JSONP - это JSON с заполнением, то есть вы кладете строку в начале и пару скобок вокруг нее. Например:

//JSON
{"name":"stackoverflow","id":5}
//JSONP
func({"name":"stackoverflow","id":5});

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

function func(json){
  alert(json.name);
}
var elm = document.createElement("script");
elm.setAttribute("type", "text/javascript");
elm.src = "http://example.com/jsonp";
document.body.appendChild(elm);
380

В принципе, вам не разрешено запрашивать данные JSON из другого домена через AJAX из-за политики того же происхождения. AJAX позволяет извлекать данные после загрузки страницы, а затем выполнять некоторый код/вызывать функцию после ее возвращения. Мы не можем использовать AJAX, но нам разрешено вводить <script> теги на нашей собственной странице, и они могут ссылаться на Скрипты, размещенные в других доменах.

обычно вы используете это для включения библиотек из CDN, таких как jQuery. Однако мы можем злоупотреблять этим и использовать его для извлечения данных! JSON уже является допустимым JavaScript (по большей части), но мы не можем просто вернуть JSON в наш файл сценария, потому что у нас нет способа узнать, когда скрипт/данные закончили загрузку, и у нас нет способа получить к нему доступ, если он не назначен переменной или передан функции. Поэтому вместо этого мы говорим веб-службе вызвать функцию от нашего имени, когда она будет готова.

например, мы могли бы запросить некоторые данные от a API фондовой биржи, и наряду с нашими обычными параметрами API, мы даем ему обратный вызов, например callThisWhenReady. Затем веб-служба обертывает данные нашей функцией и возвращает их следующим образом:callThisWhenReady({...data...}). Теперь, как только скрипт загрузится, Ваш браузер попытается его выполнить (как обычно), который, в свою очередь, вызывает нашу произвольную функцию и подает нам нужные данные.

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

jQuery фактически поддерживает это плавно для вас, создавая уникально названную функцию для вас и передавая ее, которая затем, в свою очередь, запускает код, который вы хотели.

81

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

62

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

jsonCallback(
{
    "sites":
    [
        {
            "siteName": "JQUERY4U",
            "domainName": "http://www.jquery4u.com",
            "description": "#1 jQuery Blog for your Daily News, Plugins, Tuts/Tips &amp; Code Snippets."
        },
        {
            "siteName": "BLOGOOLA",
            "domainName": "http://www.blogoola.com",
            "description": "Expose your blog to millions and increase your audience."
        },
        {
            "siteName": "PHPSCRIPTS4U",
            "domainName": "http://www.phpscripts4u.com",
            "description": "The Blog of Enthusiastic PHP Scripters"
        }
    ]
});

(function($) {
var url = 'http://www.jquery4u.com/scripts/jquery4u-sites.json?callback=?';

$.ajax({
   type: 'GET',
    url: url,
    async: false,
    jsonpCallback: 'jsonCallback',
    contentType: "application/json",
    dataType: 'jsonp',
    success: function(json) {
       console.dir(json.sites);
    },
    error: function(e) {
       console.log(e.message);
    }
});

})(jQuery);

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

26

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

18

в формате JSON

JSON (JavaScript Object Notation) это удобный способ транспортировки данных между приложениями, особенно если конечным пунктом является приложение JavaScript.

пример:

вот минимальный пример, который использует JSON в качестве транспорта для ответа сервера. Клиент делает запрос Ajax с функцией jQuery shorthand $.помощью метода getjson. Сервер генерирует хэш, форматирует его как JSON и возвращает клиенту. Клиент форматирует это и помещает его в элемент страницы.

ссылки: разница между json & jsonp

сервер:

get '/json' do
 content_type :json
 content = { :response  => 'Sent via JSON',
            :timestamp => Time.now,
            :random    => rand(10000) }
 content.to_json
end

клиент:

var url = host_prefix + '/json';
$.getJSON(url, function(json){
  $("#json-response").html(JSON.stringify(json, null, 2));
});

выход:

  {
   "response": "Sent via JSON",
   "timestamp": "2014-06-18 09:49:01 +0000",
   "random": 6074
  }

JSONP (JSON с дополнением)

JSONP это простой способ преодолеть ограничения браузера при отправке JSON ответы из разных доменов от клиента.

единственное изменение на стороне клиента с JSONP-добавить параметр обратного вызова в URL

сервер:

get '/jsonp' do
 callback = params['callback']
 content_type :js
 content = { :response  => 'Sent via JSONP',
            :timestamp => Time.now,
            :random    => rand(10000) }
 "#{callback}(#{content.to_json})"
end

клиент:

var url = host_prefix + '/jsonp?callback=?';
$.getJSON(url, function(jsonp){
  $("#jsonp-response").html(JSON.stringify(jsonp, null, 2));
});

выход: 

 {
  "response": "Sent via JSONP",
  "timestamp": "2014-06-18 09:50:15 +0000",
  "random": 364
}
13

"JSONP - это JSON с дополнительным кодом" было бы слишком легко для реального мира. Нет, у вас должны быть небольшие расхождения. Какое удовольствие в программировании, если все работает?

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

6