Запрос, сделанный посредством `XMLHttpRequest`, может загружать данные синхронно или асинхронно. Тип запроса определяется опциональным `async` аргументом (третий по счёту) метода {{domxref("XMLHttpRequest.open()")}}. Если он равен `true` или не задан, запрос выполнится асинхронно, в противном случае — синхронно.

В чем разница между двумя типами запросов, а так же примеры использования, вы можете найти [в статье с подробным описанием синхронных и асинхронных запросов](/ru/docs/Web/API/XMLHttpRequest_API/Synchronous_and_Asynchronous_Requests). По возможности избегайте синхронных запросов, они блокируют взаимодействие пользователя с сайтом.

Конструктором {{domxref("XMLHttpRequest.XMLHttpRequest", "XMLHttpRequest()")}} определены несколько [типов ответа](https://xhr.spec.whatwg.org/). В ответе содержится важная информация о статусе запроса. При указании некоторых типов ответа могут потребоваться дополнительные действия для обработки и получения результата, рассмотрим эти случаи.

Если с помощью `XMLHttpRequest` загрузить XML-документ, в свойстве {{domxref("XMLHttpRequest.responseXML", "responseXML")}} будет DOM-объект, содержащий распарсенный XML-документ, работать напрямую с которым будет сложно. Есть четыре основных способа анализа этого документа:

1. Использовать [XPath](/ru/docs/Web/XPath) для обращения (или указания на) к части XML-документа.

2. Вручную [конвертировать XML](/ru/docs/Web/XML/Guides/Parsing_and_serializing_XML) в строку или объект.

3. Использовать {{domxref("XMLSerializer")}} для сериализации **DOM-дерева в строку**.

4. Использовать {{jsxref("RegExp")}}, если вам заранее известна структура документа. Возможно, потребуется удалить переносы строк из документа или учитывать их в `RegExp`. Однако, этот способ стоит использовать только в крайнем случае, ведь если XML-документ изменится хотя бы чуть-чуть, то регулярное выражение, скорее всего, уже не подойдёт.

Если вы используете `XMLHttpRequest` для получения содержимого HTML-страницы, в свойстве {{domxref("XMLHttpRequest.responseText", "responseText")}} будет "сырой" HTML, работать с которым неудобно. Есть три способа упростить работу с этим "сырым" HTML:

1. Использовать свойство `XMLHttpRequest.responseXML`, как показано в статье [HTML в XMLHttpRequest](/ru/docs/Web/API/XMLHttpRequest_API/HTML_in_XMLHttpRequest).

2. Вставить содержимое в [фрагмент](/ru/docs/Web/API/DocumentFragment) с помощью `fragment.body.innerHTML` и работать уже с содержимым фрагмента как с DOM-деревом.

3. Использовать {{jsxref("RegExp")}}, если вам заранее известна структура HTML. Возможно, потребуется удалить переносы строк из содержимого или учитывать их в `RegExp`. Однако, этот способ стоит использовать только в крайнем случае, ведь если HTML изменится хотя бы чуть-чуть, то регулярное выражение, скорее всего, уже не подойдёт.

Хотя обычно {{domxref("XMLHttpRequest")}} используется для отправки и получения текстового содержимого, с его помощью можно обмениваться и двоичными данными. Есть несколько проверенных способов заставить `XMLHttpRequest` посылать двоичные данные. Они заключаются в использовании метода {{domxref("XMLHttpRequest.overrideMimeType", "overrideMimeType()")}}.

const req = new XMLHttpRequest();

req.open("GET", url);

req.overrideMimeType("text/plain; charset=x-user-defined");

Однако, существуют и более современные способы, так как атрибут {{domxref("XMLHttpRequest.responseType", "responseType")}} теперь поддерживает ряд дополнительных типов содержимого, что существенно упрощает отправку и получение двоичных данных.

Для примера рассмотрим фрагмент, где используется "`arraybuffer`" как значение `responseType` для загрузки содержимого как объекта {{jsxref("ArrayBuffer")}}, в котором хранятся сырые двоичные данные.

const req = new XMLHttpRequest();

req.onload = (e) => {

const arraybuffer = req.response; // именно response, не responseText

/* ... */

};

req.open("GET", url);

req.responseType = "arraybuffer";

req.send();

Больше примеров в статье [Отправка и получение бинарных данных](/ru/docs/Web/API/XMLHttpRequest_API/Sending_and_Receiving_Binary_Data).

`XMLHttpRequest` позволяет подписываться на различные события, которые могут произойти в процессе обработки запроса: периодические уведомления о состоянии запроса, сообщения об ошибках и так далее.

Следуя [спецификации](https://xhr.spec.whatwg.org/#interface-progressevent) `XMLHttpRequest` поддерживает событие {{domxref("XMLHttpRequest/progress_event", "progress")}} и реализует интерфейс {{domxref("ProgressEvent")}}. Для получения информации о прогрессе загрузки используйте события:

- {{domxref("XMLHttpRequest/progress_event", "progress")}}

- : Наступает каждый раз при изменении объёма переданных данных.

- {{domxref("XMLHttpRequest/load_event", "load")}}

- : Наступает по завершению передачи, когда все данные доступны в `response`.

const req = new XMLHttpRequest();

req.addEventListener("progress", updateProgress);

req.addEventListener("load", transferComplete);

req.addEventListener("error", transferFailed);

req.addEventListener("abort", transferCanceled);

req.open();

function updateProgress(event) {

if (event.lengthComputable) {

const percentComplete = (event.loaded / event.total) * 100;

// ...

} else {

// невозможно вычислить состояние загрузки, так как размер неизвестен

}

}

function transferComplete(evt) {

console.log("Загрузка завершена.");

}

function transferFailed(evt) {

console.log("При загрузке произошла ошибка.");

}

function transferCanceled(evt) {

console.log("Пользователь отменил загрузку.");

}

В 3-6 строках добавляются обработчики для различных событий, происходящих при передаче данных с помощью `XMLHttpRequest`.

Обработчик события `progress`, представленный функцией `updateProgress()` в этом примере, получает количество байт, которое должно быть передано, и количество уже переданных байт в полях `total` и `loaded.` Но если длина сообщения неизвестна, поле `lengthComputable` будет равно `false`.

События о ходе выполнения есть как у входящих, так и у исходящих передач. Обработчики событий входящих передач задаются для объекта `XMLHttpRequest`, как в примере выше, а для исходящих — на `XMLHttpRequest.upload`:

const req = new XMLHttpRequest();

req.upload.addEventListener("progress", updateProgress);

req.upload.addEventListener("load", transferComplete);

req.upload.addEventListener("error", transferFailed);

req.upload.addEventListener("abort", transferCanceled);

req.open();

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

Также можно обработать все три события, завершающие загрузку (`abort`, `load`, or `error`) через событие `loadend`:

req.addEventListener("loadend", loadEnd);

function loadEnd(e) {

console.log("Передача данных завершена (но мы не знаем, успешно ли).");

}

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

Есть два способа передать данные форм с помощью `XMLHttpRequest`:

- без помощи других API, используя только XHR;

- с помощью {{domxref("FormData")}} API.

FormData API – самый простой и быстрый способ, но данные, полученные с его помощью, нельзя превратить в строку с помощью [JSON.stringify](/ru/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify). Использование только XHR сложнее, но этот способ самый гибкий и мощный.

Отправка формы без FormData API в большинстве случаев не требует других API. Единственное исключение, _если вам нужно отправить один или несколько файлов_, тогда придётся использовать {{domxref("FileReader")}} API.

HTML-форму {{ HTMLElement("form") }} можно отправить четырьмя способами:

- использовать метод `POST` и установить атрибут `enctype` в значении `application/x-www-form-urlencoded` (способ по умолчанию);

- использовать метод `POST` и установить атрибут `enctype` в значении `text/plain`;

- использовать метод `POST` и установить атрибут `enctype` в значении `multipart/form-data`;

- использовать метод `GET` (в этом случае атрибут `enctype` будет проигнорирован).

Рассмотрим отправку формы с двумя полями: `foo` и `baz`. Если использовать метод `POST`, сервер получит строку, похожую на одну из показанных ниже, в зависимости от типа кодирования, который вы используете:

- Метод: `POST`; тип кодирования: `application/x-www-form-urlencoded` (по умолчанию):

```plain

```

- Метод: `POST`; тип кодирования: `text/plain`:

```plain

```

- Метод: `POST`; тип кодирования: [`multipart/form-data`](/ru/docs/Web/HTTP/Guides/MIME_types#multipartform-data):

```plain

```

А если вы решите использовать метод `GET`, к адресу формы будет добавлена строка вида:

Всё это возможно благодаря браузеру и тегу {{HTMLElement("form")}}. Но если вам требуется выполнить все операции только с помощью JavaScript, вам придётся проинструктировать интерпретатор обо _всех_ выполняемых операциях. Отправка формы с помощью _чистого_ XHR слишком сложна, чтобы рассказать вам о ней во всех деталях. Поэтому мы решили опубликовать здесь **целый (пусть и учебный) фреймворк**, который поддерживает все четыре способа отправки и даже **загрузку файлов**:

<!doctype html>

<html lang="en-US">

<head>

<meta charset="utf-8" />

<meta name="viewport" content="width=device-width" />

<title>Sending forms with pure AJAX &ndash; MDN</title>

<script>

</script>

</head>

<body>

<h1>Sending forms with XHR</h1>

<h2>Using the GET method</h2>

<form

action="register.php"

method="get"

onsubmit="AJAXSubmit(this); return false;">

<fieldset>

<legend>Registration example</legend>

<p>

<label>First name: <input type="text" name="firstname" /></label

><br />

<label>Last name: <input type="text" name="lastname" /></label>

</p>

<p>

<input type="submit" value="Submit" />

</p>

</fieldset>

</form>

<h2>Using the POST method</h2>

<h3>Enctype: application/x-www-form-urlencoded (default)</h3>

<form

action="register.php"

method="post"

onsubmit="AJAXSubmit(this); return false;">

<fieldset>

<legend>Registration example</legend>

<p>

<label>First name: <input type="text" name="firstname" /></label>

<br />

<label>Last name: <input type="text" name="lastname" /></label>

</p>

<p>

<input type="submit" value="Submit" />

</p>

</fieldset>

</form>

<h3>Enctype: text/plain</h3>

<form

action="register.php"

method="post"

enctype="text/plain"

onsubmit="AJAXSubmit(this); return false;">

<fieldset>

<legend>Registration example</legend>

<p>

<label

>Your name:

<input type="text" name="user" />

</label>

</p>

<p>

<label

>Your message:<br />

<textarea name="message" cols="40" rows="8"></textarea>

</label>

</p>

<p>

<input type="submit" value="Submit" />

</p>

</fieldset>

</form>

<h3>Enctype: multipart/form-data</h3>

<form

action="register.php"

method="post"

enctype="multipart/form-data"

onsubmit="AJAXSubmit(this); return false;">

<fieldset>

<legend>Upload example</legend>

<p>

<label>First name: <input type="text" name="firstname" /></label

><br />

<label>Last name: <input type="text" name="lastname" /></label><br />

Sex:

<input id="sex_male" type="radio" name="sex" value="male" />

<label for="sex_male">Male</label>

<input id="sex_female" type="radio" name="sex" value="female" />

<label for="sex_female">Female</label><br />

Password: <input type="password" name="secret" /><br />

<label

>What do you prefer:

<select name="image_type">

<option>Books</option>

<option>Cinema</option>

<option>TV</option>

</select>

</label>

</p>

<p>

<label

>Post your photos:

<input type="file" multiple name="photos[]" />

</label>

</p>

<p>

<input

id="vehicle_bike"

type="checkbox"

name="vehicle[]"

value="Bike" />

<label for="vehicle_bike">I have a bike</label><br />

<input

id="vehicle_car"

type="checkbox"

name="vehicle[]"

value="Car" />

<label for="vehicle_car">I have a car</label>

</p>

<p>

<label

>Describe yourself:<br />

<textarea name="description" cols="50" rows="8"></textarea>

</label>

</p>

<p>

<input type="submit" value="Submit" />

</p>

</fieldset>

</form>

</body>

</html>

Чтобы воспользоваться фреймворком, создайте страницу с названием **register.php** (и укажите его в атрибуте `action` одной из форм в примере) с _минимальным_ содержимым:

<?php

/* register.php */

header("Content-type: text/plain");

/*

NOTE: You should never use `print_r()` in production scripts, or

otherwise output client-submitted data without sanitizing it first.

Failing to sanitize can lead to cross-site scripting vulnerabilities.

*/

echo ":: data received via GET ::\n\n";

print_r($_GET);

echo "\n\n:: Data received via POST ::\n\n";

print_r($_POST);

echo "\n\n:: Data received as \"raw\" (text/plain encoding) ::\n\n";

if (isset($HTTP_RAW_POST_DATA)) { echo $HTTP_RAW_POST_DATA; }

echo "\n\n:: Files received ::\n\n";

print_r($_FILES);

>

Для активации выполните код:

XHRSubmit(myForm);

> **Обратите внимание:** Лучший способ отправить бинарные данные – использовать {{jsxref("ArrayBuffer", "ArrayBuffers")}} или {{domxref("Blob", "Blobs")}} в связке с методом {{domxref("XMLHttpRequest.send()", "send()")}} и методом {{domxref("FileReader.readAsArrayBuffer()", "readAsArrayBuffer()")}} из `FileReader` API. Но так как цель нашего примера – поддержка возможности представить сырые данные [в виде строки](/ru/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify), мы использовали метод {{domxref("XMLHttpRequest.sendAsBinary()", "sendAsBinary()")}} в связке с {{domxref("FileReader.readAsBinaryString()", "readAsBinaryString()")}} из `FileReader` API. Таким образом, приведенный выше код имеет смысл использовать только в том случае, если вы имеете дело с небольшими файлами. Если вы не планируете загружать двоичное содержимое, вместо этого воспользуйтесь `FormData` API.

The {{domxref("FormData")}} constructor lets you compile a

set of key/value pairs to send using `XMLHttpRequest`. Its primary use is in

sending form data, but can also be used independently from a form in order to transmit

user keyed data. The transmitted data is in the same format the form's

`submit()` method uses to send data, if the form's encoding type were set to

"multipart/form-data". FormData objects can be utilized in a number of ways with an

`XMLHttpRequest`. For examples, and explanations of how one can utilize

FormData with XMLHttpRequests, see the [Using FormData Objects](/ru/docs/Web/API/XMLHttpRequest_API/Using_FormData_Objects) page. For didactic purposes here is **a _translation_ of [the previous example](#a_little_vanilla_framework) transformed to use the

`FormData` API**. Note the brevity of the code:

<!doctype html>

<html lang="en-US">

<head>

<meta charset="UTF-8" />

<meta name="viewport" content="width=device-width" />

<title>Sending forms with FormData &ndash; MDN</title>

<script>