Транспорт, ajaxМихаил ДавыдовРазработчик JavaScript
Немного истории    •  FRAME, IFRAME – IE 3, 1996год    •  ActiveX MSXML – IE 5.5, 1998год    •  AJAX, Web 2.0 – 2005год   ...
Кроссодоменные запросы  JSONP,  Post2HiddenIframe,  XMLHttpRequest level 2 (CORS),  Каскад фреймов или postMessage
JSONP                                                0+    0+    0+    0+   3+    •  Когда применять     –  Запрос каких-т...
JSONP// 1 Готовим «Ловушку»window.jsonFlickrFeed = function (data) {    console.log(data);};var serviceUrl = http://api.fl...
Post2HiddenIframe                                              0+    0+    0+    0+   3+    •  Кода применять     –  Push ...
Post2HiddenIframe// 1 Создаем форму<form target="frame"      action="http://yandex.ru/"      method="post">    <input name...
XHR2 (CORS)                                                4.0    3.5   12   4.0   10    •  Кода применять     –  Запрос к...
XHR2 (CORS)function requestFactory() {  var xhr = new XMLHttpRequest();  if ("withCredentials" in xhr) {      return xhr; ...
Каскад фреймов или postMessage     •  На самоподготовку      –  Выделите его достоинства и недостатки      –  Сравните с п...
Real-time приложения LongPolling через XHR, EventSource (Server Sent Events), WebSocket
LongPolling & XHR                                               1.0   0.6    8.0   1.2   5.0     •  Когда применять      –...
LongPolling & XHRfunction poll(resource, callback) {    $.get(resource, function (e, data) {        if (callback(data)) { ...
EventSource                                                   6.0   6.0   9.0   5.0   –     •  Когда применять      –  Ваш...
LongPolling & XHR// Content-Type: text/event-stream// Cache-Control: no-cacheif (!window.EventSource) throw new Error(No S...
WebSocket                                                14.0   11.0*   8.0   6.0   10.0     •  Когда применять      –  Ак...
LongPolling & XHRwindow.WebSocket = window.WebSocket || window.MozWebSocket;var connection = new WebSocket(ws://echo.webso...
Загрузка файловPost2HiddenIframe + JSONP,XMLHttpRequest level 2 + File API,Flash
Post2HiddenIframe + JSONP                                         0+   0+   0+   0+   3+     •  Post2HiddenIframe – для от...
Post2HiddenIframe + JSONP<form target="frame"      action="http://yandex.ru/"      method="post"      enctype="multipart/f...
XHR2 + File API                                               13.0   3.6   12   5.1*   10.0*     •  Плюсы      –  Естестве...
XHR2 + File APIdocument.getElementById(file).addEventListener(change, function(e) {    var file = this.files[0];    var xh...
Flash     •  На самоподготовку      –  Выделите его проблемы      –  Сравните с рассмотренными выше способами24
Библиотеки и обертки jQuery.ajax, jQuery.serialize, Socket.IO, NowJS
jQuery.ajax var globalCallback = function () {     console.log(arguments); }; $.get(/echo/json/, globalCallback); $.post(/...
jQuery.serialize <form>     <input type="text" name="a" value="1"/>     <input type="text" name="b" value="2"/>     <input...
Socket.IOvar io = require(socket.io).listen(80);         // Serverio.sockets.on(connection, function (socket) {    socket....
NowJSvar nowjs = require("now");                        // Servervar everyone = nowjs.initialize(httpServer);everyone.now....
ПроблемыКаскады протоколов,Баги браузеров,Прокси серверы,Обрывы соединения,Асинхронная модель приложения
Михаил Давыдов     Разработчик JavaScript     azproduction@yandex-team.ru     azproductionСпасибо
Михаил Давыдов — Транспорт, Ajax
Upcoming SlideShare
Loading in …5
×

Михаил Давыдов — Транспорт, Ajax

4,739 views
4,672 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
4,739
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Михаил Давыдов — Транспорт, Ajax

  1. 1. Транспорт, ajaxМихаил ДавыдовРазработчик JavaScript
  2. 2. Немного истории •  FRAME, IFRAME – IE 3, 1996год •  ActiveX MSXML – IE 5.5, 1998год •  AJAX, Web 2.0 – 2005год •  W3C XMLHttpRequest – 2006год стандарт3
  3. 3. Кроссодоменные запросы JSONP, Post2HiddenIframe, XMLHttpRequest level 2 (CORS), Каскад фреймов или postMessage
  4. 4. JSONP 0+ 0+ 0+ 0+ 3+ •  Когда применять –  Запрос каких-то не очень критичных данных –  Прием огромных объемов данных •  Плюсы –  Дешевый способ –  Доступен в любом браузере •  Минусы –  Невозможно отследить статус ответа и ошибки, только таймауты –  Только GET –  Не безопасный5
  5. 5. JSONP// 1 Готовим «Ловушку»window.jsonFlickrFeed = function (data) { console.log(data);};var serviceUrl = http://api.flickr.com/services/feeds + /photos_public.gne?format=json&amp; + jsoncallback=jsonFlickrFeed;// 2 Создаем скриптvar scriptElement = document.createElement(script);scriptElement.src = serviceUrl;document.body.appendChild(scriptElement); http://jsfiddle.net/ffTQL/1/
  6. 6. Post2HiddenIframe 0+ 0+ 0+ 0+ 3+ •  Кода применять –  Push каких-то не критичных данных –  Отправка файлов •  Плюсы –  Реализация очень проста –  Доступен в любом браузере –  Можно отправлять файлы –  POST, GET •  Минусы –  Нет возможности подтвердить получение данных сервером7
  7. 7. 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/
  8. 8. XHR2 (CORS) 4.0 3.5 12 4.0 10 •  Кода применять –  Запрос критичных данных –  Long Polling •  Плюсы –  Не отличается от XHR (IE – XDomainRequest) –  Это не костыль –  Можно отследить ошибки и статусы ответа –  Простая реализация поддержки на сервере –  DELETE, GET, HEAD, OPTIONS, POST, PUT •  Минусы –  Не поддерживается многими старыми браузерами –  Может блокироваться прокси-серверами9
  9. 9. 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/
  10. 10. Каскад фреймов или postMessage •  На самоподготовку –  Выделите его достоинства и недостатки –  Сравните с предыдущими методами11
  11. 11. Real-time приложения LongPolling через XHR, EventSource (Server Sent Events), WebSocket
  12. 12. LongPolling & XHR 1.0 0.6 8.0 1.2 5.0 •  Когда применять –  Для обратной совместимости со старыми браузерами –  Приложения где данные передаются редко –  Вам лень писать что-то другое •  Плюсы –  Это работает во всех браузерах –  Самая простая реализация •  Минусы –  Приходится постоянно создавать соединения –  Для отправки данных необходимо поднимать еще одно соединение –  Проблема с одновременными запросами13
  13. 13. LongPolling & XHRfunction 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/
  14. 14. EventSource 6.0 6.0 9.0 5.0 – •  Когда применять –  Ваш сервис большую часть времени получает данные –  Для обратной совместимости со старыми браузерами •  Плюсы –  Использует HTTP протокол –  Реализация на сервере достаточна проста –  Может автоматически делать реконнект –  Достаточно гибкий формат сообщений –  1 постоянное соединение с сервером •  Минусы –  Может неадекватно вести себя при физическом отключении от сети –  Может только принимать данные –  Не поддерживается IE –  Может блокироваться прокси-серверами15
  15. 15. LongPolling & XHR// Content-Type: text/event-stream// Cache-Control: no-cacheif (!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/
  16. 16. WebSocket 14.0 11.0* 8.0 6.0 10.0 •  Когда применять –  Актуальность данных очень критична –  Очень много данных передается или передаются очень часто •  Плюсы –  1 соединение на отправку и получение –  Быстрый обмен данными –  Бинарный формат •  Минусы –  Не HTTP –  Сложно отлаживать –  Может блокироваться прокси-серверами –  6 форматов протокола –  Поддерживается далеко не всеми веб-браузерами17
  17. 17. LongPolling & XHRwindow.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/
  18. 18. Загрузка файловPost2HiddenIframe + JSONP,XMLHttpRequest level 2 + File API,Flash
  19. 19. Post2HiddenIframe + JSONP 0+ 0+ 0+ 0+ 3+ •  Post2HiddenIframe – для отправки •  JSONP – для контроля –  Прогресс отправки –  Результат отправки –  Получение ссылки на файл •  Плюсы –  Работает везде •  Минусы –  Необходим контроль –  Много дополнительных запросов20
  20. 20. 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/
  21. 21. XHR2 + File API 13.0 3.6 12 5.1* 10.0* •  Плюсы –  Естественный способ без костылей –  Только 1 запрос –  Реализация на сервере проще чем Post2HiddenIframe + JSONP •  Минусы –  Не поддерживается всеми браузерами22
  22. 22. XHR2 + File APIdocument.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/
  23. 23. Flash •  На самоподготовку –  Выделите его проблемы –  Сравните с рассмотренными выше способами24
  24. 24. Библиотеки и обертки jQuery.ajax, jQuery.serialize, Socket.IO, NowJS
  25. 25. 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/
  26. 26. 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/
  27. 27. Socket.IOvar io = require(socket.io).listen(80); // Serverio.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/
  28. 28. NowJSvar nowjs = require("now"); // Servervar 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/
  29. 29. ПроблемыКаскады протоколов,Баги браузеров,Прокси серверы,Обрывы соединения,Асинхронная модель приложения
  30. 30. Михаил Давыдов Разработчик JavaScript azproduction@yandex-team.ru azproductionСпасибо

×