Транспорты
Sponsored Links
This presentation is the property of its rightful owner.
1 / 31

Транспорты PowerPoint PPT Presentation


  • 151 Views
  • Uploaded on
  • Presentation posted in: General

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

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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Транспорты

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


История

  • FRAME, IFRAME – IE 3, 1996 год

  • ActiveX MSXML – IE 5.5, 1998 год

  • AJAX, Web 2.0 – 2005 год

  • W3C XMLHttpRequest – 2006год стандарт


Технологии передачи данных

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

Обычно способ передачи данных выбирается исходя из свойств решаемой задачи.


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

  • JSONP

  • POST в скрытый Iframe (Post2HiddenIframe)

  • XMLHttpRequest level 2 (XHR2) (CORS)

  • Каскад фреймов (postMessage)


JSONP

  • Применяется

    • Загрузка не критичных данных

    • Приём огромных объёмов данных

  • Плюсы

    • Простой в реализации способ

    • Поддерживается всеми браузерами

  • Минусы

    • Невозможно обработать ошибки

    • Только GET запрос и специфическая поддержка на сервере

    • Не безопасный (JavaScript может быть подменен)

0+

0+

0+

0+

3+


Пример


Post2HiddenIframe

  • Применяется

    • Отправка некритичных данных

    • Отправка файлов

  • Плюсы

    • Простая реализация как на клиенте так и на сервере

    • Доступен в любом браузере

    • Может отправлять файлы

    • Доступны POST и GET запросы

  • Минусы

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

0+

0+

0+

0+

3+


Пример


XHR2 (CORS)

  • Применяется

    • Запрос критичных данных

    • Long Polling

  • Плюсы

    • Не отличается от XHR (IE - XDomainRequest)

    • Это стандартный способ для кроссдоменных запросов

    • Можно узнать статус ответа

    • Простая реализация поддержки на сервере

    • DELETE, GET, HEAD, OPTIONS, POST, PUT

  • Минусы

    • Поддерживается не всеми браузерами

    • Может быть блокирован proxy по header’у

4.0

12

4.0

3.5

10


Пример


Каскад фреймов (postMessage)

  • Применяется

    • Отправка некритичных данных

  • Плюсы

    • Поддерживается всеми браузерами

    • Не требует особенностей при реализации

  • Минусы

    • Невозможно узнать статус ответа

    • Можно применять только для отправки данных

4.0

9.5

1.0

6.0

8.0


Пример

Отправка сообщения в главном окне

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


Real-time приложения(чат, игры, биржевые сводки)

  • LongPollingчерез XHR

  • EventSource (Server Sent Events)

  • WebSocket


LongPolling

  • Когда применять

    • Для совместимости со старыми браузерами

    • Если данные передаются редко

  • Плюсы

    • Работает во всех браузерах

    • Простая реализация

  • Минусы

    • Приходится постоянно создавать соединение

    • Для отправки данных необходимо дополнительное соединение

    • Проблема с одновременными запросами

1.2

8.0

1.0

0.6

5.0


Пример


EventSource

  • Применяется

    • Клиент чаще получает данные чем отдаёт

    • Совместимость со старыми браузерами

  • Плюсы

    • Использует HTTP протокол

    • Реализация на сервере достаточно проста

    • Может автоматически восстанавливать соединение

    • Гибкий формат сообщений

    • Одно постоянное соединение с сервером

  • Минусы

    • Невозможно отследить физическое отключение от сети

    • Может только принимать данные

    • Не поддерживается IE

    • Может блокироваться proxy

5.0

9.0

6.0

6.0


Пример


WebSocket

  • Применяется

    • Критична актуальность данных

    • Данные передаются много и часто

  • Плюсы

    • 1 соединение на отправку и получение (полнодуплексное соединение)

    • Быстрый обмен данными

    • Бинарный формат

  • Минусы

    • Не HTTP протокол

    • Сложно отлаживать

    • Может блокироваться прокси-серверами

    • 6 форматов протокола

    • Поддерживается не всеми веб-браузерами

6.0

8.0

14.0

11.0

10.0


Пример

Реализация для java на tomcat

https://gist.github.com/chitan/3063774


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

  • Post2HiddenIframe + JSONP

  • XMLHR2 + File API


Post2HiddenIframe + JSONP

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

  • JSONP – для контроля

    • Прогресс отправки

    • Результат отправки

    • Получение ссылки на файл

  • Плюсы

    • Работает везде

  • Минусы

    • Необходим контроль

    • Много дополнительных запросов

0+

0+

0+

0+

3+


Пример


XMLHR2 + File API

  • Плюсы

    • Естественный способ без костылей

    • Только 1 запрос

  • Реализация на сервере проще чем

    • Post2HiddenIframe + JSONP

  • Минусы

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

5.1

12

13.0

3.6

10.0


Пример


Библиотеки

  • jQuery.ajax

  • jQuery.serialize

  • Socket.IO

  • NowJS


jQuery.ajax


jQuery.serialize


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то не происходит добавления знаков “[]” в конце имени параметров-массивов.


Socket.IO


NowJS


Проблемы

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

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

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

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

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


  • Login