Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

0 views

Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Михаил Давыдов — Транспорт, 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& + 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Спасибо

×