5. 5
JSONP
• Когда применять
– Запрос каких-то не очень критичных данных
– Прием огромных объемов данных
• Плюсы
– Дешевый способ
– Доступен в любом браузере
• Минусы
– Невозможно отследить статус ответа и ошибки, только таймауты
– Только GET
– Не безопасный
0+ 0+ 0+ 0+ 3+
7. 7
Post2HiddenIframe
• Кода применять
– Push каких-то не критичных данных
– Отправка файлов
• Плюсы
– Реализация очень проста
– Доступен в любом браузере
– Можно отправлять файлы
– POST, GET
• Минусы
– Нет возможности подтвердить получение данных сервером
0+ 0+ 0+ 0+ 3+
9. 9
XHR2 (CORS)
• Кода применять
– Запрос критичных данных
– Long Polling
• Плюсы
– Не отличается от XHR (IE – XDomainRequest)
– Это не костыль
– Можно отследить ошибки и статусы ответа
– Простая реализация поддержки на сервере
– DELETE, GET, HEAD, OPTIONS, POST, PUT
• Минусы
– Не поддерживается многими старыми браузерами
– Может блокироваться прокси-серверами
4.0 3.5 12 4.0 10
10. XHR2 (CORS)
function requestFactory() {
var xhr = new XMLHttpRequest();
if ("withCredentials" in xhr) {
return xhr;
}
if (typeof XDomainRequest !== "undefined") {
return new XDomainRequest();
}
}
var xhr = requestFactory();
if (!xhr) throw new Error('CORS not supported');
xhr.open('GET', 'http://yandex.ru/', true);
xhr.send();
http://jsfiddle.net/qyjnb/
11. 11
Каскад фреймов или postMessage
• На самоподготовку
– Выделите его достоинства и недостатки
– Сравните с предыдущими методами
13. 13
LongPolling & XHR
• Когда применять
– Для обратной совместимости со старыми браузерами
– Приложения где данные передаются редко
– Вам лень писать что-то другое
• Плюсы
– Это работает во всех браузерах
– Самая простая реализация
• Минусы
– Приходится постоянно создавать соединения
– Для отправки данных необходимо поднимать еще одно соединение
– Проблема с одновременными запросами
1.0 0.6 8.0 1.2 5.0
14. LongPolling & XHR
function poll(resource, callback) {
$.get(resource, function (e, data) {
if (callback(data)) {
poll(resource, callback);
}
});
}
poll('/echo/json/', function (data) {
console.log(data);
return Math.random() > 0.5;
});
http://jsfiddle.net/mtP2W/
15. 15
EventSource
• Когда применять
– Ваш сервис большую часть времени получает данные
– Для обратной совместимости со старыми браузерами
• Плюсы
– Использует HTTP протокол
– Реализация на сервере достаточна проста
– Может автоматически делать реконнект
– Достаточно гибкий формат сообщений
– 1 постоянное соединение с сервером
• Минусы
– Может неадекватно вести себя при физическом отключении от сети
– Может только принимать данные
– Не поддерживается IE
– Может блокироваться прокси-серверами
6.0 6.0 9.0 5.0 –
16. LongPolling & XHR
// Content-Type: text/event-stream
// Cache-Control: no-cache
if (!window.EventSource) throw new Error('No SSE');
var dataProvider = new EventSource('/echo/json/');
dataProvider.addEventListener('message', function(e) {
console.log(e.data);
}, false);
dataProvider.addEventListener('error', function(e) {
if (e.readyState == EventSource.CLOSED) {
console.log('Connection closed');
}
}, false);
http://jsfiddle.net/BvTTz/
17. 17
WebSocket
• Когда применять
– Актуальность данных очень критична
– Очень много данных передается или передаются очень часто
• Плюсы
– 1 соединение на отправку и получение
– Быстрый обмен данными
– Бинарный формат
• Минусы
– Не HTTP
– Сложно отлаживать
– Может блокироваться прокси-серверами
– 6 форматов протокола
– Поддерживается далеко не всеми веб-браузерами
14.0 11.0* 8.0 6.0 10.0
20. 20
Post2HiddenIframe + JSONP
• Post2HiddenIframe – для отправки
• JSONP – для контроля
– Прогресс отправки
– Результат отправки
– Получение ссылки на файл
• Плюсы
– Работает везде
• Минусы
– Необходим контроль
– Много дополнительных запросов
0+ 0+ 0+ 0+ 3+
22. 22
XHR2 + File API
• Плюсы
– Естественный способ без костылей
– Только 1 запрос
– Реализация на сервере проще чем Post2HiddenIframe + JSONP
• Минусы
– Не поддерживается всеми браузерами
13.0 3.6 12 5.1* 10.0*
23. XHR2 + File API
document.getElementById('file')
.addEventListener('change', function(e) {
var file = this.files[0];
var xhr = new XMLHttpRequest();
var formData = new FormData();
formData.append('thefile', file);
xhr.open('post', '/echo/json/', true);
xhr.setRequestHeader('Content-Type',
'multipart/form-data');
xhr.send(formData);
}, false);
http://jsfiddle.net/qnvt2/1/