JavaScript метод XMLHttpRequest.open()

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

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

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

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

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

Метод	Chrome	Firefox	Opera	Safari	IExplorer	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. Обязательный параметр.
url	URL адрес на который будет отправлен запрос. Обязательный параметр.
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, которая:

Вызывает конструктор объекта 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" запроса.

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