Есть желание присоединиться к интересным IT проектам? Смотри открытые вакансии.

JavaScript метод XMLHttpRequest.send()

JavaScript XMLHttpRequest

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

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


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


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

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

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

МетодChrome
Chrome
Firefox
Firefox
Opera
Opera
Safari
Safari
Internet Explorer
IExplorer
Microsoft Edge
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, которая:

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

Пример использования методов open() и send() объекта XMLHttpRequest
Пример использования методов 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) и она в свою очередь:

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

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

Кажется, вы используете блокировщик рекламы :(

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

Добавьте, пожалуйста, basicweb.ru в исключения блокировщика рекламы, этим вы поможете развитию проекта.