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

Question

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

Answer 1

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

Answer 2

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

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

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

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

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

Answer 3

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

Answer 4

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

Answer 5

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

Answer 6

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

Answer 7

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

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

Answer 8

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

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

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

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