ajax and transports (in russian)
TRANSCRIPT
![Page 1: Ajax and Transports (in russian)](https://reader034.vdocument.in/reader034/viewer/2022042700/55780f75d8b42aa5488b52d5/html5/thumbnails/1.jpg)
![Page 2: Ajax and Transports (in russian)](https://reader034.vdocument.in/reader034/viewer/2022042700/55780f75d8b42aa5488b52d5/html5/thumbnails/2.jpg)
Михаил Давыдов Разработчик JavaScript
Транспорт, ajax
![Page 3: Ajax and Transports (in russian)](https://reader034.vdocument.in/reader034/viewer/2022042700/55780f75d8b42aa5488b52d5/html5/thumbnails/3.jpg)
3
Немного истории
• FRAME, IFRAME – IE 3, 1996год • ActiveX MSXML – IE 5.5, 1998год • AJAX, Web 2.0 – 2005год • W3C XMLHttpRequest – 2006год стандарт
![Page 4: Ajax and Transports (in russian)](https://reader034.vdocument.in/reader034/viewer/2022042700/55780f75d8b42aa5488b52d5/html5/thumbnails/4.jpg)
Кроссодоменные запросы
JSONP,
Post2HiddenIframe,
XMLHttpRequest level 2 (CORS),
Каскад фреймов или postMessage
![Page 5: Ajax and Transports (in russian)](https://reader034.vdocument.in/reader034/viewer/2022042700/55780f75d8b42aa5488b52d5/html5/thumbnails/5.jpg)
5
JSONP
• Когда применять – Запрос каких-то не очень критичных данных – Прием огромных объемов данных
• Плюсы – Дешевый способ – Доступен в любом браузере
• Минусы – Невозможно отследить статус ответа и ошибки, только таймауты – Только GET – Не безопасный
0+ 0+ 0+ 0+ 3+
![Page 6: Ajax and Transports (in russian)](https://reader034.vdocument.in/reader034/viewer/2022042700/55780f75d8b42aa5488b52d5/html5/thumbnails/6.jpg)
JSONP
// 1 Готовим «Ловушку» window.jsonFlickrFeed = function (data) { console.log(data); }; var serviceUrl = 'http://api.flickr.com/services/feeds' + '/photos_public.gne?format=json&' + 'jsoncallback=jsonFlickrFeed'; // 2 Создаем скрипт var scriptElement = document.createElement('script'); scriptElement.src = serviceUrl; document.body.appendChild(scriptElement);
http://jsfiddle.net/ffTQL/1/
![Page 7: Ajax and Transports (in russian)](https://reader034.vdocument.in/reader034/viewer/2022042700/55780f75d8b42aa5488b52d5/html5/thumbnails/7.jpg)
7
Post2HiddenIframe
• Кода применять – Push каких-то не критичных данных – Отправка файлов
• Плюсы – Реализация очень проста – Доступен в любом браузере – Можно отправлять файлы – POST, GET
• Минусы – Нет возможности подтвердить получение данных сервером
0+ 0+ 0+ 0+ 3+
![Page 8: Ajax and Transports (in russian)](https://reader034.vdocument.in/reader034/viewer/2022042700/55780f75d8b42aa5488b52d5/html5/thumbnails/8.jpg)
Post2HiddenIframe
// 1 Создаем форму <form target="frame" action="http://yandex.ru/" method="post"> <input name="data"/> <input type="submit"/> </form> // 2 Создаем фрейм <iframe name="frame"></iframe>
http://jsfiddle.net/E2nge/
![Page 9: Ajax and Transports (in russian)](https://reader034.vdocument.in/reader034/viewer/2022042700/55780f75d8b42aa5488b52d5/html5/thumbnails/9.jpg)
9
XHR2 (CORS)
• Кода применять – Запрос критичных данных – Long Polling
• Плюсы – Не отличается от XHR (IE – XDomainRequest) – Это не костыль – Можно отследить ошибки и статусы ответа – Простая реализация поддержки на сервере – DELETE, GET, HEAD, OPTIONS, POST, PUT
• Минусы – Не поддерживается многими старыми браузерами – Может блокироваться прокси-серверами
4.0 3.5 12 4.0 10
![Page 10: Ajax and Transports (in russian)](https://reader034.vdocument.in/reader034/viewer/2022042700/55780f75d8b42aa5488b52d5/html5/thumbnails/10.jpg)
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/
![Page 11: Ajax and Transports (in russian)](https://reader034.vdocument.in/reader034/viewer/2022042700/55780f75d8b42aa5488b52d5/html5/thumbnails/11.jpg)
11
Каскад фреймов или postMessage
• На самоподготовку – Выделите его достоинства и недостатки – Сравните с предыдущими методами
![Page 12: Ajax and Transports (in russian)](https://reader034.vdocument.in/reader034/viewer/2022042700/55780f75d8b42aa5488b52d5/html5/thumbnails/12.jpg)
Real-time приложения
LongPolling через XHR,
EventSource (Server Sent Events),
WebSocket
![Page 13: Ajax and Transports (in russian)](https://reader034.vdocument.in/reader034/viewer/2022042700/55780f75d8b42aa5488b52d5/html5/thumbnails/13.jpg)
13
LongPolling & XHR
• Когда применять – Для обратной совместимости со старыми браузерами – Приложения где данные передаются редко – Вам лень писать что-то другое
• Плюсы – Это работает во всех браузерах – Самая простая реализация
• Минусы – Приходится постоянно создавать соединения – Для отправки данных необходимо поднимать еще одно соединение – Проблема с одновременными запросами
1.0 0.6 8.0 1.2 5.0
![Page 14: Ajax and Transports (in russian)](https://reader034.vdocument.in/reader034/viewer/2022042700/55780f75d8b42aa5488b52d5/html5/thumbnails/14.jpg)
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/
![Page 15: Ajax and Transports (in russian)](https://reader034.vdocument.in/reader034/viewer/2022042700/55780f75d8b42aa5488b52d5/html5/thumbnails/15.jpg)
15
EventSource
• Когда применять – Ваш сервис большую часть времени получает данные – Для обратной совместимости со старыми браузерами
• Плюсы – Использует HTTP протокол – Реализация на сервере достаточна проста – Может автоматически делать реконнект – Достаточно гибкий формат сообщений – 1 постоянное соединение с сервером
• Минусы – Может неадекватно вести себя при физическом отключении от сети – Может только принимать данные – Не поддерживается IE – Может блокироваться прокси-серверами
6.0 6.0 9.0 5.0 –
![Page 16: Ajax and Transports (in russian)](https://reader034.vdocument.in/reader034/viewer/2022042700/55780f75d8b42aa5488b52d5/html5/thumbnails/16.jpg)
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/
![Page 17: Ajax and Transports (in russian)](https://reader034.vdocument.in/reader034/viewer/2022042700/55780f75d8b42aa5488b52d5/html5/thumbnails/17.jpg)
17
WebSocket
• Когда применять – Актуальность данных очень критична – Очень много данных передается или передаются очень часто
• Плюсы – 1 соединение на отправку и получение – Быстрый обмен данными – Бинарный формат
• Минусы – Не HTTP – Сложно отлаживать – Может блокироваться прокси-серверами – 6 форматов протокола – Поддерживается далеко не всеми веб-браузерами
14.0 11.0* 8.0 6.0 10.0
![Page 18: Ajax and Transports (in russian)](https://reader034.vdocument.in/reader034/viewer/2022042700/55780f75d8b42aa5488b52d5/html5/thumbnails/18.jpg)
LongPolling & XHR
window.WebSocket = window.WebSocket || window.MozWebSocket; var connection = new WebSocket('ws://echo.websocket.org'); connection.addEventListener('message', function(e) { console.log(e.data); }, false); connection.addEventListener('error', function(e) { console.log(e); }, false); connection.send('Hello World!');
http://jsfiddle.net/pgLQa/2/
![Page 19: Ajax and Transports (in russian)](https://reader034.vdocument.in/reader034/viewer/2022042700/55780f75d8b42aa5488b52d5/html5/thumbnails/19.jpg)
Загрузка файлов
Post2HiddenIframe + JSONP,
XMLHttpRequest level 2 + File API,
Flash
![Page 20: Ajax and Transports (in russian)](https://reader034.vdocument.in/reader034/viewer/2022042700/55780f75d8b42aa5488b52d5/html5/thumbnails/20.jpg)
20
Post2HiddenIframe + JSONP
• Post2HiddenIframe – для отправки • JSONP – для контроля
– Прогресс отправки – Результат отправки – Получение ссылки на файл
• Плюсы – Работает везде
• Минусы – Необходим контроль – Много дополнительных запросов
0+ 0+ 0+ 0+ 3+
![Page 21: Ajax and Transports (in russian)](https://reader034.vdocument.in/reader034/viewer/2022042700/55780f75d8b42aa5488b52d5/html5/thumbnails/21.jpg)
Post2HiddenIframe + JSONP <form target="frame" action="http://yandex.ru/" method="post" enctype="multipart/form-data"> <input name="file" type="file"/> </form> <iframe name="frame"></iframe>
http://jsfiddle.net/AZmXx/2/
$('input').change(function () { $('form').submit(); }); $.getJSON('/echo/jsonp/?callback=?', function(e, progress) { console.log(progress); });
![Page 22: Ajax and Transports (in russian)](https://reader034.vdocument.in/reader034/viewer/2022042700/55780f75d8b42aa5488b52d5/html5/thumbnails/22.jpg)
22
XHR2 + File API
• Плюсы – Естественный способ без костылей – Только 1 запрос – Реализация на сервере проще чем Post2HiddenIframe + JSONP
• Минусы – Не поддерживается всеми браузерами
13.0 3.6 12 5.1* 10.0*
![Page 23: Ajax and Transports (in russian)](https://reader034.vdocument.in/reader034/viewer/2022042700/55780f75d8b42aa5488b52d5/html5/thumbnails/23.jpg)
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/
![Page 24: Ajax and Transports (in russian)](https://reader034.vdocument.in/reader034/viewer/2022042700/55780f75d8b42aa5488b52d5/html5/thumbnails/24.jpg)
24
Flash
• На самоподготовку – Выделите его проблемы – Сравните с рассмотренными выше способами
![Page 25: Ajax and Transports (in russian)](https://reader034.vdocument.in/reader034/viewer/2022042700/55780f75d8b42aa5488b52d5/html5/thumbnails/25.jpg)
Библиотеки и обертки
jQuery.ajax,
jQuery.serialize,
Socket.IO,
NowJS
![Page 26: Ajax and Transports (in russian)](https://reader034.vdocument.in/reader034/viewer/2022042700/55780f75d8b42aa5488b52d5/html5/thumbnails/26.jpg)
jQuery.ajax
var globalCallback = function () { console.log(arguments); }; $.get('/echo/json/', globalCallback); $.post('/echo/json/', globalCallback); $.getJSON('/echo/json/', globalCallback); $.getJSON('/echo/jsonp/?callback=?', globalCallback); $.ajax('/echo/json/', { statusCode: { 404: globalCallback } }).done(globalCallback);
http://jsfiddle.net/hLU92/
![Page 27: Ajax and Transports (in russian)](https://reader034.vdocument.in/reader034/viewer/2022042700/55780f75d8b42aa5488b52d5/html5/thumbnails/27.jpg)
jQuery.serialize
<form> <input type="text" name="a" value="1"/> <input type="text" name="b" value="2"/> <input type="hidden" name="c" value="3"/> </form>
http://jsfiddle.net/Smvvr/
$('form').submit(function() { alert($(this).serialize()); return false; });
![Page 28: Ajax and Transports (in russian)](https://reader034.vdocument.in/reader034/viewer/2022042700/55780f75d8b42aa5488b52d5/html5/thumbnails/28.jpg)
Socket.IO
var socket = io.connect('http://localhost'); socket.on('news', function (data) { console.log(data); socket.emit('my other event', { my: 'data' }); });
http://socket.io/
var io = require('socket.io').listen(80); // Server io.sockets.on('connection', function (socket) { socket.emit('news', { hello: 'world' }); socket.on('my other event', function (data) { console.log(data); }); });
![Page 29: Ajax and Transports (in russian)](https://reader034.vdocument.in/reader034/viewer/2022042700/55780f75d8b42aa5488b52d5/html5/thumbnails/29.jpg)
NowJS
var nowjs = require("now"); // Server var everyone = nowjs.initialize(httpServer); everyone.now.getServerInfo = function(callback){ callback("Hello World!"); }
http://nowjs.com/
<script src="//localhost/nowjs/now.js"></script> <script> now.getServerInfo(function(data){ console.log(data); }); </script>
![Page 30: Ajax and Transports (in russian)](https://reader034.vdocument.in/reader034/viewer/2022042700/55780f75d8b42aa5488b52d5/html5/thumbnails/30.jpg)
Проблемы
Каскады протоколов,
Баги браузеров,
Прокси серверы,
Обрывы соединения,
Асинхронная модель приложения