JavaScript метод XMLHttpRequest.send()

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

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

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

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

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

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

Метод	Chrome	Firefox	Opera	Safari	IExplorer	Edge
`send()`	Да	Да	Да	Да	Да	Да

JavaScript синтаксис:

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

body - Any

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

XMLHttpRequest

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

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

Исключения

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

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

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

<!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.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

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

<!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.php"); // определяем параметры для запроса 
	  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).

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

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

JavaScript XMLHttpRequest