В чем разница между JSON и JSONP?

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

7 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