JavaScript метод XMLHttpRequest.open()

JavaScript XMLHttpRequest

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

JavaScript метод open() объекта XMLHttpRequest позволяет инициализировать только что созданный запрос (определить параметры запроса), или повторно инициализировать существующий запрос.


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


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

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

МетодChrome
Chrome
Firefox
Firefox
Opera
Opera
Safari
Safari
Internet Explorer
IExplorer
Microsoft Edge
Edge
open()ДаДаДаДаДаДа

JavaScript синтаксис:

XMLHttpRequest.open(method, url);
XMLHttpRequest.open(method, url, async);
XMLHttpRequest.open(method, url, async, user);
XMLHttpRequest.open(method, url, async, user, password);

method - String
url - String
async - Boolean
user - String
password - String

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

XMLHttpRequest

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

ПараметрОписание
methodМетод HTTP запроса, который будет использован. Например, "GET", "POST", "PUT", "DELETE" и так далее. Игнорируется для URL адресов, отличных от HTTP, или HTTPS. Обязательный параметр.
urlURL адрес на который будет отправлен запрос. Обязательный параметр.
asyncНеобязательный логический параметр, который по умолчанию соответствует значению true, которое указывает на то, что, следует выполнять операцию асинхронно.
Если значение установить в false, то метод send() не возвращается до получения ответа. Синхронные запросы в основном потоке могут быть деструктивны для работы пользователя и их следует избегать. Большинство современных браузеров полностью упразднили синхронную поддержку XHR в основном потоке. Синхронные запросы разрешены в фоновых задачах (Web Workers).
userИмя пользователя, используемое для аутентификации. По умолчанию это значение соответствует null. Необязательный параметр.
passwordПароль, используемый для аутентификации. По умолчанию это значение соответствует null. Необязательный параметр.

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

В следующем примере мы рассмотрим с вами как определить параметры для "GET" запроса.

<!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" запроса.

<!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 в исключения блокировщика рекламы, этим вы поможете развитию проекта.