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

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

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);

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

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

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

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

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

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

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

jsonCallback(
{
    "sites":
    [
        {
            "siteName": "JQUERY4U",
            "domainName": "http://www.jquery4u.com",
            "description": "#1 jQuery Blog for your Daily News, Plugins, Tuts/Tips & 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 как объект, который мы затем можем использовать для любых данных без ограничений.

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

JSON

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

Пример:

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

Сервер:

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
}

Ссылка: http://www.codingslover.blogspot.in/2014/11/what-are-differences-between-json-and-jsonp.html

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

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

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

Но практическая реализация подхода включает в себя тонкие различия, которые часто не объясняются четко.

Вот простой учебник, который показывает JSON и JSONP рядом.

Весь код находится в свободном доступе на Github, а живую версию можно найти на http://json-jsonp-tutorial.craic.com