Что такое jsonp и как им пользоваться?

Question

[Rrooom]

Вроде уже старая вещь, но до сих пор не пользовался. Что это такое?
Почему просто получение jsonа аяксом браузеры блокируют, а jsonp - разрешают?

Как и для чего им пользоваться?

Я посмотрел примеры на яваскриптюру, ничего не заработало - жалуется "ни фига это не джсонп". Можете привести валидный пример, который можно протестировать?

Answer 1

[Кирилл]

Это технология для выполнения запроса к другому домену (через обчный XHR это не возможно).

В двух словах работает это следующим образом:

В head страницы добавляется новый тег script с src установленным в адрес запроса и параметры (например "www.example.com/?id=1&jsonp=myCallback").

Как вы понимаете этот скрипт будет загружен браузером несмотря на домен на котором мы находимся.

При этом ответная сторона (example.com) в тело этого скрипта вернет не просто JSON, а вызов javascript функции указанной в jsonp параметре (мы разумеется эту функцию должны заблаговременно объявить).
Пример ответа от example.com: myCallback({ "user": "Rrooom", "message": "test" });

Это не плохой способ обойти проблему кросс доменных запросов, но возможен только GET.

Comments

[Евгений Петров]

Добавлю только, что GET-параметр может называться по-разному. Вот так выглядит JSONP для Google карт и вариант названия нашей функции

http://maps.googleapis.com/maps/api/js?sensor=true&language=ru&callback=Test.method

А вот и метод нашего объекта

var Test = {
	method: function () {
		console.log(arguments);
		//Пришли аргументы от maps.googleapis.com
	}
};

То есть не обязательно должна быть функция в глобальном контексте, но метод обязан быть доступен из глобального контекста.

Answer 2

[TekVanDo]

Пример использования на angular jsfiddle.net/QYGJ9/16
Описание https://ru.wikipedia.org/wiki/JSONP

Answer 3

[Сергей Протько]

JSONP - это кастыль, используемый в данный момент только за счет такой штуки как IE, который до 10-ой версии не поддерживает CORS.

Проблема состоит в том что политикой безопасности браузера не разрешается делать кросдоменные XHR запросы (тобиш AJAX в простонародьи). Учитывая что angular-based (да и воообще любое приложение на клиенте) приложения должны получать данные с REST API, и это API может находиться на другом сервере, то вполне логично что нужно придумать какой-то способ получать эти данные и что бы это можно было делать не взирая на ограничения браузера.

Нормальные ребята для нормальных браузеров придумали и используют CORS (Cross-origin resource sharing), который стандартизирован, хорошо и няшно работает и легко прикручивается к проекту. Но если у вас заявлена поддержка IE9 или более старых версий, то там все это работать не будет и приходится опять ваять кастыли с jsonp.