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

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


  • 124 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


4375126

Транспорты

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


4375126

История

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

  • ActiveX MSXML – IE 5.5, 1998 год

  • AJAX, Web 2.0 – 2005 год

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


4375126

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

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

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


4375126

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

  • JSONP

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

  • XMLHttpRequest level 2 (XHR2) (CORS)

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


Jsonp

JSONP

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

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

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

  • Плюсы

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

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

  • Минусы

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

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

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

0+

0+

0+

0+

3+


4375126

Пример


Post2hiddeniframe

Post2HiddenIframe

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

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

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

  • Плюсы

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

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

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

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

  • Минусы

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

0+

0+

0+

0+

3+


4375126

Пример


Xhr2 cors

XHR2 (CORS)

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

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

    • Long Polling

  • Плюсы

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

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

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

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

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

  • Минусы

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

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

4.0

12

4.0

3.5

10


4375126

Пример


Postmessage

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

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

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

  • Плюсы

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

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

  • Минусы

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

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

4.0

9.5

1.0

6.0

8.0


4375126

Пример

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

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


Real time

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

  • LongPollingчерез XHR

  • EventSource (Server Sent Events)

  • WebSocket


Longpolling

LongPolling

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

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

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

  • Плюсы

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

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

  • Минусы

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

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

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

1.2

8.0

1.0

0.6

5.0


4375126

Пример


Eventsource

EventSource

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

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

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

  • Плюсы

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

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

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

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

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

  • Минусы

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

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

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

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

5.0

9.0

6.0

6.0


4375126

Пример


Websocket

WebSocket

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

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

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

  • Плюсы

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

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

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

  • Минусы

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

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

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

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

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

6.0

8.0

14.0

11.0

10.0


4375126

Пример

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

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


4375126

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

  • Post2HiddenIframe + JSONP

  • XMLHR2 + File API


Post2hiddeniframe jsonp

Post2HiddenIframe + JSONP

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

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

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

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

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

  • Плюсы

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

  • Минусы

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

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

0+

0+

0+

0+

3+


4375126

Пример


Xmlhr2 file api

XMLHR2 + File API

  • Плюсы

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

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

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

    • Post2HiddenIframe + JSONP

  • Минусы

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

5.1

12

13.0

3.6

10.0


4375126

Пример


4375126

Библиотеки

  • jQuery.ajax

  • jQuery.serialize

  • Socket.IO

  • NowJS


Jquery ajax

jQuery.ajax


Jquery serialize

jQuery.serialize


Jquery param

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

Socket.IO


Nowjs

NowJS


4375126

Проблемы

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

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

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

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

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


  • Login