Які відмінності між 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 Object Notation) - це зручний спосіб транспортування даних між додатками, особливо коли адресатом є додаток 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