5. JSONP
0+
0+
0+
0+
• Когда применять
– Запрос каких-то не очень критичных данных
– Прием огромных объемов данных
• Плюсы
– Дешевый способ
– Доступен в любом браузере
• Минусы
– Невозможно отследить статус ответа и ошибки, только таймауты
– Только GET
– Не безопасный
5
3+
7. Post2HiddenIframe
0+
0+
0+
• Кода применять
– Push каких-то не критичных данных
– Отправка файлов
• Плюсы
– Реализация очень проста
– Доступен в любом браузере
– Можно отправлять файлы
– POST, GET
• Минусы
– Нет возможности подтвердить получение данных сервером
7
0+
3+
9. XHR2 (CORS)
4.0
• Кода применять
– Запрос критичных данных
– Long Polling
• Плюсы
– Не отличается от XHR (IE – XDomainRequest)
– Это не костыль
– Можно отследить ошибки и статусы ответа
– Простая реализация поддержки на сервере
– DELETE, GET, HEAD, OPTIONS, POST, PUT
• Минусы
– Не поддерживается многими старыми браузерами
– Может блокироваться прокси-серверами
9
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. Каскад фреймов или postMessage
• На самоподготовку
– Выделите его достоинства и недостатки
– Сравните с предыдущими методами
11
13. LongPolling & XHR
1.0
0.6
8.0
1.2
• Когда применять
– Для обратной совместимости со старыми браузерами
– Приложения где данные передаются редко
– Вам лень писать что-то другое
• Плюсы
– Это работает во всех браузерах
– Самая простая реализация
• Минусы
– Приходится постоянно создавать соединения
– Для отправки данных необходимо поднимать еще одно соединение
– Проблема с одновременными запросами
13
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. EventSource
6.0
6.0
9.0
5.0
• Когда применять
– Ваш сервис большую часть времени получает данные
– Для обратной совместимости со старыми браузерами
• Плюсы
– Использует HTTP протокол
– Реализация на сервере достаточна проста
– Может автоматически делать реконнект
– Достаточно гибкий формат сообщений
– 1 постоянное соединение с сервером
• Минусы
– Может неадекватно вести себя при физическом отключении от сети
– Может только принимать данные
– Не поддерживается IE
– Может блокироваться прокси-серверами
15
–
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. WebSocket
14.0
11.0*
8.0
• Когда применять
– Актуальность данных очень критична
– Очень много данных передается или передаются очень часто
• Плюсы
– 1 соединение на отправку и получение
– Быстрый обмен данными
– Бинарный формат
• Минусы
– Не HTTP
– Сложно отлаживать
– Может блокироваться прокси-серверами
– 6 форматов протокола
– Поддерживается далеко не всеми веб-браузерами
17
6.0
10.0
27. WebRTC
28
• Когда применять
– P2P сервисы: передача файлов
– Видео конференции
– Игры без монетизации
• Плюсы
– Дешевая поддержка
– Простая реализация сигнального сервера
– Любой протокол передачи hand-shake
– Защищенный
• Минусы
– Поддерживается далеко не всеми веб-браузерами
27
22
16
–
–
28. WebRTC Запрос на соединение
var media = {audio: true, video: true};
navigator.getUserMedia(media, function (stream) {
var pc = new RTCPeerConnection();
pc.addStream(stream);
pc.createOffer(function (desc) {
pc.setLocalDescription(desc);
// Session Description Protocol
console.log(desc.sdp);
}, console.error);
}, console.error);
http://jsfiddle.net/tc9sy/
30. Post2HiddenIframe + JSONP
0+
0+
• Post2HiddenIframe – для отправки
• JSONP – для контроля
– Прогресс отправки
– Результат отправки
– Получение ссылки на файл
• Плюсы
– Работает везде
• Минусы
– Необходим контроль
– Много дополнительных запросов
30
0+
0+
3+
32. XHR2 + File API
13.0
3.6
12
5.1*
• Плюсы
– Естественный способ без костылей
– Только 1 запрос
– Реализация на сервере проще чем Post2HiddenIframe + JSONP
• Минусы
– Не поддерживается всеми браузерами
32
10.0*
33. 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/
41. Проблемы
• Каскады протоколов
– Дорогая поддержка
• Баги браузеров
– Повторный запрос после abort() зависает
– N соединений с доменом на браузер/таб
• Прокси серверы
– Кэширование
– Игнорирование "странных" протоколов и заголовков
• Обрывы соединения
– Спасает только ping
• Асинхронная модель приложения
41
