Тип xhr что это

Тип xhr что это

XMLHTTP (XMLHttpRequest, XHR) — набор API, используемый в языках JScript, VBScript и им подобных для пересылки различных данных (XHTML, HTTP-протоколу между браузером и веб-сервером. Позволяет осуществлять HTTP-запросы к удаленному серверу без необходимости перезагружать страницу.

XMLHTTP является важной составляющей технологии XML), используется многими сайтами для создания динамичных, быстро реагирующих на запросы пользователя приложений. Например XMLHTTP используется такими сайтами как Google Suggest, MSN Virtual Earth. XMLHTTP работает только с файлами, находящимися на том же домене, что и использующая XMLHTTP страница. Как и в случае JavaScript, это сделано в целях безопасности (cross-site scripting).

Кроме пересылки XML, через XMLHTTP можно обмениваться данными формы и просто текстовыми строками.

Содержание

История

Впервые был реализован компанией Internet Explorer 5.0 в виде объекта ActiveX, доступного через VBScript, или другие скриптовые языки, поддерживающиеся браузером. Программисты проекта Mozilla затем разработали совместимую версию, называющуюся XMLHttpRequest в Mozilla 1.0. В дальнейшем эта возможность также была реализована компаниями Safari 1.2, родственным браузером Opera Software начиная с

Методы класса XMLHttpRequest

Свойства класса XMLHttpRequest

Ошибки, вызываемые классом XMLHttpRequest

Пример использования

План работы с объектом XMLHttpRequest можно представить следующим образом:

Создание экземпляра объекта XMLHttpRequest.

Вызов для ранних версий Internet Explorer выглядит так:

В более поздних версиях Internet Explorer (до IE7) рекомендуется использовать:

В остальных браузерах:

То есть, для обеспечения кросс-браузерности кода, нужно лишь проверять наличие объектов window.XMLHttpRequest и window.ActiveXObject, и, в зависимости от того, какой есть, тот и применять.

В качестве универсального решения предлагается использование такой функции:

Установка обработчика событий, открытие соединения и отправка запросов

Эти вызовы выглядят так:

После определения всех параметров запроса его остается только отправить. Делается это функцией send(). Если необходимо передать на сервер POST-данные, их надо подставить в качестве параметра для этой функции. POST-данные должны быть свернуты в URL-escaped строку (кодировка UTF-8) и добавлен заголовок req.setRequestHeader («Content-Type», «application/x-www-form-urlencoded»);. Другими словами эта строка будет иметь вид, который мы привыкли видеть в командной строке браузера, при передаче данных методом GET. При отправке GET-запроса для версии без ActiveX необходимо указать параметр null, в остальных случаях можно не указывать никаких параметров. Не будет ошибкой, если для GET всегда будет указан параметр null:

После этого начинает работать вышеуказанный обработчик событий. Он — фактически основная часть программы. В обработчике обычно происходит перехват всех возможных кодов состояния запроса и вызов соответствующих действий, а также перехват возможных ошибок. Пример кода с этими двумя функциями:

Известные проблемы

Проблема с кешированием в Microsoft Internet Explorer

Internet Explorer кеширует GET-запросы. Те авторы, которые не знакомы с кешированием HTTP, ожидают, что GET-запросы не кешируются, или что кеш может быть обойдён, как в случае нажатия кнопки обновления. В некоторых ситуациях избегание кеширования действительно является ошибкой. Одним из решений является использование метода POST, который никогда не кешируется; однако он предназначен для других операций. Другим решением является использование метода запроса GET, включающего уникальную строку запроса с каждым вызовом, как показано на примере ниже.

Следует помнить, что такой способ сильно забивает кеш. Лучше воспользоваться установкой заголовка Expires на прошедшую дату в вашем скрипте, который генерирует содержимое XML. В

Иначе можно заставить объект XMLHttpRequest всегда вытаскивать новое содержимое, не используя кеш.

Важно заметить, что все эти методики должны использоваться в случае, когда кеширование мешает. В основном же лучше получить преимущества в скорости при кешировании, возможно комбинируя со специально уточняемыми датами модификации или другими уместными заголовками на сервере так, чтобы использовать кеширование по максимуму без получения плохих результатов.

См. также

Ссылки

Реализация в браузерах

Учебные руководства

Стандарты

Литература

Полезное

Смотреть что такое «XHR» в других словарях:

XHR — XMLHttpRequest XMLHttpRequest est un objet ActiveX ou Javascript qui permet d obtenir des données au format XML, JSON, mais aussi HTML, ou encore texte simple à l aide de requêtes HTTP. On explique le succès récent de l objet et la très grande… … Wikipédia en Français

XHR — XMLHttpRequest ist eine API zum Transfer von beliebigen Daten über das Protokoll HTTP. Dabei können sämtliche HTTP Anfragemethoden (unter anderem GET, POST, HEAD, PUT) verwendet werden. Wenn eine Anfrage XML Daten liefert, kann XMLHttpRequest… … Deutsch Wikipedia

Xhr — … Deutsch Wikipedia

XHR — eXtreme Hot Rod (Governmental » Transportation) … Abbreviations dictionary

xhr — ISO 639 3 Code of Language ISO 639 2/B Code : ISO 639 2/T Code : ISO 639 1 Code : Scope : Individual Language Type : Ancient Language Name : Hernican … Names of Languages ISO 639-3

XHR — abbr. Xplizit Hardcore Recording … Dictionary of abbreviations

Comet (programming) — Comet is a web application model in which a long held HTTP request allows a web server to push data to a browser, without the browser explicitly requesting it.[1][2] Comet is an umbrella term, encompassing multiple techniques for achieving this… … Wikipedia

XMLHTTPRequest — est un objet ActiveX ou Javascript qui permet d obtenir des données au format XML, JSON, mais aussi HTML, ou encore texte simple à l aide de requêtes HTTP. On explique le succès récent de l objet et la très grande utilisation qui en est faite… … Wikipédia en Français

XMLHttp — XMLHttpRequest XMLHttpRequest est un objet ActiveX ou Javascript qui permet d obtenir des données au format XML, JSON, mais aussi HTML, ou encore texte simple à l aide de requêtes HTTP. On explique le succès récent de l objet et la très grande… … Wikipédia en Français

XMLHttpRequest — est un objet ActiveX ou Javascript qui permet d obtenir des données au format XML, JSON, mais aussi HTML, ou encore texte simple à l aide de requêtes HTTP. On explique le succès récent de l objet et la très grande utilisation qui en est faite… … Wikipédia en Français

Источник

Новые возможности XMLHttpRequest2

Одним из незамеченных героев вселенной HTML5 является XMLHttpRequest 2. Строго говоря XHR2 не является частью HTML5 и не является самостоятельным объектом. XHR2 это тот же XMLHttpRequest, но с некоторыми изменениями. XHR2 является неотъемлемой частью сложных веб-приложений, поэтому ему стоит уделить большее внимание.

Наш старый друг XMLHttpRequest сильно изменился, но не многие знают о его изменениях. XMLHttpRequest Level 2 включает в себя новые возможности, которые положат конец нашим безумным хакам и пляскам с бубном вокруг XMLHttpRequest: кросс-доменные запросы, процесс загрузки файлов, загрузка и отправка двоичных данных. Эти возможности позволяют AJAX уверенно работать без каких-либо хаков с новейшими технологиями HTML5: File System API, Web Audio API, и WebGL.

В этой статье будут освещены новые возможности XMLHttpRequest, особенно те, которые можно использовать при работе с файлами.

Извлечение данных

Извлечение двоичных данных из файла в XHR очень болезненно. Технически это даже невозможно. Но есть один хорошо документированный трюк, который позволяет переписать mime-тип пользовательской кодировкой.

Вот так раньше можно было получить содержимое картинки:

Хотя это работает, но вы получаете в responseText не binary blob, а бинарную строку, которая представляет бинарный файл картинки. Мы обманываем XMLHttpRequest и заставляем его пропускать данные необработанными. Хотя это маленький хак, но я хочу его назвать черной магией.

Указание формат ответа

В предыдущем примере мы загружали картинку как «бинарный файл», переписывая серверный mime-тип и обрабатывая его как двоичную строку. Вместо этой магии давайте воспользуемся новой возможностью XMLHttpRequest — свойствами responseType и response, которые покажут браузеру в каком формате мы желаем получить данные.

xhr.responseType
Перед отправкой запроса можно изменить свойство xhr.responseType и указать формат выдачи: «text», «arraybuffer», «blob» или «document» (по умолчанию «text»).

xhr.response
После выполнения удачного запроса свойство response будет содержать запрошенные данные в формате DOMString, ArrayBuffer, Blob или Document в соответствии с responseType.

С этой новой замечательной фичей мы можем переделать предыдущий пример. На этот раз мы запросом картинку как ArrayBuffer вместо строки. Выгруженный файл мы переделаем в формат Blob с помощью BlobBuilder API:

Вот так намного лучше!

Ответы в формате ArrayBuffer

ArrayBuffer — это общий контейнер фиксированной длины для бинарных данных. Это очень удобно если вам нужен обобщенный буфер сырых бинарных данных, но настоящая сила ArrayBuffer в том, что из него вы можете сделать типизированный JavaScript массив. Фактически вы можете создать массивы разной длины, используя один ArrayBuffer. Например вы можете создать 8-битный целочисленный массив, который использует тот же самый ArrayBuffer что и 32-битный массив, полученный из тех же данных.

В качестве примера напишем код, который получает нашу картинку в виде ArrayBuffer и создает из её данных 8-битный целочисленный массив:

Ответы в формате Blob

Если вы желаете работать напрямую с Blob и/или вам не нужно манипулировать байтами файла используйте xhr.responseType=’blob’ (Сейчас есть только в Chrome crbug.com/52486):

Blob может быть использован в нескольких местах: сохранение данных в indexedDB, запись в HTML5 File System, создание Blob URL(MDC) как в примере выше.

Отправка данных

Возможность принимать данные в различных форматах это здорово, но это нам не подходит если мы не можем отправить эти данных назад (на сервер). XMLHttpRequest ограничивал нас отправкой DOMString или Document (XML). Сейчас это в прошлом. Обновленный метод send() позволяет отправлять данные следующих типов: DOMString, Document, FormData, Blob, File, ArrayBuffer. В этой части статьи мы рассмотрим как отправлять данные в этих форматах.

Отправка строковых данные: xhr.send(DOMString)

До XMLHttpRequest 2:

После XMLHttpRequest 2:

Ничего нового. Пример «После» немного отличается. В нем явно определен responseType, но вы можете не указывать responseType и получите аналогичный результат (по умолчанию всегда text).

Отправка данных форм: xhr.send(FormData)

Думаю многие из вас использовали jQuery или другие библиотеки для отправки данных формы по AJAX. Вместо этого мы можем использовать FormData ещё один тип данных, который понимает XHR2. FormData удобен для создания HTML форм на лету в JavaScript. Эти формы могут быть отправлены используя AJAX:

По существу, мы динамически создаем форму и добавляем в неё поля input, вызывая метод append.
И вам не нужно создавать настоящую форму с нуля. Объекты FormData могут быть инициализированы из существующих HTMLFormElement элементов на странице. Например:

Отправка файла или blob: xhr.send(Blob)

Используя XHR2 мы также можем отправить File или Blob. Имейте ввиду, что файлы это и есть Blob.
В этом примере мы создадим с нуля новое текстовое поле, используя BlobBuilder API и загрузим этот Blob на сервер. Этот код также создает обработчик, который показывает нам процесс загрузки файла (Невероятно полезная фича HTML5):

Отправка произвольного набора байт: xhr.send(ArrayBuffer)

Мы можем отправить ArrayBuffers

Cross Origin Resource Sharing (CORS)

CORS позволяет приложениям на одном домене выполнять кросс-доменные AJAX запросы на другой домен. Нам даже ничего не надо менять на клиенте — все предельно просто! Браузер сам отправит необходимый заголовок за нас.

Включение CORS запросов

Заголовок Access-Control-Allow-Origin может быть выдан одному сайту или любому сайту с любого домена:

На любой странице сайта html5rocks.com включен CORS. Если включить отладчик, то вы можете увидеть этот заголовок Access-Control-Allow-Origin :

Включить кросс-доменные запросы очень просто. Если ваши данные доступны для всех, то, пожалуйста, включите CORS!

Создание кросс-доменного запроса

Если ресурс сервера разрешает CORS, то создание кросс-доменного запроса ничем не отличается от обычного XMLHttpRequest. Например, вот так мы можем выполнить запрос с приложения на сервере example.com на сервер www.example2.com :

Все предельно прозрачно и никаких плясок с бубном вокруг postMessage, window.name, document.domain, серверных проксей и прочих извращенийметодов.

Примеры

Загрузка и сохранение файла в HTML5 File System

Предположим, что у нас есть галерея изображений и мы хотим сохранить несколько картинок к себе, используя HTML5 File System.

Отправка файла по частям

Используя File API мы можем упростить процесс отправки большого файла. Мы разбиваем большой файл на несколько маленьких файлов потом каждый оправляем с помощью XHR. На сервере собираем файл в один большой. Это похоже на то как GMail отправляет большие вложения. Такая техника может применяться для обхода ограничений Google App Engine — 32MB на один http запрос.

Скрипт сборки файла на сервере не прикладываю — там все очевидно.

Источник

Основы XMLHttpRequest

Материал на этой странице устарел, поэтому скрыт из оглавления сайта.

Более новая информация по этой теме находится на странице https://learn.javascript.ru/xmlhttprequest.

Объект XMLHttpRequest (или, как его кратко называют, «XHR») даёт возможность из JavaScript делать HTTP-запросы к серверу без перезагрузки страницы.

Несмотря на слово «XML» в названии, XMLHttpRequest может работать с любыми данными, а не только с XML.

Использовать его очень просто.

Пример использования

Как правило, XMLHttpRequest используют для загрузки данных.

Для начала посмотрим на пример использования, который загружает файл phones.json из текущей директории и выдаёт его содержимое:

Настроить: open

Задаёт основные параметры запроса:

method – HTTP-метод. Как правило, используется GET либо POST, хотя доступны и более экзотические, вроде TRACE/DELETE/PUT и т.п.

«Синхронный запрос» означает, что после вызова xhr.send() и до ответа сервера главный поток будет «заморожен»: посетитель не сможет взаимодействовать со страницей – прокручивать, нажимать на кнопки и т.п. После получения ответа выполнение продолжится со следующей строки.

«Асинхронный запрос» означает, что браузер отправит запрос, а далее результат нужно будет получить через обработчики событий, которые мы рассмотрим далее.

Отослать данные: send

Именно этот метод открывает соединение и отправляет запрос на сервер.

Отмена: abort

Вызов xhr.abort() прерывает выполнение запроса.

Ответ: status, statusText, responseText

Основные свойства, содержащие ответ сервера:

Есть и ещё одно свойство, которое используется гораздо реже:

Синхронные и асинхронные запросы

Если синхронный вызов занял слишком много времени, то браузер предложит закрыть «зависшую» страницу.

Из-за такой блокировки получается, что нельзя отослать два запроса одновременно. Кроме того, забегая вперёд, заметим, что ряд продвинутых возможностей, таких как возможность делать запросы на другой домен и указывать таймаут, в синхронном режиме не работают.

Из всего вышесказанного уже должно быть понятно, что синхронные запросы используются чрезвычайно редко, а асинхронные – почти всегда.

Полный пример в действии:

Событие readystatechange

В примере выше мы использовали только состояние 4 (запрос завершён), но есть и другие.

При состоянии readyState=3 (получен очередной пакет) мы можем посмотреть текущие данные в responseText и, казалось бы, могли бы работать с этими данными как с «ответом на текущий момент».

Однако, технически мы не управляем разрывами между сетевыми пакетами. Если протестировать пример выше в локальной сети, то в большинстве браузеров разрывы будут каждые 1000 символов, но в реальности пакет может прерваться на любом байте.

Чем это опасно? Хотя бы тем, что символы русского языка в кодировке UTF-8 кодируются двумя байтами каждый – и разрыв может возникнуть между ними.

Получится, что при очередном readyState в конце responseText будет байт-полсимвола, то есть он не будет корректной строкой – частью ответа! Если в скрипте как-то по-особому это не обработать, то неизбежны проблемы.

HTTP-заголовки

XMLHttpRequest умеет как указывать свои заголовки в запросе, так и читать присланные в ответ.

Для работы с HTTP-заголовками есть 3 метода:

Нельзя установить заголовки, которые контролирует браузер, например Referer или Host и ряд других (полный список тут).

Это ограничение существует в целях безопасности и для контроля корректности запроса.

Особенностью XMLHttpRequest является то, что отменить setRequestHeader невозможно.

Повторные вызовы лишь добавляют информацию к заголовку, например:

Заголовки возвращаются в виде единой строки, например:

Таким образом, если хочется получить объект с парами заголовок-значение, то эту строку необходимо разбить и обработать.

Таймаут

Максимальную продолжительность асинхронного запроса можно задать свойством timeout :

При превышении этого времени запрос будет оборван и сгенерировано событие ontimeout :

Полный список событий

Современная спецификация предусматривает следующие события по ходу обработки запроса:

Используя эти события можно более удобно отслеживать загрузку ( onload ) и ошибку ( onerror ), а также количество загруженных данных ( onprogress ).

В современных браузерах от него можно отказаться в пользу других, необходимо лишь, как мы увидим далее, учесть особенности IE8-9.

IE8,9: XDomainRequest

В IE8 и IE9 поддержка XMLHttpRequest ограничена:

А обычный XMLHttpRequest решили не трогать, чтобы ненароком не сломать существующий код.

IE9- и кеширование

Обычно ответы на запросы XMLHttpRequest кешируются, как и обычные страницы.

Альтернативный вариант – добавить в URL запроса случайный параметр, предотвращающий кеширование.

Например, вместо xhr.open(‘GET’, ‘service’, false) написать:

По историческим причинам такой способ предотвращения кеширования можно увидеть много где, так как старые браузеры плохо обрабатывали кеширующие заголовки. Сейчас серверные заголовки поддерживаются хорошо.

Итого

Типовой код для GET-запроса при помощи XMLHttpRequest :

Мы разобрали следующие методы XMLHttpRequest :

Задачи

Выведите телефоны

Создайте код, который загрузит файл phones.json из текущей директории и выведет все названия телефонов из него в виде списка.

Исходный код просто выводит содержимое файла (скачайте к себе):

Источник

XMLHttpRequest

XMLHttpRequest – это встроенный в браузер объект, который даёт возможность делать HTTP-запросы к серверу без перезагрузки страницы.

Несмотря на наличие слова «XML» в названии, XMLHttpRequest может работать с любыми данными, а не только с XML. Мы можем загружать/скачивать файлы, отслеживать прогресс и многое другое.

В современной веб-разработке XMLHttpRequest используется по трём причинам:

Основы

XMLHttpRequest имеет два режима работы: синхронный и асинхронный.

Сначала рассмотрим асинхронный, так как в большинстве случаев используется именно он.

Чтобы сделать запрос, нам нужно выполнить три шага:

Этот метод устанавливает соединение и отсылает запрос к серверу. Необязательный параметр body содержит тело запроса.

Три наиболее используемых события:

Вот полный пример. Код ниже загружает /article/xmlhttprequest/example/load с сервера и сообщает о прогрессе:

После ответа сервера мы можем получить результат запроса в следующих свойствах xhr :

Мы можем также указать таймаут – промежуток времени, который мы готовы ждать ответ:

Тип ответа

К примеру, давайте получим ответ в формате JSON:

Состояния запроса

Список всех состояний, указанных в спецификации:

Изменения в состоянии объекта запроса генерируют событие readystatechange :

Вы можете наткнуться на обработчики события readystatechange в очень старом коде, так уж сложилось исторически, когда-то не было событий load и других. Сегодня из-за существования событий load/error/progress можно сказать, что событие readystatechange «морально устарело».

Отмена запроса

Если мы передумали делать запрос, можно отменить его вызовом xhr.abort() :

Синхронные запросы

Выглядит, может быть, и неплохо, но синхронные запросы используются редко, так как они блокируют выполнение JavaScript до тех пор, пока загрузка не завершена. В некоторых браузерах нельзя прокручивать страницу, пока идёт синхронный запрос. Ну а если же синхронный запрос по какой-то причине выполняется слишком долго, браузер предложит закрыть «зависшую» страницу.

Из-за всего этого синхронные запросы используют очень редко. Мы более не будем рассматривать их.

HTTP-заголовки

XMLHttpRequest умеет как указывать свои заголовки в запросе, так и читать присланные в ответ.

Для работы с HTTP-заголовками есть 3 метода:

XMLHttpRequest не разрешено изменять их ради безопасности пользователей и для обеспечения корректности HTTP-запроса.

Ещё одной особенностью XMLHttpRequest является то, что отменить setRequestHeader невозможно.

Если заголовок определён, то его нельзя снять. Повторные вызовы лишь добавляют информацию к заголовку, а не перезаписывают его.

Возвращает значение заголовка ответа name (кроме Set-Cookie и Set-Cookie2 ).

Заголовки возвращаются в виде единой строки, например:

Таким образом, если хочется получить объект с парами заголовок-значение, нам нужно задействовать немного JS.

Вот так (предполагается, что если два заголовка имеют одинаковое имя, то последний перезаписывает предыдущий):

POST, FormData

Чтобы сделать POST-запрос, мы можем использовать встроенный объект FormData.

Если нам больше нравится формат JSON, то используем JSON.stringify и отправляем данные как строку.

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

Событие progress срабатывает только на стадии загрузки ответа с сервера.

Если мы отправляем что-то большое, то нас гораздо больше интересует прогресс отправки данных на сервер. Но xhr.onprogress тут не поможет.

Примеры обработчиков для этих событий:

Пример из реальной жизни: загрузка файла на сервер с индикацией прогресса:

Запросы на другой источник

XMLHttpRequest может осуществлять запросы на другие сайты, используя ту же политику CORS, что и fetch.

Детали по заголовкам, которые при этом необходимы, смотрите в главе fetch.

Итого

Типичный код GET-запроса с использованием XMLHttpRequest :

Событий на самом деле больше, в современной спецификации они все перечислены в том порядке, в каком генерируются во время запроса:

Наиболее часто используют события завершения загрузки ( load ), ошибки загрузки ( error ), или мы можем использовать единый обработчик loadend для всего и смотреть в свойствах объекта запроса xhr детали произошедшего.

Источник