Skip to content

Files

Latest commit

igoradamenkoigoradamenko
partial fix #239
Feb 13, 2016
bf23252 · Feb 13, 2016

History

History
141 lines (90 loc) · 7.42 KB

article.md

File metadata and controls

141 lines (90 loc) · 7.42 KB

Протокол JSONP

Если создать тег <script src>, то при добавлении в документ запустится процесс загрузки src. В ответ сервер может прислать скрипт, содержащий нужные данные.

Таким образом можно запрашивать данные с любого сервера, в любом браузере, без каких-либо разрешений и дополнительных проверок.

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

[cut]

Запрос

Простейший пример запроса:

function addScript(src) {
  var elem = document.createElement("script");
  elem.src = src;
  document.head.appendChild(elem);
}

addScript('user?id=123');

Такой вызов добавит в <head> документа тег:

<script src="/user?id=123"></script>

При добавлении тега <script> с внешним src в документ браузер тут же начинает его скачивать, а затем -- выполняет.

В данном случае браузер запросит скрипт с URL /user?id=123 и выполнит.

Обработка ответа, JSONP

В примере выше рассмотрено создание запроса, но как получить ответ? Допустим, сервер хочет прислать объект с данными.

Конечно, он может присвоить её в переменную, например так:

// ответ сервера
var user = {name: "Вася", age: 25 };

...А браузер по script.onload отловит окончание загрузки и прочитает значение user.

Но что, если одновременно делается несколько запросов? Получается, нужно присваивать в разные переменные.

Протокол JSONP как раз и призван облегчить эту задачу.

Он очень простой:

  1. Вместе с запросом клиент в специальном, заранее оговорённом, параметре передаёт название функции.

    Обычно такой параметр называется callback. Например :

    addScript('user?id=123&*!*callback=onUserData*/!*');

  2. Сервер кодирует данные в JSON и оборачивает их в вызов функции, название которой получает из параметра callback:

    // ответ сервера
onUserData({
  name: "Вася",
  age: 25
});

Это и называется JSONP ("JSON with Padding").

Клиентский код должен доверять серверу при таком запросе. Ведь серверу ничего не стоит добавить в скрипт любые команды.

Реестр CallbackRegistry

В примере выше функция onUserData должна быть глобальной, ведь <script src> выполняется в глобальной области видимости.

Хотелось бы не загрязнять глобальное пространство имён, или по крайней мере свести загрязнение к минимуму.

Как правило, для этого создают один глобальный объект "реестр", который мы назовём CallbackRegistry. Далее для каждого запроса в нём генерируется временная функция.

Тег будет выглядеть так:

<script src="user?id=123&callback=*!*CallbackRegistry.func12345*/!*"></script>

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

Далее мы посмотрим более полный код всего этого, но перед этим -- важный момент! Нужно предусмотреть обработку ошибок.

Обнаружение ошибок

При запросе данных при помощи SCRIPT возможны различные ошибки:

  1. Скрипт может не загрузиться: отказ в соединении, разрыв связи...
  2. Ошибка HTTP, например 500.
  3. Скрипт загрузился, но внутри некорректен и не вызывает функцию. Например, на сервере произошла ошибка и в ответе передан её текст, а вовсе не данные.

Чтобы отловить их все "одним махом", используем следующий алгоритм:

  1. Создаётся <script>.
  2. На <script> ставятся обработчики onreadystatechange (для старых IE) и onload/onerror (для остальных браузеров).
  3. При загрузке скрипт выполняет функцию-коллбэк CallbackRegistry.... Пусть она при запуске ставит флажок "все ок". А мы в обработчиках проверим -- если флага нет, то функция не вызывалась -- стало быть, ошибка при загрузке или содержимое скрипта некорректно.

Полный пример

Итак, код функции, которая вызывается с url и коллбэками.

Он совсем небольшой, а без комментариев был бы ещё меньше:

[js src="jsonp/scriptRequest.js"]

Пример использования:

function ok(data) {
  alert( "Загружен пользователь " + data.name );
}

function fail(url) {
  alert( 'Ошибка при запросе ' + url );
}

// Внимание! Ответы могут приходить в любой последовательности!
scriptRequest("user?id=123", ok, fail); // Загружен
scriptRequest("/badurl.js", ok, fail); // fail, 404
scriptRequest("/", ok, fail); // fail, 200 но некорректный скрипт

Демо, по нажатию на кнопке запускаются запросы выше:

[codetabs src="jsonp" height=100]

COMET

COMET через SCRIPT реализуется при помощи длинных опросов, также как мы обсуждали в главе info:xhr-longpoll.

То есть, создаётся тег <script>, браузер запрашивает скрипт у сервера и... Сервер оставляет соединение висеть, пока не появится, что сказать. Когда сервер хочет отправить сообщение -- он отвечает, используя формат JSONP. И, тут же, новый запрос...