JavaScript метод XMLHttpRequest.open()

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

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

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

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

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

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

Показать браузеры

ВсеКомпьютерыМобильные

Совместимостьapi.XMLHttpRequest.open

Возможность	Компьютеры					Мобильные
	ChromeChrome	EdgeEdge	FirefoxFirefox	OperaOpera	SafariSafari	Chrome AndroidChromeAndroid	Firefox for AndroidFirefoxAndroid	Opera AndroidOperaAndroid	Safari on iOSSafariiOS	Samsung BrowserSamsungAndroid	WebView AndroidWebViewAndroid	WebView on iOSWebViewiOS
open	✓1	✓12	✓1…	✓8	✓1.2	✓18	✓4…	✓10.1	✓1	✓1.0	✓4.4	✓1

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

JavaScript синтаксис

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

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

XMLHttpRequest Standard.

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

Исключения

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

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

<button data-migration-click-0="">Запросить телефон</button>
<div id="demo"></div>

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')

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

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

• Вызывает конструктор объекта XMLHttpRequest и инициализирует переменную новым объектом этого типа.
• С помощью метода open() объекта XMLHttpRequest определяем параметры для запроса - указываем, что HTTP запрос будет осуществлен методом "GET", а в качестве URL адреса, на который будет отправлен запрос, мы задаем файл формата JSON. Файл размещен на том же сервере и в том же каталоге, что и документ, с которого выполняется скрипт. Файл имеет следующий вид:
  JSON

  {
     "firstName": "Василий",
     "lastName": "Джейсонов",
     "age": 25,
     "phone": 88005553535
  }
  

• С помощью метода send() объекта XMLHttpRequest отправляем запрос на сервер.
• С использованием обработчика событий onreadystatechange, вызываемого при запуске события readystatechange, то есть при каждом изменении свойства readyState объекта XMLHttpRequest мы вызываем функцию, которая проверяет состояние запроса, оно должно соответствовать значению 4 (операция полностью завершена) и числовой код состояния HTTP ответа должен соответствовать значению 200 (успешный запрос). Если условия выполнены, то с использованием метода JSON.parse() анализируем строку в формате JSON и инициализируем переменную значением, полученным в ходе анализа. После этого с помощью метода getElementById() находим элемент с определенным глобальным атрибутом id и изменяем его содержимое значением ключа объекта, содержащегося в инициализированной ранее переменной.

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

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

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)

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

• С помощью метода preventDefault() объекта Event отменяет действие события по умолчанию. Это необходимо для того, чтобы избежать перезагрузки страницы во время отправки формы.
• Инициализирует четыре переменные: первая и вторая содержат значения полей <input>, третья содержит строковое значение, которое мы будем отправлять на сервер в качестве тела данных в запросе (состоит в том числе из первых двух переменных), четвертая вызывает конструктор объекта XMLHttpRequest и инициализирует переменную новым объектом этого типа.
• С помощью метода open() объекта XMLHttpRequest определяем параметры для запроса - указываем, что HTTP запрос будет осуществлен методом "POST", а в качестве URL адреса, на который будет отправлен запрос, задаем условный адрес login-demo на том же сервере. Такой адрес мог бы обрабатывать, например, следующий учебный скрипт на языке программирования 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).