Михаил Давыдов Разработчик JavaScript

Транспорт, ajax

3

Немного истории

• FRAME, IFRAME – IE 3, 1996год • ActiveX MSXML – IE 5.5, 1998год • AJAX, Web 2.0 – 2005год • W3C XMLHttpRequest – 2006год стандарт

Кроссодоменные запросы

JSONP,

Post2HiddenIframe,

XMLHttpRequest level 2 (CORS),

Каскад фреймов или postMessage

5

JSONP

• Когда применять –  Запрос каких-то не очень критичных данных –  Прием огромных объемов данных

• Плюсы –  Дешевый способ –  Доступен в любом браузере

• Минусы –  Невозможно отследить статус ответа и ошибки, только таймауты –  Только GET –  Не безопасный

0+ 0+ 0+ 0+ 3+

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/

7

Post2HiddenIframe

• Кода применять –  Push каких-то не критичных данных –  Отправка файлов

• Плюсы –  Реализация очень проста –  Доступен в любом браузере –  Можно отправлять файлы –  POST, GET

•  Минусы –  Нет возможности подтвердить получение данных сервером

0+ 0+ 0+ 0+ 3+

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/

9

XHR2 (CORS)

• Кода применять –  Запрос критичных данных –  Long Polling

• Плюсы –  Не отличается от XHR (IE – XDomainRequest) –  Это не костыль –  Можно отследить ошибки и статусы ответа –  Простая реализация поддержки на сервере –  DELETE, GET, HEAD, OPTIONS, POST, PUT

•  Минусы –  Не поддерживается многими старыми браузерами –  Может блокироваться прокси-серверами

4.0 3.5 12 4.0 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

• На самоподготовку –  Выделите его достоинства и недостатки –  Сравните с предыдущими методами

Real-time приложения

LongPolling через XHR,

EventSource (Server Sent Events),

WebSocket

13

LongPolling & XHR

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

• Плюсы –  Это работает во всех браузерах –  Самая простая реализация

•  Минусы –  Приходится постоянно создавать соединения –  Для отправки данных необходимо поднимать еще одно соединение –  Проблема с одновременными запросами

1.0 0.6 8.0 1.2 5.0

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

• Когда применять –  Ваш сервис большую часть времени получает данные –  Для обратной совместимости со старыми браузерами

• Плюсы –  Использует HTTP протокол –  Реализация на сервере достаточна проста –  Может автоматически делать реконнект –  Достаточно гибкий формат сообщений –  1 постоянное соединение с сервером

•  Минусы –  Может неадекватно вести себя при физическом отключении от сети –  Может только принимать данные –  Не поддерживается IE –  Может блокироваться прокси-серверами

6.0 6.0 9.0 5.0 –

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

•  Когда применять –  Актуальность данных очень критична –  Очень много данных передается или передаются очень часто

• Плюсы –  1 соединение на отправку и получение –  Быстрый обмен данными –  Бинарный формат

•  Минусы –  Не HTTP –  Сложно отлаживать –  Может блокироваться прокси-серверами –  6 форматов протокола –  Поддерживается далеко не всеми веб-браузерами

14.0 11.0* 8.0 6.0 10.0

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/

Загрузка файлов

Post2HiddenIframe + JSONP,

XMLHttpRequest level 2 + File API,

Flash

20

Post2HiddenIframe + JSONP

• Post2HiddenIframe – для отправки •  JSONP – для контроля

–  Прогресс отправки –  Результат отправки –  Получение ссылки на файл

• Плюсы –  Работает везде

• Минусы –  Необходим контроль –  Много дополнительных запросов

0+ 0+ 0+ 0+ 3+

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); });

22

XHR2 + File API

• Плюсы –  Естественный способ без костылей –  Только 1 запрос –  Реализация на сервере проще чем Post2HiddenIframe + JSONP

• Минусы –  Не поддерживается всеми браузерами

13.0 3.6 12 5.1* 10.0*

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/

24

Flash

• На самоподготовку –  Выделите его проблемы –  Сравните с рассмотренными выше способами

Библиотеки и обертки

jQuery.ajax,

jQuery.serialize,

Socket.IO,

NowJS

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/

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; });

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); }); });

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>

Проблемы

Каскады протоколов,

Баги браузеров,

Прокси серверы,

Обрывы соединения,

Асинхронная модель приложения

Михаил Давыдов

Разработчик JavaScript

azproduction@yandex-team.ru azproduction

Спасибо