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

393

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

Мохаммад
источник
13
См. Пожалуйста, объясните JSONP .
Мэтью Флэшен
1
Спасибо за ссылку, там есть действительно хорошая информация.
Мухаммед
4
Один метод быстрее другого? Например, если вы используете XMLHttpRequest для получения запроса (к тому же домену, очевидно, поскольку это «обычный» ajax), или если вы используете метод JSONP (который не будет использовать XMLHTTPRequest) - будет ли один быстрее другого? Я знаю, что это зависит от нескольких факторов - но кто-то делал сравнения скорости?
Ювал А.
en.wikipedia.org/wiki/JSONP
Сен Джейкоб

Ответы:

405

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);
Marius
источник
3
Есть ли еще смысл в JSONP, если вы предполагаете, что вы можете настроить CORS для разрешения запросов между источниками?
y3sh
Может быть, немного поздно, но, тем не менее, я хочу дать ответ на ваш вопрос для других. Нет, если вы используете JSONP, вы отклоняете все преимущества CORS (я назвал преимущество из-за проблемы безопасности.) Я рекомендую вам правильно внедрить CORS, это поможет вам в вопросах безопасности, а также лучше подойдет к архитектуре.
Доган
101

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

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

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

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

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

mpen
источник
2
Отдельно от чего? JSON тоже не язык
nickf
6
@nickf: Да ... я искал правильное слово ... как бы ты это назвал? «формат обмена данными» в соответствии с json.org.
mpen
или более читаемый: JSON: объект javascript в «текстовой нотации». Как вы бы, возможно, toString () Java-объект?
Сэм Флёбергс
FWIW: @SamVloeberghs - немного вводить в заблуждение говорить, что JSON представляет объект javascript. Это могут быть любые данные из любого языка или базы данных, которые могут быть представлены в виде пар имя-значение и массивов. А для точного обхода любого объекта JS требуются дополнительные соглашения - см. JSON: Неподдерживаемые собственные типы данных . Примечательно, что JS Date возвращается на дальнем конце в виде строки. weblog.west-wind.com/posts/2014/jan/06/...
ToolmakerSteve
66

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

Алекс Уэйн
источник
30

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

Sankar
источник
18

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

Делан Азабани
источник
13

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

Elangovan
источник
6

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

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

Василий Фаронов
источник
0

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

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

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

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

faridcs
источник