Объект XMLHttpRequest


Содержание

XMLHttpRequest

XMLHttpRequest is a built-in browser object that allows to make HTTP requests in JavaScript.

Despite of having the word “XML” in its name, it can operate on any data, not only in XML format. We can upload/download files, track progress and much more.

Right now, there’s another, more modern method fetch , that somewhat deprecates XMLHttpRequest .

In modern web-development XMLHttpRequest is used for three reasons:

  1. Historical reasons: we need to support existing scripts with XMLHttpRequest .
  2. We need to support old browsers, and don’t want polyfills (e.g. to keep scripts tiny).
  3. We need something that fetch can’t do yet, e.g. to track upload progress.

Does that sound familiar? If yes, then all right, go on with XMLHttpRequest . Otherwise, please head on to Fetch.

The basics

XMLHttpRequest has two modes of operation: synchronous and asynchronous.

Let’s see the asynchronous first, as it’s used in the majority of cases.

To do the request, we need 3 steps:

The constructor has no arguments.

Initialize it, usually right after new XMLHttpRequest :

This method specifies the main parameters of the request:

  • method – HTTP-method. Usually «GET» or «POST» .
  • URL – the URL to request, a string, can be URL object.
  • async – if explicitly set to false , then the request is synchronous, we’ll cover that a bit later.
  • user , password – login and password for basic HTTP auth (if required).

Please note that open call, contrary to its name, does not open the connection. It only configures the request, but the network activity only starts with the call of send .

This method opens the connection and sends the request to server. The optional body parameter contains the request body.

Some request methods like GET do not have a body. And some of them like POST use body to send the data to the server. We’ll see examples of that later.

Listen to xhr events for response.

These three events are the most widely used:

  • load – when the request is complete (even if HTTP status is like 400 or 500), and the response is fully downloaded.
  • error – when the request couldn’t be made, e.g. network down or invalid URL.
  • progress – triggers periodically while the response is being downloaded, reports how much has been downloaded.

Here’s a full example. The code below loads the URL at /article/xmlhttprequest/example/load from the server and prints the progress:

Once the server has responded, we can receive the result in the following xhr properties:

status HTTP status code (a number): 200 , 404 , 403 and so on, can be 0 in case of a non-HTTP failure. statusText HTTP status message (a string): usually OK for 200 , Not Found for 404 , Forbidden for 403 and so on. response (old scripts may use responseText ) The server response body.

We can also specify a timeout using the corresponding property:

If the request does not succeed within the given time, it gets canceled and timeout event triggers.

To add parameters to URL, like ?name=value , and ensure the proper encoding, we can use URL object:

Response Type

We can use xhr.responseType property to set the response format:

  • «» (default) – get as string,
  • «text» – get as string,
  • «arraybuffer» – get as ArrayBuffer (for binary data, see chapter ArrayBuffer, binary arrays),
  • «blob» – get as Blob (for binary data, see chapter Blob),
  • «document» – get as XML document (can use XPath and other XML methods),
  • «json» – get as JSON (parsed automatically).

For example, let’s get the response as JSON:

In the old scripts you may also find xhr.responseText and even xhr.responseXML properties.

They exist for historical reasons, to get either a string or XML document. Nowadays, we should set the format in xhr.responseType and get xhr.response as demonstrated above.

Ready states

XMLHttpRequest changes between states as it progresses. The current state is accessible as xhr.readyState .

An XMLHttpRequest object travels them in the order 0 → 1 → 2 → 3 → … → 3 → 4 . State 3 repeats every time a data packet is received over the network.

We can track them using readystatechange event:

You can find readystatechange listeners in really old code, it’s there for historical reasons, as there was a time when there were no load and other events. Nowadays, load/error/progress handlers deprecate it.

Aborting request

We can terminate the request at any time. The call to xhr.abort() does that:

That triggers abort event, and xhr.status becomes 0 .

Synchronous requests

If in the open method the third parameter async is set to false , the request is made synchronously.

In other words, JavaScript execution pauses at send() and resumes when the response is received. Somewhat like alert or prompt commands.

Here’s the rewritten example, the 3rd parameter of open is false :

It might look good, but synchronous calls are used rarely, because they block in-page JavaScript till the loading is complete. In some browsers it becomes impossible to scroll. If a synchronous call takes too much time, the browser may suggest to close the “hanging” webpage.

Many advanced capabilities of XMLHttpRequest , like requesting from another domain or specifying a timeout, are unavailable for synchronous requests. Also, as you can see, no progress indication.

Because of all that, synchronous requests are used very sparingly, almost never. We won’t talk about them any more.

HTTP-headers

XMLHttpRequest allows both to send custom headers and read headers from the response.

There are 3 methods for HTTP-headers:

Sets the request header with the given name and value .

Several headers are managed exclusively by the browser, e.g. Referer and Host . The full list is in the specification.

XMLHttpRequest is not allowed to change them, for the sake of user safety and correctness of the request.

Another peculiarity of XMLHttpRequest is that one can’t undo setRequestHeader .

Once the header is set, it’s set. Additional calls add information to the header, don’t overwrite it.

Gets the response header with the given name (except Set-Cookie and Set-Cookie2 ).

Returns all response headers, except Set-Cookie and Set-Cookie2 .

Headers are returned as a single line, e.g.:

The line break between headers is always «\r\n» (doesn’t depend on OS), so we can easily split it into individual headers. The separator between the name and the value is always a colon followed by a space «: » . That’s fixed in the specification.

So, if we want to get an object with name/value pairs, we need to throw in a bit JS.

Like this (assuming that if two headers have the same name, then the latter one overwrites the former one):

POST, FormData

To make a POST request, we can use the built-in FormData object.

The form is sent with multipart/form-data encoding.

Or, if we like JSON more, then JSON.stringify and send as a string.

Just don’t forget to set the header Content-Type: application/json , many server-side frameworks automatically decode JSON with it:

The .send(body) method is pretty omnivore. It can send almost any body , including Blob and BufferSource objects.

Upload progress

The progress event triggers only on the downloading stage.

That is: if we POST something, XMLHttpRequest first uploads our data (the request body), then downloads the response.

If we’re uploading something big, then we’re surely more interested in tracking the upload progress. But xhr.onprogress doesn’t help here.

There’s another object, without methods, exclusively to track upload events: xhr.upload .

It generates events, similar to xhr , but xhr.upload triggers them solely on uploading:

  • loadstart – upload started.
  • progress – triggers periodically during the upload.
  • abort – upload aborted.
  • error – non-HTTP error.
  • load – upload finished successfully.
  • timeout – upload timed out (if timeout property is set).
  • loadend – upload finished with either success or error.

Example of handlers:

Here’s a real-life example: file upload with progress indication:

Cross-origin requests

XMLHttpRequest can make cross-origin requests, using the same CORS policy as fetch.

Just like fetch , it doesn’t send cookies and HTTP-authorization to another origin by default. To enable them, set xhr.withCredentials to true :

See the chapter Fetch: Cross-Origin Requests for details about cross-origin headers.

Summary

Typical code of the GET-request with XMLHttpRequest :

There are actually more events, the modern specification lists them (in the lifecycle order):

  • loadstart – the request has started.
  • progress – a data packet of the response has arrived, the whole response body at the moment is in responseText .
  • abort – the request was canceled by the call xhr.abort() .
  • error – connection error has occurred, e.g. wrong domain name. Doesn’t happen for HTTP-errors like 404.
  • load – the request has finished successfully.
  • timeout – the request was canceled due to timeout (only happens if it was set).
  • loadend – triggers after load , error , timeout or abort .

The error , abort , timeout , and load events are mutually exclusive. Only one of them may happen.

The most used events are load completion ( load ), load failure ( error ), or we can use a single loadend handler and check the properties of the request object xhr to see what happened.

We’ve already seen another event: readystatechange . Historically, it appeared long ago, before the specification settled. Nowadays, there’s no need to use it, we can replace it with newer events, but it can often be found in older scripts.

Методы и свойства объекта XMLHttpRequest

Указанные ниже методы и свойства объекта XMLHttpRequest актуальны для Internet Explorer 5+, Mozilla, Netscape 7 и Safari 1.2.

Методы объекта XMLHttpRequest

Хочу сразу обратить внимание на то, что названия методов написаны в том же стиле, что и JavaScript. При написании будьте внимательны.

open(тип_запроса, URL, асинхронный, имя_пользователя, пароль) — запрос к серверу с указанием:

типа запроса (обязательный параметр) — используется GET или POST, но доступны также TRACE/DELETE/PUT;
url (обязательный параметр) — адрес запроса. Можно использовать не только протокол HTTP/HTTPS, но и, например, FTP и FILE://.;
асинхронный (булево значение — соответственно true или false) — true для использования асинхронных запросов;
userName, password — данные HTTP-аутентификации;

Внимание! Данные по userName, password небезопасно хранить в скрипте, в особенности на клиентской части, так как данные аутентификации будут доступны сторонним пользователям.

Варианты вызова:
open( method, URL )
open( method, URL, async )
open( method, URL, async, userName )
open( method, URL, async, userName, password )
send(содержимое) — отправка запроса HTTP на сервер и получение ответа. В качестве аргумента — тело запроса. Поскольку для GET-запроса тела нет, надо писать send(null), для POST-запросов тело содержит параметры запроса.

abort() — текущий запрос отменяем. У браузера есть лимит — два одновременных подключения к домену-порту. Третье будет открыто только после завершения сеанса одно из предыдущих двух (по таймауту).

getAllResponseHeaders() — запрашиваем все заголовки ответа от сервера. Возвращает строку со всеми HTTP-заголовками ответа сервера.

getResponseHeader(имя_заголовка) — запрос на определённый заголовок.

setRequestHeader(имя_заголовка,значение) — устанавливаем заголовок и значение запроса. Если заголовок уже есть, то он заменяется. Пример:

Свойства объекта XMLHttpRequest

onreadystatechange — одно из основных свойств объекта XMLHttpRequest. Ссылается на функцию-обработчик состояний запроса, которая вызывается каждый раз при смене статуса объекта. В некоторых браузерах функция имеет аргумент — событие. Не используйте его, он совершенно лишний.

readyState — номер состояния запроса. От 0 до 4:

— не инициализирован (перед началом работы объекта),
1 — загрузка (однажды, когда идет инициализация объекта),
2 — загружен (однажды, когда получен ответ от сервера),
3 — доступен (пока объект соединен с сервером),
4 — завершен (после того, как объект выполнил все задачи).

responseText — представление ответа сервера в виде обычного текста (строки). Полный текст есть только при readyState=4, ряд браузеров дают доступ к полученной части ответа сервера при readyState=3.

responseXML — объект документа, совместимый с DOM, полученного от сервера.

status — состояние ответа от сервера. Например, для HTTP-запросов — статусный код ответа сервера: 200 — OK, 404 — Not Found, и так далее. Запросы по протоколам FTP, FILE:// не возвращают статуса, поэтому нормальным для них является status=0.

statusText — текстовое представление состояния ответа от сервера. Например, Not Found или OK

Пример работы с обектом XMLHttpRequest

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

1. Создание объекта XMLHttpRequest.
2. Установка обработчика события onreadystatechange.
3. Открытие соединения с сервером методом open.
4. Отправка запроса методом send.

Илон Маск рекомендует:  Что такое код postgresql

# Получаем данные в Javascript с помощью XMLHttpRequest

Я очень часто вижу, что люди используют $http в Angular или jQuery или другие библиотеки и даже не знают, что выполняется внутри и как в чистом javascript работать с http запросами.


Поэтому в этом видео мы с вами разберем, как получать в javascript данные от сервера. То есть идея в том, чтобы получить данные от сервера асинхронно с помощью HTTP-запроса и изменить страницу у пользователя без перезагрузки.

Именно на этой технологии работают все современные Single Page приложения.

Для этого используется XMLHttpRequest. Из его названия можно подумать, что он может работать только с xml, но это не так. Он может работать с любыми данными.

Для того, чтобы обращатся на сервер за данными, давайте создадим API с тестовыми данными с помощью сервиса mocky.io.

Вот у меня есть JSON данных

Вставляем его в body запроса и в advance mode выбираем

Для того, чтобы любой домен мог обращатся к этому API.

Нажимаем Generate response и получаем ссылку на наш API.

Теперь давайте писать javascript.

Для начала нам нужно создать новый екземпляр XMLHttpRequest.

Теперь сконфигурировать какой url мы хотим получить

Для этого на xhr мы вызываем метод open передавая туда тип запроса, url, и асинхронный ли запрос. Конечно мы хотим асинхронный. Никогда не используйте синхронные запросы, так как это блокирует продолжение скрипта. В 99 случаях из 100 этого делать не нужно.

Не стоит думать, что xhr.open выполняет запрос. Хотя из названия похоже. Он его только конфигурирует. Для отправки запроса используется xhr.send

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

Внутри метода мы должны проверять readyState на 4, чтобы понять, когда запрос закончится. Пока readyState ниже четверки, то запрос не закончен. Там происходит начало запроса, получение заголовкой, загрузка body и только потом запрос завершен.

Теперь давайте добавим проверку на error и вывод результатов в консоль

Как мы видим, результат выводится в виде строки, поэтому нам нужно еще и парсить его в JSON

Какие же основные минусы XMLHttpRequest и почему все используют ajax в jQuery для получения данных или отдельные библиотеки для этого например superagent или axios.

Первым минус — это конечно количество кода. В любой из вспомогательных библиотек метод для работы с http запросами намного лаконичнее.

Второй — это отсутствие промисов при работе с XMLHttpRequest. Мы не можем написать .then, передать туда коллбек и выполнить что мы хотим когда запрос завершится. Поэтому с этим кодом неудобно работать.

Третий — это кроссбраузерность. Даже в IE 10-11 XMLHttpRequest работает не так, как в других браузерах.

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

Если у вас возникли какие-то вопросы или комментарии, пишите их прямо под этим видео.

АйТи бубен

Инструменты пользователя

Инструменты сайта

Содержание

XMLHttpRequest

XMLHttpRequest (XHR) — API , предоставляемый веб-клиентом, для обмена информацией между клиентом и сервером посредством протоколов Методы и структура протокола HTTP и HTTPS. Хотя в названии присутствует аббревиатура XML, технология не накладывает ограничений на формат передаваемых данных. Информация может передаваться в любом текстовом формате, например, в Введение в XML, HTML или JSON. Основная задача объекта HttpRequest – отправлять GET или POST запросы.

Возможности XMLHttpRequest раскрываются полностью только тогда, когда вам необходимо сделать запрос GET или POST и обновить при этом только часть страницы. Такая необходимость возникает постоянно, и методы, используемые для достижения цели, далеко не самые оптимальные.

Традиционные пути решения проблемы обновления страницы — полная её перезагрузка. Варианты следующие:

Недостаток всех перечисленных методов состоит в том, что обновление данных влечёт за собой полную перезагрузку страницы. И пользователь при этом обычно теряет текущую позицию просмотра на больших страницах. Кроме того, после перезагрузки теряются изменения, сделанные в других частях страницы (в других формах).

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

Свойства и методы XHR

Свойства:

Методы:

Асинхронный XMLHttpRequest

Во время обычного submit’а формы браузер сам кодирует значения полей и составляет тело GET/POST-запроса для посылки на сервер. При работе через XmlHttpRequest, это нужно делать самим, в JavaScript -коде. У JavaScript есть функции encodeURIComponent и decodeURIComponent для кодирования и раскодирования.

В отличие от синхронного запроса, функция send() не останавливает выполнение скрипта, а просто отправляет запрос. Функция-обработчик onreadystatechange выполняет два действия:

Объект XMLHttpRequest

Represents an XML request using HTTP.

Members

The XMLHttpRequest object has these types of members:

Events

The XMLHttpRequest object has these events.

Sets or retrieves the event handler for asynchronous requests.

Raised when there is an error that prevents the completion of the request.

Methods

The XMLHttpRequest object has these methods.

Event Description
onreadystatechange

Cancels the current HTTP request.

Registers an event handler for the specified event type.

Sends an event to the current element.

Returns the complete list of response headers.

Returns the specified response header.

Requests a synchronous or asynchronous file download from a specific URL.

Sets the Content-Type header for the response to the MIME provided.

Removes an event handler that the addEventListener method registered.

Sends an HTTP request to the server and receives a response.

Adds custom HTTP headers to the request.

Properties

The XMLHttpRequest object has these properties.

Method Description
abort

Returns a reference to the constructor of an object.

Retrieves the current state of the request operation.

Returns the response received from the server.

Retrieves the response body as an array of unsigned bytes.

Retrieves the response body as a string.

Describes the data type of the response associated with the request.

Retrieves the response body as an XML DOM object.

Retrieves the HTTP status code of the request.

Retrieves the friendly HTTP status of the request.

Gets or sets the time-out value.

Indicates whether user credentials should be included with the request.

Standards information

Remarks

The XMLHttpRequest property is available on the window object.

Starting with Internet Explorer 10 in Windows 8, the responseXML property returns a native XML document. This can affect webpages written for earlier versions of Windows Internet Explorer, but makes it more compatible with other browsers.

For previous version of Internet Explorer, the additional step of passing responseText through DOMParser.

With Internet Explorer 10 in Windows 8, the use of responseXML simplifies getting a native XML document.

With the XMLHttpRequest object, clients can retrieve and submit XML data directly to a web server without reloading the document. To convert XML data into renderable HTML content, use the client-side XML DOM or Extensible Stylesheet Language Transformations (XSLT) to compose HTML elements for presentation.

The native scripting object also supports the use of expandos (custom properties), and properly recognizes the ‘this’ notation of JavaScript.

The XMLHttpRequest property is available on the window object in Windows Internet Explorer 7.

To support versions of Windows Internet Explorer prior to Internet Explorer 7, use the following function to get the XMLHttpRequest object.

Examples

The following script demonstrates how to create and use the XMLHttpRequest object. For best client-side performance, the XMLHTTP request is asynchronous and uses an onreadystatechange event handler to process the data returned by the call. The script uses the getXMLHttpRequest() function defined above to create the request object.

XML HTTPRequest: описание, применение, частые проблемы

Здесь Вы найдете полное описание объекта XMLHTTPRequest, способы использования, форматы данных и разбор частых проблем.

Объект XMLHttpRequest

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

Несмотря на слово XML в названии, XMLHttpRequest может работать с данными в любом текстовом формате, и даже c бинарными данными. Использовать его очень просто.

Кроссбраузерное создание объекта запроса

В зависимости от браузера, код для создания объекта может быть разный.
Кроссбраузерная функция создания XMLHttpRequest:

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

Использование XMLHTTPRequest

Различают два использования XmlHttpRequest. Первое — самое простое, синхронное.

Синхронный XMLHttpRequest

В этом примере через XMLHTTPRequest с сервера запрашивается страница http://example.org/, и текст ответа сервера показывается через alert().

Здесь сначала создается запрос, задается открытие (open) синхронного соединение с адресом /xhr/test.html и запрос отсылается с null,
т.е без данных.

При синхронном запросе браузер «подвисает» и ждет на строчке 3, пока сервер не ответит на запрос. Когда ответ получен — выполняется строка 4, код ответа сравнивается с 200 (ОК), и при помощи alert
печатается текст ответа сервера. Все максимально просто.

Свойство responseText получит такой же текст страницы, как браузер, если бы Вы в перешли на /xhr/test.html. Для сервера
GET-запрос через XmlHttpRequest ничем не отличается от обычного перехода на страницу.

Асинхронный XMLHttpRequest

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

Асинхронность включается третьим параметром функции open. В отличие от синхронного запроса, функция send() не останавливает
выполнение скрипта, а просто отправляет запрос.

Запрос xmlhttp регулярно отчитывается о своем состоянии через вызов функции xmlhttp.onreadystatechange. Состояние под номером 4 означает конец выполнения, поэтому функция-обработчик
при каждом вызове проверяет — не настало ли это состояние.

Вообще, список состояний readyState такой:

Состояния 0-2 вообще не используются.

Вызов функции с состоянием Interactive в теории должен происходить каждый раз при получении очередной порции данных от сервера.
Это могло бы быть удобным для обработки ответа по частям, но Internet Explorer не дает доступа к уже полученной части ответа.

Firefox дает такой доступ, но для обработки запроса по частям состояние Interactive все равно неудобно из-за сложностей обнаружения ошибок соединения.
Поэтому Interactive тоже не используется.

На практике используется только последнее, Complete.

Если хотите углубиться в тонкости багов браузеров c readyState, отличными от 4, то многие из них рассмотрены в статье на
Quirksmode (англ.).

Не используйте синхронные запросы

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

  1. Делаем асинхронный запрос
  2. Рисуем анимированную картинку или просто запись типа «Loading…»
  3. В onreadystatechange при достижении состояния 4 убираем Loading и, в зависимости от status вызываем обработку ответа или ошибки.

Кроме того, иногда полезно ставить ограничение на время запроса. Например, хочется генерировать ошибку, если запрос висит более 10 секунд.

Для этого сразу после send() через setTimeout ставится вызов обработчика ошибки, который очищается при получении ответа и обрывает запрос с генерацией ошибки,
если истекли 10 секунд.


Таймаут на синхронный запрос ставить нельзя, браузер может висеть долго-долго.. А вот на асинхронный — пожалуйста.

Этот пример демонстрирует такой таймаут.

Методы объекта XMLHttpRequest

  • open( method, URL )
  • open( method, URL, async )
  • open( method, URL, async, userName )
  • open( method, URL, async, userName, password )

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

URL — адрес запроса. Можно использовать не только HTTP/HTTPS, но и другие протоколы, например FTP и FILE://. При этом есть ограничения безопасности, так называемая
«same origin policy»: запрос со страницы можно отправлять только на тот домен и порт, с которого она пришла.

Ниже это ограничение и способы обхода будут рассмотрены подробнее.

async = true задает асинхронные запросы, эта тема была поднята выше.

userName, password — данные для HTTP-авторизации.

Отсылает запрос. Аргумент — тело запроса. Например, GET-запроса тела нет, поэтому используется send(null) , а для POST-запросов тело содержит параметры запроса.

abort()

Вызов этого метода xmlhttp.abort() обрывает текущий запрос.

Здесь есть одно НО для браузера Internet Explorer. Успешный вызов abort() на самом деле может не обрывать соединение,
а оставлять его в подвешенном состоянии на некоторый таймаут (20-30 секунд). Отловить такие повисшие соединения можно через прокси для отладки, например, Fiddler.

У браузера есть лимит: не более 2 одновременных соединений с одним доменом-портом. Т.е, если два соединения уже висят (и отвиснут по таймауту), то третье открыто не
будет, пока одно из них не умрет. Надеюсь, Вы с такой проблемой не столкнетесь. Ее можно обойти использованием кросс-доменных XmlHttpRequest.

setRequestHeader(name, value)

Устанавливает заголовок name запроса со значением value. Если заголовок с таким name уже есть — он заменяется.

getAllResponseHeaders()

Возвращает строку со всеми HTTP-заголовками ответа сервера.

getResponseHeader(headerName)

Возвращает значение заголовка ответа сервера с именем headerName.

Свойства объекта XMLHttpRequest

onreadystatechange

Ссылается на функцию-обработчик состояний запроса. В некоторых браузерах функция имеет аргумент — событие. Не используйте его, он совершенно лишний.

readyState

Номер состояния запроса от 0 до 4. Используйте только 4 («completed»).

responseText

Текст ответа сервера. Полный текст есть только при readyState=4, ряд браузеров дают доступ к полученной части ответа сервера при readyState=3.

responseXML

Ответ сервера в виде XML, при readyState=4.

Это свойство хранит объект типа XML document, с которым можно обращаться так же, как с обычным document. Например,

Чтобы браузер распарсил ответ сервера в свойство responseXML, в ответе должен быть заголовок Content-Type: text/xml.

Иначе свойство responseXML будет равно null.

status

Для HTTP-запросов — статусный код ответа сервера: 200 — OK, 404 — Not Found, и т.п. Браузер Internet Explorer может также присвоить status код ошибки WinInet,
например 12029 для ошибки «cannot connect».

Запросы по протоколам FTP, FILE:// не возвращают статуса, поэтому нормальным для них является status=0.

statusText

Текстовая расшифровка status, например «Not Found» или «OK».

GET и POST-запросы. Кодировка.

Во время обычного submit’а формы браузер сам кодирует значения полей и составляет тело GET/POST-запроса для посылки на сервер. При работе через XmlHttpRequest, это нужно делать самим, в javascript-коде. Большинство проблем и вопросов здесь связано с непониманием, где и какое кодирование нужно осуществлять.

Вначале рассмотрим общее кодирование запросов, ниже — правильную работу с русским языком для windows-1251.

Существуют два вида кодирования HTTP-запроса. Основной — urlencoded, он же — стандартное кодирование URL. Пробел представляется как %20, русские буквы и большинство спецсимволов кодируются, английские буквы и дефис оставляются как есть.

Способ, которым следует кодировать данные формы при submit’е, задается в ее HTML-таге:

XMLHttpRequest

XMLHttpRequest (XMLHTTP, XHR) — API, доступное в скриптовых языках браузеров, таких как JavaScript. Использует запросы HTTP или HTTPS напрямую к веб-серверу и загружает данные ответа сервера напрямую в вызывающий скрипт. [1] Информация может передаваться в любом текстовом формате, например, в XML, HTML или JSON. Позволяет осуществлять HTTP-запросы к серверу без перезагрузки страницы.

XMLHTTP является важной составляющей технологии AJAX (Asynchronous JavaScript And XML), используется многими сайтами для создания динамичных, быстро реагирующих на запросы пользователя приложений. Например XMLHTTP используется такими сайтами, как Bing Maps, Gmail, Google Maps, Google Suggest, Facebook.

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

Хотя в названии присутствует аббревиатура XML, технология не накладывает ограничений на формат передаваемых данных. Данные можно пересылать как в виде XML, так и в JSON, HTML или просто неструктурированным текстом. Разработчик может самостоятельно создать формат для передачи данных. Однако нужно учитывать, что при пересылке используется текстовый протокол HTTP и потому при использовании метода GET данные должны передаваться в виде текста (то есть бинарные данные следует кодировать, к примеру в base64). При использовании метода POST в кодировании нет необходимости.

История Править

Впервые был разработан компанией Microsoft, появившись в компоненте Outlook Web Access программного продукта Microsoft Exchange Server 2000. Он был назван IXMLHTTPRequest. Позднее, наработки были включены в состав MSXML 2.0 в виде объекта ActiveX, доступного через JScript, VBScript или другие скриптовые языки, поддерживающиеся браузером. MSXML 2.0 был включён в состав браузера Internet Explorer 5.

Программисты проекта Mozilla затем разработали совместимую версию, называющуюся nsIXMLHttpRequest в Mozilla 0.6. Доступ к компоненту был реализован через JavaScript-объект, названный XMLHttpRequest. Однако, полной функциональности удалось добиться только в Mozilla 1.0. В дальнейшем поддержка XMLHttpRequest появилась в браузерах Safari 1.2, Opera 8.01 и в других.

Последняя официальная спецификация — версия 1.0 (XMLHttpRequest от 19 декабря 2012 года), которая имеет статус текущего стандарта (Living Standard) и версия 2.0 (XMLHttpRequest Level 2 от 17 января 2012 года), имеющая статус рабочего варианта. Во второй версии вводятся обработчики событий прогресса, поддержка кросс-доменных запросов и работа с бинарными данными. [2]

Методы класса XMLHttpRequest Править

Property Access type Description
Метод Описание
abort() Отменяет текущий запрос, удаляет все заголовки, ставит текст ответа сервера в null.
getAllResponseHeaders() Возвращает полный список HTTP-заголовков в виде строки. Заголовки разделяются знаками переноса (CR+LF).
Если флаг ошибки равен true, возвращает пустую строку.
Если статус 0 или 1, вызывает ошибку INVALID_STATE_ERR.
getResponseHeader(headerName) Возвращает значение указанного заголовка.
Если флаг ошибки равен true, возвращает null.
Если заголовок не найден, возвращает null.
Если статус 0 или 1, вызывает ошибку INVALID_STATE_ERR.
open(method, URL, async, userName, password) Определяет метод, URL и другие опциональные параметры запроса;
параметр async определяет, происходит ли работа в асинхронном режиме.
Последние два параметра необязательны.
send(content) Отправляет запрос на сервер.
setRequestHeader(label, value) Добавляет HTTP-заголовок к запросу.
overrideMimeType(mimeType) Позволяет указать mime-type документа, если сервер его не передал или передал неправильно.
Внимание: метод отсутствует в Internet Explorer!

Свойства класса XMLHttpRequest Править

Свойство Тип Описание
onreadystatechange EventListener Обработчик события, которое происходит при каждой смене состояния объекта. Имя должно быть записано в нижнем регистре.
readyState unsigned short Текущее состояние объекта (0 — не инициализирован, 1 — открыт, 2 — отправка данных, 3 — получение данных и 4 — данные загружены)
responseText DOMString Текст ответа на запрос.
Если состояние не 3 или 4, возвращает пустую строку.
responseXML Document Текст ответа на запрос в виде XML, который затем может быть обработан посредством DOM.
Если состояние не 4, возвращает null.
status unsigned short HTTP-статус в виде числа (404 — «Not Found», 200 — «OK» и т. д.)
statusText DOMString Статус в виде строки («Not Found», «OK» и т. д.).
Если статус не распознан, браузер пользователя должен вызвать ошибку INVALID_STATE_ERR.

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

Название Код Описание
SECURITY_ERR 18 Вызывается при попытке совершить запрос, запрещённый настройками безопасности в браузере пользователя.
NETWORK_ERR 101 Вызывается при ошибке сети (во время синхронного запроса).
ABORT_ERR 102 Вызывается при прерывании пользователем запроса (во время синхронного запроса).

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

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

  1. Создание экземпляра объекта XMLHttpRequest
  2. Открытие соединения
  3. Установка обработчика события (нужно делать после открытия и до отправки в IE)
  4. Отправка запроса.

Создание экземпляра объекта XMLHttpRequest. На этой стадии необходима отдельная реализация для разных браузеров. Конструкция создания объекта отличается: в IE 5 — IE 6 она реализована через ActiveXObject, а в остальных браузерах (IE 7 и выше, Mozilla, Opera, Chrome, Netscape и Safari) — как встроенный объект типа XMLHttpRequest.

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

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

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

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

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

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

  • — метод запроса. Допускаются: DELETE, GET, HEAD, OPTIONS, POST, PUT.
  • — адрес запроса.
  • — флаг, определяющий, использовать ли асинхронный запрос. По умолчанию, установлен в true.
  • ,

— логин и пароль, соответственно. Указываются при необходимости.

После определения всех параметров запроса его остается только отправить. Делается это методом send(). При отправке GET-запроса для версии без ActiveX необходимо указать параметр null, в остальных случаях можно не указывать никаких параметров. Не будет ошибкой, если для GET всегда будет указан параметр null:

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

Новые возможности 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 элементов на странице. Например:

HTML форма может содержать файлы ( ) — FormData может с ними работать. Просто добавьте файл(ы) и браузер выполнит multipart/form-data запрос, когда будет вызван метод send() . Это очень удобно!

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

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

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

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

Cross Origin Resource Sharing (CORS)

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

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

Предположим, что наше приложение находится на example.com и нам нужно получить данные с www.example2.com . Обычно если вы пытаетесь сделать такой AJAX запрос, то запрос не будет выполнен и браузер выбросит исключение «origin mismatch». С CORS www.example2.com может решить разрешить нашему приложению с example.com выполнить запрос или нет, добавив всего один заголовок:

Заголовок 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

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

Все современные браузеры (IE7+, Firefox, Chrome, Safari и Opera) имеют встроенный объект XMLHttpRequest.

Синтаксис для создания объекта XMLHttpRequest:

В IE8 и IE9 поддержка XMLHttpRequest ограничена, но имеют свой объект XDomainRequest , который реализовывал часть возможностей современного стандарта.

Создаём XMLHttpRequest и проверяем, поддерживает ли он событие onload . Если нет, то это старый XMLHttpRequest, значит это IE8,9, и используем XDomainRequest .

Для IE10+ обычный XMLHttpRequest уже является полноценным.

События

Вызывается при изменении значения свойства readyState. Наиболее важен для обработки ситуации завершения запроса.

onreadystatechange как свойство XMLHttpRequest поддерживается во всех браузерах.

обработчик — функция-обработчик события (можно указать анонимную функцию или ссылку на готовую).

Вызывается при прерывании запроса.

Вызывается в случае завершения запроса по ошибке. Обратите внимание, что HTTP-коды состояния, такие как 404, не считаются ошибкой, поскольку сам ответ получен успешно. Однако это событие может породить отрицательный ответ сервера DNS или бесконечный цикл переа дресаций.

Вызывается при успешном выполнении запроса. В обработчик передается объект XMLHttpRequestProgressEvent

Вызывается в случае успешного или неудачного завершения запроса, после событий «load», «abort», «error» и «timeout».

Вызывается с началом выполнения запроса.

Вызывается периодически (примерно раз в 50 миллисекунд) в ходе загрузки тела ответа.

Вызывается, если истекло время ожидания, определяемое свойством timeout, а ответ так и не был принят.

Свойства

Состояние HTTP-запроса. В момент создания объекта XMLHttpRequest это свойство приобретает значение 0, а к моменту получения полного HTTP-ответа это значение возрастает до 4.

Значение свойства readyState может уменьшаться, только если в процессе выполнения запроса был вызван метод abort() или open() .

Теоретически при каждом изменении значения этого свойства должен вызываться обработчик события onreadystatechange . Однако на практике событие гарантированно возникает, только когда свойство readyState получает значение 4. (События «progress», введенные спецификацией XHR2, обеспечивают более надежный способ слежения за ходом выполнения запроса.)

Запрос проходит их в порядке 0 → 1 → 2 → 3 → … → 3 → 4, состояние 3 повторяется при каждом получении очередного пакета данных по сети.

В спецификации XHR2 это свойство хранит ответ сервера. Тип свойства зависит от значения свойства responseType.

Если responseType содержит пустую строку или строку «text», данное свойство содержит тело ответа в виде строки.

Если responseType содержит строку «document», значением данного свойства будет объект Document , полученный в результате разбора XML- или HTML-документа в теле ответа.

Если responseType содержит строку «arraybuffer», значением данного свойства будет объект ArrayBuffer , представляющий двоичные данные в теле ответа.

Если responseType содержит строку «blob», значением данного свойства будет объект Blob , представляющий двоичные данные в теле ответа.

Если responseType содержит строку «json», значением данного свойства будет объект JSON, полученный путем парсинга JSON строки, полученной с сервера.

Если значение свойства readyState меньше 3, данное свойство будет содержать пустую строку.

Если значение свойства readyState равно 3, данное свойство возвращает часть ответа, которая была принята к текущему моменту.

Если значение свойства readyState равно 4, это свойство содержит полное тело ответа.

Если в ответе имеется заголовок, определяющий кодировку символов в теле ответа, используется эта кодировка, в противном случае предполагается кодировка UTF-8.

В спецификации XHR2 это свойство определяет тип ответа и тип свойства response . Прежде чем отправить запрос, необходимо для свойства xhr.responseType указать значение «text», «document», «arraybuffer», «blob» или «json». Значением по умолчанию является пустая строка, которая также является синонимом значения «text». Если установить это свойство вручную, последующие попытки обратиться к свойствам responseText и responseXML будут возбуждать исключения и для получения ответа сервера необходимо будет использовать свойство response , предусмотренное спецификацией XHR2.

Ответ на запрос, который интерпретируется как XML- или HTML-документ и возвращается в виде объекта Document. Это свойство будет иметь значение null, если тело ответа еще не получено или оно не является допустимым XML или HTML-документом.

HTTP-код состояния, полученный от сервера, такой как 200 – в случае успеха, 404 – в случае ошибки отсутствия документа или 0 – если сервер еще не прислал код состояния.

Это свойство содержит текст, соответствующий HTTP-коду состояния в ответе. То есть, когда свойство status имеет значение 200, это свойство содержит строку «OK», а когда 404 – строку «Not Found». Это свойство содержит пустую строку, если сервер еще не прислал код состояния.

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

Это свойство можно установить только после вызова метода open() и перед вызовом метода send() .

Свойство, введенное спецификацией XHR2, ссылающееся на объект XMLHttpRequestUpload, который определяет набор свойств регистрации обработчиков событий для слежения за процессом выгрузки тела HTTP-запроса.

Свойство, введенное спецификацией XHR2, определяющее необходимость аутентификации при выполнении междоменного CORS-запроса и необходимость обработки заголовков cookie в CORS-ответах. По умолчанию имеет значение false .

Как указано в спецификации www.w3.org/TR/cors/#omit-credentials-flag, withCredentials позволяет нам использовать в запросе к серверу user-credentials, т.е. cookie, аутентификационные данные и клиентские SSL-сертификаты.

Указание withCredentials=true необходимо не только для отправки «user-credentials» в запросе к серверу, но и для использования их из ответов от сервера.

Методы

Возвращает объект XMLHttpRequest в исходное состояние, соответствующее значению 0 в свойстве readyState , и отменяет любые запланированные сетевые взаимодействия. Этот метод может потребоваться, например, если запрос выполняется слишком долго и надобность в получении ответа уже отпала.

Возвращает все заголовки ответа, кроме Set-Cookie и Set-Cookie2.

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

Между заголовками стоит перевод строки в два символа «\r\n» (не зависит от ОС), значение заголовка отделено двоеточием с пробелом «: «. Этот формат задан стандартом.

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

Возвращает значение указанного заголовка header в HTTP-ответе или null, если заголовки вообще не были получены или если ответ не содержит требуемого заголовка header . Заголовки cookie и CORS отфильтровываются, и их нет смысла запрашивать. Если было принято несколько заголовков с указанным именем, значения этих заголовков объединяются в одну строку через запятую и пробел. Например:

Этот метод инициализирует объект XMLHttpRequest и сохраняет свои аргументы для последующего использования методом send() .

Аргумент method определяет HTTP-метод, используемый для отправки запроса. Среди наиболее устоявшихся методов можно назвать GET, POST и HEAD. Реализации могут также поддерживать методы CONNECT, DELETE, OPTIONS, PUT,TRACE и TRACK.

Аргумент url определяет URL-адрес, который является предметом запроса. Разрешение относительных URL-адресов производится обычным образом с использованием URL-адреса документа со сценарием. Политика общего происхождения требует, чтобы данный URL-адрес содержал те же имя хоста и номер порта, что и документ со сценарием, выполняющим запрос. Объект XHR2 позволяет выполнять междоменные запросы к серверам, поддерживающим заголовки CORS. В качестве URL можно использовать не только http/https, но и другие протоколы, например ftp:// и file://.

Если аргумент async указан и имеет значение false , запрос будет выполняться в синхронном режиме, и последующий вызов send() заблокирует работу сценария, пока ответ не будет получен полностью. Синхронные запросы рекомендуется использовать только в фоновых потоках выполнения.

Необязательные аргументы user и pass определяют имя пользователя и пароль для HTTP-запроса.

Метод open() не выполняет запрос. Он его только конфигурирует. Для отправки запроса используется метод send() .

Этот метод позволяет указать, что ответ сервера должен интерпретироваться в соответствии с указанным MIME-типом mime (и параметром charset , если он указан в определении типа mim e), без учета значения заголовка Content-Type в ответе.

Другими словами, метод позволяет переопределить тип получаемых с сервера данных. И даже существует специальная кодировка, которая специально была задумана для приема бинарных данных — x-user-defined (XMLHttpRequest автоматически преобразует все принятые данные в юникод). Поэтому простое добавление следующей строчки должно сделать большую часть работы.

Именно этод метод открывает соединение и отправляет запрос на сервер. Если перед этим не вызывался метод open() или, обобщенно, если значение свойства readyState не равно 1, метод send() возбуждает исключение. В противном случае он начинает выполнение HTTP-запроса,

Если в предшествующем вызове метода open() аргумент async имел значение false , данный метод блокируется и не возвращает управление, пока значение свойства readyState не станет равно 4 и ответ сервера не будет получен полностью. В противном случае метод send() немедленно возвращает управление, а ответ сервера обрабатывается асинхронно, с помощью обработчиков событий.

Аргумент body определяет «тело» запроса. Не у всякого запроса есть «тело», например у GET-запросов «тела» нет, а у POST – основные данные как раз передаются через body.

Определяет HTTP-заголовок с именем name и значением value, который должен быть включен в запрос, передаваемый последующим вызовом метода send() . Этот метод может вызываться, только когда свойство readyState имеет значение 1, т. е. после вызова метода open(), но перед вызовом метода send().

Если заголовок с именем «name» уже был определен, новым значением заголовка станет прежнее значение заголовка плюс запятая с пробелом и новое значение «value», переданное методу.

Если методу open() была передана информация об авторизации, объект XMLHttpRequest автоматически добавит заголовок Authorization . Однако этот заголовок может быть также добавлен методом setRequestHeader().

Объект XMLHttpRequest автоматически устанавливает заголовки «Content-Length», «Date», «Referer» и «User-Agent» и не позволяет изменять их значения.

Лекции по веб-программированию

Технология Ajax

AJAX (от англ. Asynchronous Javascript and XML — «асинхронный JavaScript и XML») — подход к построению интерактивных пользовательских интерфейсов веб-приложений, заключающийся в «фоновом» обмене данными браузера с веб-сервером. В результате, при обновлении данных веб-страница не перезагружается полностью, и веб-приложения становятся быстрее и удобнее.

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

Обычные (классические) веб страницы, (которые не используют AJAX) должны быть перезагружены полностью при необходимости обновить содержимое.

История

Впервые термин AJAX был публично использован 18 февраля 2005 года в статье Джесси Джеймса Гарретта (Jesse James Garrett) «Новый подход к веб-приложениям»[3]. Гарретт придумал термин, когда ему пришлось как-то назвать новый набор технологий, предлагаемый им клиенту.

Однако в той или иной форме многие технологии были доступны и использовались гораздо раньше, например в подходе «Remote Scripting», предложенном компанией Microsoft в 1998 году, или с использованием HTML-элемента IFRAME, появившегося в Internet Explorer 3 в 1996 году.

AJAX стал особенно популярен после использования его компанией Google в сервисах Gmail, Google Maps и Google Suggest.

Принцип работы

AJAX имеет вид всего лишь одного объекта под названием XMLHttpRequest.

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

Когда Вы используете Ajax нужно учитывать следующие правила: Вся информация передается/получается исключительно в кодировке UTF-8; В разных браузерах XMLHttpRequest вызывается по-разному.

Преимущества

Экономия трафика. Передаются данные только конкретной части страницы, что существенно снижает трафик.

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

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

Разнообразие в использовании. Действие AJAX подразумевает под собой не только работу с формами. Например, в поиске Google вы можете видеть подборку поисковых фраз после ввода уже первых букв Вашего запроса.

Недостатки

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

Данные не доступны поисковикам. Что логично, динамически изменяемые данные, как и прочие в Java Script не видимы поисковым роботом.

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

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

Методы и свойства объекта XMLHttpRequest

Методы

abort() — отмена текущего запроса к серверу.

getAllResponseHeaders() — получить все заголовки ответа от сервера.

getResponseHeader(«имя_заголовка») — получить указаный заголовок.

open(«тип_запроса»,«URL»,«асинхронный»,«имя_пользователя»,«пароль») — инициализация запроса к серверу, указание метода запроса. Тип запроса и URL — обязательные параметры. Третий аргумент — булево значение. Обычно всегда указывается true или не указывается вообще (по умолчанию — true). Четвертый и пятый аргументы используются для аутентификации (это очень небезопасно, хранить данные об аутентификации в скрипте, так как скрипт может посмотреть любой пользователь).

send(«содержимое») — послать HTTP запрос на сервер и получить ответ.

setRequestHeader(«имя_заголовка»,«значение») — установить значения заголовка запроса.

Свойства

onreadystatechange — одно из основных свойств объекта XMLHttpRequest. Ссылается на функцию-обработчик состояний запроса, которая вызывается каждый раз при смене статуса объекта. В некоторых браузерах функция имеет аргумент — событие. Не используйте его, он совершенно лишний.

readyState — номер состояния запроса. От 0 до 4:

0 — Объект не инициализирован.

1 — Объект загружает данные.

2 — Объект загрузил свои данные.

3 — Объек не полностью загружен, но может взаимодействовать с пользователем.

4 — Объект полностью инициализирован; получен ответ от сервера.

responseText — представление ответа сервера в виде обычного текста (строки). Полный текст есть только при readyState=4, ряд браузеров дают доступ к полученной части ответа сервера при readyState=3.

responseXML — объект документа, совместимый с DOM, полученного от сервера.

status — состояние ответа от сервера. Например, для HTTP-запросов — статусный код ответа сервера: 200 — OK, 404 — Not Found, и так далее. Запросы по протоколам FTP, FILE:// не возвращают статуса, поэтому нормальным для них является status=0.

statusText — текстовое представление состояния ответа от сервера. Например, Not Found или OK.

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

Создадим html-страницу, содержащую контейнер div, в котором будет отображаться информация и кнопку для вызова функции.

Теперь создаем функцию для отправки запроса

Илон Маск рекомендует:  Что такое код asp cachecontrol
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL