2. Транспорт, ajax
Михаил Давыдов
Разработчик JavaScript

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

4. Кроссодоменные запросы
JSONP,
Post2HiddenIframe,
XMLHttpRequest level 2 (CORS),
Каскад фреймов или postMessage

5. JSONP
0+ 0+ 0+ 0+ 3+
• Когда применять
– Запрос каких-то не очень критичных данных
– Прием огромных объемов данных
• Плюсы
– Дешевый способ
– Доступен в любом браузере
• Минусы
– Невозможно отследить статус ответа и ошибки, только таймауты
– Только GET
– Не безопасный
5

6. 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
0+ 0+ 0+ 0+ 3+
• Кода применять
– Push каких-то не критичных данных
– Отправка файлов
• Плюсы
– Реализация очень проста
– Доступен в любом браузере
– Можно отправлять файлы
– POST, GET
• Минусы
– Нет возможности подтвердить получение данных сервером
7

8. 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)
4.0 3.5 12 4.0 10
• Кода применять
– Запрос критичных данных
– Long Polling
• Плюсы
– Не отличается от XHR (IE – XDomainRequest)
– Это не костыль
– Можно отследить ошибки и статусы ответа
– Простая реализация поддержки на сервере
– DELETE, GET, HEAD, OPTIONS, POST, PUT
• Минусы
– Не поддерживается многими старыми браузерами
– Может блокироваться прокси-серверами
9

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

12. Real-time приложения
LongPolling через XHR,
EventSource (Server Sent Events),
WebSocket

13. LongPolling & XHR
1.0 0.6 8.0 1.2 5.0
• Когда применять
– Для обратной совместимости со старыми браузерами
– Приложения где данные передаются редко
– Вам лень писать что-то другое
• Плюсы
– Это работает во всех браузерах
– Самая простая реализация
• Минусы
– Приходится постоянно создавать соединения
– Для отправки данных необходимо поднимать еще одно соединение
– Проблема с одновременными запросами
13

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 6.0 10.0
• Когда применять
– Актуальность данных очень критична
– Очень много данных передается или передаются очень часто
• Плюсы
– 1 соединение на отправку и получение
– Быстрый обмен данными
– Бинарный формат
• Минусы
– Не HTTP
– Сложно отлаживать
– Может блокироваться прокси-серверами
– 6 форматов протокола
– Поддерживается далеко не всеми веб-браузерами
17

18. 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/

19. Загрузка файлов
Post2HiddenIframe + JSONP,
XMLHttpRequest level 2 + File API,
Flash

20. Post2HiddenIframe + JSONP
0+ 0+ 0+ 0+ 3+
• Post2HiddenIframe – для отправки
• JSONP – для контроля
– Прогресс отправки
– Результат отправки
– Получение ссылки на файл
• Плюсы
– Работает везде
• Минусы
– Необходим контроль
– Много дополнительных запросов
20

21. 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>
$('input').change(function () {
$('form').submit();
});
$.getJSON('/echo/jsonp/?callback=?', function(e, progress) {
console.log(progress);
});
http://jsfiddle.net/AZmXx/2/

22. XHR2 + File API
13.0 3.6 12 5.1* 10.0*
• Плюсы
– Естественный способ без костылей
– Только 1 запрос
– Реализация на сервере проще чем Post2HiddenIframe + JSONP
• Минусы
– Не поддерживается всеми браузерами
22

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/

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

25. Библиотеки и обертки
jQuery.ajax,
jQuery.serialize,
Socket.IO,
NowJS

26. 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/

27. 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>
$('form').submit(function() {
alert($(this).serialize());
return false;
});
http://jsfiddle.net/Smvvr/

28. 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);
});
});
var socket = io.connect('http://localhost');
socket.on('news', function (data) {
console.log(data);
socket.emit('my other event', { my: 'data' });
});
http://socket.io/

29. NowJS
var nowjs = require("now"); // Server
var everyone = nowjs.initialize(httpServer);
everyone.now.getServerInfo = function(callback){
callback("Hello World!");
}
<script src="//localhost/nowjs/now.js"></script>
<script>
now.getServerInfo(function(data){
console.log(data);
});
</script>
http://nowjs.com/

30. Проблемы
Каскады протоколов,
Баги браузеров,
Прокси серверы,
Обрывы соединения,
Асинхронная модель приложения

31. Михаил Давыдов
Разработчик JavaScript
azproduction@yandex-team.ru
azproduction
Спасибо