JavaScript метод XMLHttpRequest.send()

Определение и применение

JavaScript метод send() объекта XMLHttpRequest позволяет отправить запрос на сервер.

Для того, чтобы отправить запрос его необходимо изначально инициализировать с использованием метода open() объекта XMLHttpRequest.

Если заголовок Accept не был установлен с помощью метода setRequestHeader() объекта XMLHttpRequest, то отправляется заголовок Accept с типом "*/* " (любой тип).

Поддержка браузерами

Спецификация: xhr.spec.whatwg

Поддерживается во всех основных браузерах с 2015 года.

Показать браузеры
Совместимостьapi.XMLHttpRequest.send
ВозможностьКомпьютерыМобильные
ChromeEdgeFirefoxOperaSafariChrome AndroidFirefox for AndroidOpera AndroidSafari on iOSSamsung BrowserWebView AndroidWebView on iOS
send✓1✓12✓1✓8✓1.2✓18✓4✓10.1✓1✓1.0✓4.4✓1
ArrayBufferView as parameter to send()✓22✓12✓20✓11.6✓7✓25✓20✓12✓7✓1.5✓4.4✓7
ArrayBuffer as parameter to send()✓9✓12✓9✓11.6✓6✓18✓9✓12✓6✓1.0✓4.4✓6
Blob as parameter to send()✓22✓12✓2✓12✓6✓25✓4✓12✓6✓1.5✓4.4✓6
FormData as parameter to send()✓6✓12✓2✓12✓6✓18✓4✓12✓6✓1.0✓4.4✓6
URLSearchParams as parameter to send()✓59✓17✓44✓46✓15

15

10.1 — Удалено в 15; Частичная поддержка

Примечание MDN (англ.)

Doesn't send the correct Content-Type header by default. See bug 227477.

✓59✓44✓43✓15

15

10.3 — Удалено в 15; Частичная поддержка

Примечание MDN (англ.)

Doesn't send the correct Content-Type header by default. See bug 227477.

✓7.0✓59✓15

15

10.3 — Удалено в 15; Частичная поддержка

Примечание MDN (англ.)

Doesn't send the correct Content-Type header by default. See bug 227477.

поддерживается с ограничениями нет поддержки нет данных≤31 — не позднее версии 31

JavaScript синтаксис:

JavaScript
XMLHttpRequest.send();
XMLHttpRequest.send(body);

body - Any

Cпецификация

XMLHttpRequest

Значения параметров

ПараметрОписание
bodyПредставляет из себя тело данных для отправки в запросе XHR. Если метод запроса соответствует значению "GET" или "HEAD", то этот параметр игнорируется и тело запроса имеет значение null. Необязательный параметр.

Исключения

Тип исключенияОписание
InvalidStateErrorВозникает в том случае, если метод send() уже был вызван для запроса, и / или запрос завершен.
NetworkErrorВозникает в том случае, если тип ресурса, который нужно извлечь, является Blob, и метод не соответствует типу "GET".

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

В следующем примере мы рассмотрим с вами как отправить "GET" запрос с использованием метода send() объекта XMLHttpRequest.

HTML
<!DOCTYPE html>
<html>
  <head>
    <title>Использование JavaScript методов open() и send() объекта XMLHttpRequest</title>
  </head>
  <body>
    <button onclick="getPhone()">Запросить телефон</button>
    <!-- добавляем атрибут событий onclick -->
    <div id="demo"></div>
    <script>
      function getPhone() {
        let xhr = new XMLHttpRequest(); // инициализируем переменную новым объектом XMLHttpRequest
        xhr.open("GET", "user-profile.json"); // определяем параметры для запроса
        xhr.send(); // отправляем запрос на сервер

        xhr.onreadystatechange = function () {
          // проверяем состояние запроса и числовой код состояния HTTP ответа
          if (this.readyState == 4 && this.status == 200) {
            const data = JSON.parse(this.responseText); // анализируем строку в формате JSON и инициализируем переменную значением, полученным в ходе анализа
            document.getElementById("demo").innerHTML = "Телефон пользователя: " + data.phone; // находим элемент по id и изменяем его содержимое значением ключа объекта, содержащегося в переменной
          }
        };
      }
    </script>
  </body>
</html>

В этом примере с использованием атрибута событий onclick при нажатии на кнопку (HTML элемент <button>) вызываем функцию getPhone, которая:

  • Вызывает конструктор объекта XMLHttpRequest и инициализирует переменную новым объектом этого типа.
  • С помощью метода open() объекта XMLHttpRequest определяем параметры для запроса - указываем, что HTTP запрос будет осуществлен методом "GET", а в качестве URL адреса на который будет отправлен запрос мы задаем файл формата json. Обратите внимание, что файл размещен на том же сервере и в том же каталоге, что и документ с которого выполняется скрипт. Файл имеет следующий вид:
    Код
    {
   "firstName": "Василий",
   "lastName": "Джейсонов",
   "age": 25,
   "phone": 88005553535
}
  • С помощью метода send() объекта XMLHttpRequest отправляем запрос на сервер.
  • С использованием обработчика событий onreadystatechange, вызываемого при запуске события readystatechange, то есть при каждом изменении свойства readyState объекта XMLHttpRequest мы вызываем функцию, которая проверяет состояние запроса, оно должно соответствовать значению 4 (операция полностью завершена) и числовой код состояния HTTP ответа должен соответствовать значению 200 (успешный запрос). Если условия выполнены, то с использованием метода JSON.parse() анализируем строку в формате JSON и инициализируем переменную значением, полученным в ходе анализа. После этого с помощью метода getElementById() находим элемент с определенным глобальным атрибутом id и изменяем его содержимое значением ключа объекта, содержащегося в инициализированной ранее переменной.

Пример использования методов open() и send() объекта XMLHttpRequest

Исходный код для изучения. Запуск на этой странице недоступен.

index.html
HTML


<button data-migration-click-0="">Запросить телефон</button>
<div id="demo"></div>
main.js
JavaScript
const getPhone = function () {
  let xhr = new XMLHttpRequest();
  xhr.open("GET", "user-profile.json");
  xhr.send();

  xhr.onreadystatechange = function () {
    if (this.readyState == 4 && this.status == 200) {
      const data = JSON.parse(this.responseText);
      document.getElementById("demo").innerHTML = "Телефон пользователя: " + data.phone;
    }
  };
};

// Обработчики кнопок перенесены из HTML для запуска с CSP без inline-скриптов.
document.querySelector("[data-migration-click-0]").addEventListener("click", function () {
  getPhone();
});
document.querySelector("[data-migration-click-0]").removeAttribute("data-migration-click-0");

Результат нашего примера:

Пример использования методов open() и send() объекта XMLHttpRequest
Пример использования методов open() и send() объекта XMLHttpRequest

В следующем примере мы рассмотрим с вами как отправить "POST" запрос с использованием метода send() объекта XMLHttpRequest.

HTML
<!DOCTYPE html>
<html>
  <head>
    <title
      >Использование JavaScript методов send() и setRequestHeader() объекта XMLHttpRequest</title
    >
  </head>
  <body>
    <form onsubmit="logIn(event)">
      <input type="text" name="user" placeholder="user" />
      <input type="password" name="pwd" placeholder="password" />
      <button type="submit">Log In</button>
      <!-- добавляем атрибут событий onsubmit -->
    </form>
    <div id="demo"></div>
    <script>
      function logIn(e) {
        e.preventDefault(); // отменяем действие события по умолчанию
        let userVal = document.querySelector("[type='text']").value, // инициализируем переменную содержащую значение элемента с определенным id
          pwdVal = document.querySelector("[type='password']").value, // инициализируем переменную содержащую значение элемента с определенным id
          data = "user=" + userVal + "&password=" + pwdVal, // инициализируем переменную строковым значением, которое мы будем отправлять на сервер в качестве тела данных в запросе
          xhr = new XMLHttpRequest(); // инициализируем переменную новым объектом XMLHttpRequest

        xhr.open("POST", "login-demo"); // определяем параметры для запроса
        xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); // задаем значение заголовка HTTP запроса (указываем, что передаваемое значение на сервер кодируется в кортежах с ключом, разделенных символоми '&', с '=' между ключом и значением)
        xhr.send(data); // отправляем запрос на сервер

        xhr.onreadystatechange = function () {
          // проверяем состояние запроса и числовой код состояния HTTP ответа
          if (this.readyState == 4 && this.status == 200) {
            document.getElementById("demo").innerHTML = this.responseText; // находим элемент по id и изменяем его содержимое значением содержащим ответ сервера на запрос в виде текста
          }
        };
      }
    </script>
  </body>
</html>

В этом примере с использованием атрибута событий onsubmit, установленного на форму (HTML элемент <form>) при нажатии на кнопку (HTML элемент <button>) вызываем функцию logIn(), которой мы передаем объект события (объект Event) и она в свою очередь:

  • С помощью метода preventDefault() объекта Event отменяет действие события по умолчанию. Это необходимо для того, чтобы избежать перезагрузки страницы во время отправки формы.
  • Инициализирует четыре переменные: первая и вторая содержат значения полей <input>, третья содержит строковое значение, которое мы будем отправлять на сервер в качестве тела данных в запросе (состоит в том числе из первых двух переменных), четвертая вызывает конструктор объекта XMLHttpRequest и инициализирует переменную новым объектом этого типа.
  • С помощью метода open() объекта XMLHttpRequest определяем параметры для запроса - указываем, что HTTP запрос будет осуществлен методом "POST", а в качестве URL адреса на который будет отправлен запрос мы задаем файл формата php. Обратите внимание, что файл размещен на том же сервере и в том же каталоге, что и документ с которого выполняется скрипт. Файл содержит следующий простой скрипт на языке программирования PHP:
    Код
    <?php
  $user = $_POST['user']; // инициализируем переменную user, которая содержит переданные скрипту через HTTP метод POST данные (с ключом user)
  $password = $_POST['password']; // инициализируем переменную password, которая содержит переданные скрипту через HTTP метод POST данные (с ключом password)
  
  if($user == "agent" && $password == "007") { // проверяем соответствуют ли значения в переменных определенным значениям
    echo "Пользователь ".$user." с паролем ".$password." успешно залогинен"; // выводим текстовое содержимое со значением переменных
  } else {
    echo "Пользователь ".$user." или пароль ".$password." ошибочны"; // выводим текстовое содержимое со значением переменных
  }
?>
  • С помощью метода setRequestHeader() объекта XMLHttpRequest задаем значение заголовка HTTP запроса (указываем, что передаваемое значение на сервер кодируется в кортежах с ключом, разделенных символоми '&', с '=' между ключом и значением).
  • С помощью метода send() объекта XMLHttpRequest отправляем запрос на сервер. Обратите внимание, что мы в качестве параметра метода передаем переменную, которая содержит сформированное выше строковое значение.
  • С использованием обработчика событий onreadystatechange, вызываемого при запуске события readystatechange, то есть при каждом изменении свойства readyState объекта XMLHttpRequest мы вызываем функцию, которая проверяет состояние запроса, оно должно соответствовать значению 4 (операция полностью завершена) и числовой код состояния HTTP ответа должен соответствовать значению 200 (успешный запрос). Если условия выполнены, то с помощью метода getElementById() находим элемент с определенным глобальным атрибутом id и изменяем его содержимое значением, содержащим ответ сервера на запрос в виде текста (значение свойства responseText).

Учебный POST-запрос: без авторизации и сохранения данных

Исходный код для изучения. Запуск на этой странице недоступен.

index.html
HTML


<form>
<input type="text" name="user" placeholder="user">
<input type="password" name="pwd" placeholder="password">
<button type="submit">Log In</button>
</form>
<div id="demo"></div>
main.js
JavaScript
const logIn = function (e) {
  e.preventDefault();
  let userVal = document.querySelector("[type='text']").value,
    pwdVal = document.querySelector("[type='password']").value,
    data = "user=" + userVal + "&password=" + pwdVal,
    xhr = new XMLHttpRequest();

  xhr.open("POST", "login-demo");
  xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  xhr.send(data);

  xhr.onreadystatechange = function () {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("demo").innerHTML = this.responseText;
    }
  };
};

document.querySelector("form").addEventListener("submit", logIn);

Результат нашего примера: