AJAX - Объект XMLHttpRequest

Объект XMLHttpRequest — это краеугольный камень в AJAX.

Все современные браузеры поддерживают объект XMLHttpRequest.

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

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

У всех современных браузеров (Chrome, Firefox, IE7+, Edge, Safari, Opera) есть встроенный объект XMLHttpRequest.

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


переменная = new XMLHttpRequest();

Пример:


var xhttp = new XMLHttpRequest(); 

Взаимодействие между доменами

Из соображения безопасности современные браузеры не допускают обращение между доменами.

Это означает, что и сама веб-страница и файл, который она будет загружать по AJAX, должны находиться на одном и том же сервере.

Старые браузеры (IE5 и IE6)

В старых браузерах Internet Explorer (5/6) вместо объекта XMLHttpRequest используется объект ActiveX:


переменная = new ActiveXObject("Microsoft.XMLHTTP");

Чтобы AJAX работал также в IE5 и IE6, необходимо проверить, поддерживает ли браузер объект XMLHttpRequest, и, если нет, то создать объект ActiveX:


if (window.XMLHttpRequest) {
    // код для современных браузеров
    xmlhttp = new XMLHttpRequest();
 } else {
    // код для старых браузеров IE
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
 } 

Методы объекта XMLHttpRequest

Метод Описание
new XMLHttpRequest() Создает новый объект XMLHttpRequest
abort() Отменяет текущий запрос
getAllResponseHeaders() Возвращает полный список HTTP-заголовков ответа сервера
getResponseHeader(headerName) Возвращает значение заголовка ответа сервера с именем headerName
open(method, url, async, user, psw) Определяет параметры запроса:
method — тип запроса (GET или POST)
url — расположение файла
async — true (асинхронный) или false (синхронный)
user — имя пользователя (не обязательный)
psw — пароль (не обязательный)
send() Посылает запрос на сервер
Используется для запросов GET
send(контент) Посылает запрос на сервер
Используется для запросов POST
setRequestHeader(метка, значение) Добавляет HTTP-заголовок к запросу виде пары метка/значение

Свойства объекта XMLHttpRequest

Свойство Описание
onreadystatechange Определяет функцию-обработчик события, которое происходит каждый раз при изменении свойства readyState
readyState Текущее состояние объекта XMLHttpRequest:
0 — запрос не инициализирован
1 — соединение с сервером установлено
2 — запрос получен
3 — обработка запроса
4 — запрос завершен и ответ готов
responseText Возвращает данные ответа в виде строки
responseXML Возвращает данные ответа в виде XML
status Возвращает статус запроса в виде числа:
200 — "OK"
403 — "Forbidden"
404 — "Not Found"
statusText Возвращает статус запроса в виде строки (например, "OK" или "Not Found")