1 / 31

Транспорты

Транспорты. Технологии для передачи данныз. История. FRAME, IFRAME – IE 3, 1996 год ActiveX MSXML – IE 5.5, 1998 год AJAX , Web 2.0 – 2005 год W3C XMLHttpRequest – 2006 год стандарт. Технологии передачи данных.

vina
Download Presentation

Транспорты

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Транспорты Технологии для передачи данныз

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

  3. Технологии передачи данных Сейчас технологий гораздо больше чем просто Ajax (EventSource, WebSocket), но до сих пор применяется полный набор технологий. Обычно способ передачи данных выбирается исходя из свойств решаемой задачи.

  4. Кроссдоменные запросы • JSONP • POST в скрытый Iframe (Post2HiddenIframe) • XMLHttpRequest level 2 (XHR2) (CORS) • Каскад фреймов (postMessage)

  5. JSONP • Применяется • Загрузка не критичных данных • Приём огромных объёмов данных • Плюсы • Простой в реализации способ • Поддерживается всеми браузерами • Минусы • Невозможно обработать ошибки • Только GET запрос и специфическая поддержка на сервере • Не безопасный (JavaScript может быть подменен) 0+ 0+ 0+ 0+ 3+

  6. Пример

  7. Post2HiddenIframe • Применяется • Отправка некритичных данных • Отправка файлов • Плюсы • Простая реализация как на клиенте так и на сервере • Доступен в любом браузере • Может отправлять файлы • Доступны POST и GET запросы • Минусы • Нет возможности подтвердить получение данных 0+ 0+ 0+ 0+ 3+

  8. Пример

  9. XHR2 (CORS) • Применяется • Запрос критичных данных • Long Polling • Плюсы • Не отличается от XHR (IE - XDomainRequest) • Это стандартный способ для кроссдоменных запросов • Можно узнать статус ответа • Простая реализация поддержки на сервере • DELETE, GET, HEAD, OPTIONS, POST, PUT • Минусы • Поддерживается не всеми браузерами • Может быть блокирован proxy по header’у 4.0 12 4.0 3.5 10

  10. Пример

  11. Каскад фреймов (postMessage) • Применяется • Отправка некритичных данных • Плюсы • Поддерживается всеми браузерами • Не требует особенностей при реализации • Минусы • Невозможно узнать статус ответа • Можно применять только для отправки данных 4.0 9.5 1.0 6.0 8.0

  12. Пример Отправка сообщения в главном окне Приём в iframe. Окно может быть на другом домене и делать submit

  13. Real-time приложения(чат, игры, биржевые сводки) • LongPollingчерез XHR • EventSource (Server Sent Events) • WebSocket

  14. LongPolling • Когда применять • Для совместимости со старыми браузерами • Если данные передаются редко • Плюсы • Работает во всех браузерах • Простая реализация • Минусы • Приходится постоянно создавать соединение • Для отправки данных необходимо дополнительное соединение • Проблема с одновременными запросами 1.2 8.0 1.0 0.6 5.0

  15. Пример

  16. EventSource • Применяется • Клиент чаще получает данные чем отдаёт • Совместимость со старыми браузерами • Плюсы • Использует HTTP протокол • Реализация на сервере достаточно проста • Может автоматически восстанавливать соединение • Гибкий формат сообщений • Одно постоянное соединение с сервером • Минусы • Невозможно отследить физическое отключение от сети • Может только принимать данные • Не поддерживается IE • Может блокироваться proxy 5.0 9.0 6.0 6.0 –

  17. Пример

  18. WebSocket • Применяется • Критична актуальность данных • Данные передаются много и часто • Плюсы • 1 соединение на отправку и получение (полнодуплексное соединение) • Быстрый обмен данными • Бинарный формат • Минусы • Не HTTP протокол • Сложно отлаживать • Может блокироваться прокси-серверами • 6 форматов протокола • Поддерживается не всеми веб-браузерами 6.0 8.0 14.0 11.0 10.0

  19. Пример Реализация для java на tomcat https://gist.github.com/chitan/3063774

  20. Загрузка файлов • Post2HiddenIframe + JSONP • XMLHR2 + File API

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

  22. Пример

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

  24. Пример

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

  26. jQuery.ajax

  27. jQuery.serialize

  28. jQuery.param jQuery.param({a:"ddd", b:"ssss"}) //"a=ddd&b=ssss“ jQuery.param({a:"ddd", b:["ssss","ssssss"]}) //"a=ddd&b%5B%5D=ssss&b%5B%5D=ssssss“ jQuery.param({a:"ddd", b:["ssss","ssssss"]},true) //"a=ddd&b=ssss&b=ssssss" Если установлен параметр traditionalто не происходит добавления знаков “[]” в конце имени параметров-массивов.

  29. Socket.IO

  30. NowJS

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

More Related