XMLHttpRequest

JavaScript — это основной язык программирования для веб-разработки, обеспечивающий динамичный и интерактивный пользовательский опыт. Одна из ключевых особенностей JavaScript — возможность взаимодействия с серверами, получения данных и асинхронного обновления веб-страниц. Это в первую очередь достигается с помощью XMLHttpRequest (XHR). В этой статье мы подробно разберём XMLHttpRequest, включая его методы, свойства и практическое применение, с множеством примеров кода для облегчения обучения.

INFO

XMLHttpRequest работает с функциями обратного вызова. Вы можете использовать Fetch API, который оперирует промисами и является более современным решением.

Понимание XMLHttpRequest

XMLHttpRequest — это объект JavaScript, который предоставляет возможность отправлять HTTP или HTTPS запросы на веб-сервер и загружать данные ответа сервера обратно в скрипт. Это позволяет обновлять части веб-страницы без перезагрузки всей страницы.

Создание объекта XMLHttpRequest

Чтобы инициировать XMLHttpRequest, сначала необходимо создать экземпляр объекта XMLHttpRequest:

---

const xhr = new XMLHttpRequest();

Выполнение HTTP-запроса

После создания объекта XMLHttpRequest вы можете настроить его для получения данных с сервера. Для настройки запроса используется метод open.

Метод open

Метод open инициализирует запрос. Он принимает несколько параметров:

---

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

• method: HTTP-метод для использования (например, "GET", "POST").
• url: URL, на который отправляется запрос.
• async: Логическое значение, указывающее, является ли запрос асинхронным (по умолчанию true).
• user: Необязательный параметр, имя пользователя для аутентификации.
• password: Необязательный параметр, пароль для аутентификации.

Пример:

---

xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts/1', true);

Метод send

Метод send отправляет запрос на сервер. Для GET-запроса он обычно вызывается без аргументов. Для POST-запроса вы можете передать данные в качестве аргумента.

Пример GET-запроса:

---

xhr.send();

Пример POST-запроса:

---

xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send('param1=value1&param2=value2');

Обработка ответов сервера

Для обработки ответов от сервера можно использовать различные обработчики событий.

Событие onreadystatechange

Событие onreadystatechange срабатывает каждый раз при изменении свойства readyState. Свойство readyState хранит статус XMLHttpRequest.

• 0: UNSENT
• 1: OPENED
• 2: HEADERS_RECEIVED
• 3: LOADING
• 4: DONE

Вы можете проверить readyState и status, чтобы определить, когда запрос успешно завершён.

Пример:

---

Output appears here after Run.

note

Хотя onreadystatechange работает, в современном коде обычно предпочитают onload и onerror для более простой и читаемой обработки запросов. onreadystatechange в основном используется, когда необходимо отслеживать промежуточные состояния (например, прогресс или получение заголовков).

Событие load

Событие load срабатывает, когда запрос успешно завершается.

Пример:

---

Output appears here after Run.

Обработка ошибок

Обработка ошибок критически важна для надёжного приложения. Событие onerror срабатывает при возникновении сетевой ошибки. Вы также можете установить тайм-аут, чтобы предотвратить зависание запросов на неопределённое время, используя xhr.timeout (в миллисекундах), и обрабатывать тайм-ауты с помощью ontimeout.

Пример:

---

Output appears here after Run.

Разбор JSON-ответов

Часто ответы сервера приходят в формате JSON. Вы можете разобрать JSON-ответы с помощью JSON.parse. В качестве альтернативы вы можете установить xhr.responseType = 'json', чтобы автоматически разобрать ответ; также поддерживаются другие форматы, такие как 'blob', 'arraybuffer' или 'document'.

Пример:

---

Output appears here after Run.

Заключение

Освоение XMLHttpRequest является фундаментальным для любого веб-разработчика, стремящегося создавать динамичные и отзывчивые веб-приложения. В этом руководстве рассмотрены основные аспекты XMLHttpRequest, включая создание запросов, обработку ответов, обработку ошибок и сценарии расширенного использования. Интегрируя приведённые примеры в свои проекты, вы сможете использовать XMLHttpRequest для улучшения пользовательского опыта и создания сложных веб-приложений.

Практика

Какие из следующих утверждений о XMLHttpRequest являются верными?

XMLHttpRequest используется для отправки HTTP или HTTPS запросов на веб-сервер.Метод 'open' объекта XMLHttpRequest используется для отправки запроса на сервер.Событие 'onreadystatechange' срабатывает каждый раз при изменении свойства 'readyState'.XMLHttpRequest может обрабатывать ответы только в формате JSON.Метод 'send' отправляет запрос на сервер, и он может включать данные при выполнении POST-запроса.