From 2a0e2153686b9f7c33c96cfcc2c1645e6814f615 Mon Sep 17 00:00:00 2001 From: Ilya Kantor Date: Fri, 10 Jul 2015 18:13:10 +0300 Subject: [PATCH] es6 --- 4-ajax/14-fetch/article.md | 80 ++++++++++++++++++++++ 4-ajax/14-fetch/user.js | 4 ++ 4-ajax/15-ajax-summary/article.md | 109 ++++++++++++++++++++++++++++++ 3 files changed, 193 insertions(+) create mode 100644 4-ajax/14-fetch/article.md create mode 100644 4-ajax/14-fetch/user.js create mode 100644 4-ajax/15-ajax-summary/article.md diff --git a/4-ajax/14-fetch/article.md b/4-ajax/14-fetch/article.md new file mode 100644 index 00000000..69e95186 --- /dev/null +++ b/4-ajax/14-fetch/article.md @@ -0,0 +1,80 @@ + +# Метод fetch: замена XMLHttpRequest + +Метод [fetch](https://fetch.spec.whatwg.org/) -- это `XMLHttpRequest` нового поколения. Он предоставляет улучшенный интерфейс для осуществления запросов к серверу: как по части возможностей и контроля над происходящим, так и по синтаксису, так как построен на [промисах](/promise). + +Поддержка в браузерах пока не очень распространена, но есть [полифилл](https://github.com/github/fetch) и не один. + +## Синтаксис + +Синтаксис метода `fetch`: +```js +let promise = fetch(url[, options]); +``` + + + +Свойства `options`: + + +Как видно, всевозможных настроек здесь больше, чем в `XMLHttpRequest`. Вместе с тем, надо понимать, что если мы используем полифилл, то ничего более гибкого, чем оригинальный `XMLHttpRequest` мы из этого не получим. + +Разве что, `fetch`, возможно, будет удобнее пользоваться. + +## Использование + +При вызове `fetch` возвращает промис, который, когда получен ответ, выполняет коллбэки с объектом [Response](https://fetch.spec.whatwg.org/#response) или с ошибкой, если запрос не удался. + +Пример использования: + +```js +//+ run +'use strict'; + +fetch('/article/fetch/user.json') + .then(function(response) { + alert(response.headers.get('Content-Type')); // application/json; charset=utf-8 + alert(response.status); // 200 + + return response.json(); + }) + .then(function(user) { + alert(user.name); // iliakan + }) + .catch( alert ); +``` + +Объект `response` кроме доступа к заголовкам `headers`, статусу `status` и некоторым другим полям ответа, даёт возможность прочитать его тело, в желаемом формате. + +Варианты описаны в спецификации [Body](https://fetch.spec.whatwg.org/#body), они включают в себя: + + + +Соответствующий вызов возвращает промис, который, когда ответ будет получен, вызовет коллбэк с результатом. + +В примере выше мы можем в первом `.then` проанализировать ответ и, если он нас устроит -- вернуть промис с нужным форматом. Следующий `.then` уже будет содержать полный ответ сервера. + +Больше примеров вы можете найти в описании [полифилла для fetch](https://github.com/github/fetch). + +## Итого + +Метод `fetch` -- уже сейчас удобная альтернатива `XMLHttpRequest` для тех, кто не хочет ждать и любит промисы. + +Детальное описание этого метода есть в стандарте [Fetch](https://fetch.spec.whatwg.org/), а простейшие примеры запросов -- в описании к [полифиллу](https://github.com/github/fetch). \ No newline at end of file diff --git a/4-ajax/14-fetch/user.js b/4-ajax/14-fetch/user.js new file mode 100644 index 00000000..32f89971 --- /dev/null +++ b/4-ajax/14-fetch/user.js @@ -0,0 +1,4 @@ +{ + "name": "iliakan", + "isAdmin": true +} diff --git a/4-ajax/15-ajax-summary/article.md b/4-ajax/15-ajax-summary/article.md new file mode 100644 index 00000000..61868ba5 --- /dev/null +++ b/4-ajax/15-ajax-summary/article.md @@ -0,0 +1,109 @@ +# Таблица транспортов и их возможностей + +Здесь мы подведём итог раздела, сравним транспорты и их возможности. +[cut] + +## Способы опроса сервера + +Основные способы опроса сервера: +
    +
  1. **Частые опросы** -- регулярно к серверу отправляется запрос за данными. Сервер тут же отвечает на него, возвращая данные, если они есть. Если нет -- получается, что запрос был зря. + +Этот способ очень лёгок в реализации, но приводит к большому количеству лишних запросов, поэтому мы его далее не рассматриваем. +
    2. +
  2. **Длинные опросы** -- к серверу отправляется запрос за данными. Сервер не отвечает на него, пока данные не появятся. Когда данные появились -- ответ с ними отправляется в браузер, и тот тут же делает новый запрос. + +Способ хорош, пока сообщений не слишком много. В идеальном случае соединение почти всё время висит открытым, лишь иногда сервер отвечает на него, доставляя данные в браузер. + +Также удобен в реализации, но даёт большое количество висящий соединений на сервере. Не все сервера хорошо поддерживают это. Например, `Apache` будет есть очень много памяти. +
    3. +
  3. **Потоковое соединение** -- открыто соединение к серверу, и через него непрерывно поступают данные.
    4. +
+ +## Таблица транспортов +Основные характеристики всех транспортов, которые мы обсуждали в деталях, собраны в этой таблице. + +Они были детально рассмотрены в предыдущих главах раздела. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
`XMLHttpRequest``IFRAME``SCRIPT``EventSource``WebSocket`
Кросс-доменностьда, кроме IE9-x1даi1дадада
МетодыЛюбыеGET / POSTGETGETСвой протокол
COMETДлинные опросыx2Непрерывное соединениеДлинные опросыНепрерывное соединениеНепрерывное соединение в обе стороны
ПоддержкаВсе браузеры, ограничения в IE9-x3Все браузерыВсе браузерыКроме IEIE 10, FF11, Chrome 16, Safari 6, Opera 12.5w1
+ +Пояснения: + +
+
`XMLHttpRequest`
+
+
    +
  1. В IE8-9 поддерживаются кросс-доменные GET/POST запросы с ограничениями через `XDomainRequest`.
    2. +
  2. Можно говорить об ограниченной поддержке непрерывного соединения через `onprogress`, но это событие вызывается не чаще чем в `50ms` и не гарантирует получение полного пакета данных. Например, сервер может записать "Привет!", а событие вызовется один раз, когда браузер получил "При". Поэтому наладить обмен пакетами сообщений с его помощью затруднительно. +
    3. +
  3. Многие возможности современного стандарта включены в IE лишь с версии 10.
    4. +
+
+
`IFRAME`
+
+
    +
  1. Во всех современных браузерах и IE8 кросс-доменность обеспечивает `postMessage`. В более старых браузерах возможны решения через `window.name` и хэш.
    2. +
+
+
`WebSocket`
+
+
    +
  1. Имеется в виду поддержка окончательной редакции протокола [RFC 6455](http://tools.ietf.org/html/rfc6455), описанной в разделе [](/websockets). Более старые браузеры могут поддерживать черновики протокола. IE9- не поддерживает `WebSocket`.
    2. +
+
+
+ +Существует также нестандартный транспорт, не рассмотренный здесь: + + +В современных браузерах поддерживается новый метод [fetch](/fetch), в качестве замены XMLHttpRequest ([полифилл](https://github.com/github/fetch)).