Объект XMLHttpRequest

Объект XMLHttpRequest позволяет получать данные с сервера в фоновом режиме. Как правило, возвращаемая информация представляется в формате XML, но данный объект также позволяет работать с любыми текстовыми данными. Объект XMLHttpRequest впервые был реализован компанией Microsoft в виде объекта ActiveX. Сейчас он уже доступен в браузерах Mozilla, Netscape (начиная с 7-ой версии) а также в Safari (с версии 1.2), естественно, не в виде ActiveX-компоненты. Объект XMLHttpRequest представляет собой набор API функций, используемый в JavaScript, VBScipt и т.п. для передачи данных XML по протоколу HTTP.

Ниже представлены методы и свойства объекта XMLHttpRequest, общие для Internet Explorer 5+, Mozilla, Netscape 7 и Safari 1.2.

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

abort( ). Обрывает текущий запрос.
Для браузера Internet Explorer успешный вызов abort() на самом деле может не обрывать соединение, а оставлять его в подвешенном состоянии на некоторый таймаут (~30 секунд). У браузера есть лимит: не более 2 одновременных соединений с одним доменом. Т.е, если два соединения уже висят, то третье открыто не будет, пока одно из них не умрет.
getAllResponseHeaders( ). Возвращает полный набор заголовков ответа (названий и значений) в виде строки.
getResponseHeader(<headerLabel>). Возвращает строковое значение заголовка, название которого указано в параметре headerLabel. Если параметр не задан, возвращает весь заголовок. Например: http.getResponseHeader("Last-Modified");
open(<method>, <URL> [, <asyncFlag>[, <userName>[, <password>]]]). Открывает соединение с сервером с указанием метода передачи данных.
method: GET, POST, HEAD, TRACE, DELETE, PUT;

URL: адрес запроса. Можно использовать не только HTTP или HTTPS, но и другие протоколы, такие как FTP и file://. При этом запрос со страницы можно отправлять только на тот домен и порт, с которого она пришла. Как обойти это ограничение описано в разделе Ошибки Ajax.

asyncFlag: флага асинхронности: false - синхронно (скрипт будет ожидать ответа от сервера), true - асинхронно (по умолчанию);

userName, password: логин и пароль для простой HTTP-авторизации.
send(<content>). Отправка запроса. Значением content могут быть данные для POST-запроса или пустая строка.
setRequestHeader(<label>, <value>). Установка в отправляемом запросе заголовка label со значением value. Если заголовок с таким name уже есть - он заменяется. Например, http.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded') http.setRequestHeader('Content-type', 'text/xml')
timeout - время выполнения запроса в милисекундах, например http.timeout = 10000; // 10 sec
ontimeout - обработка события "время ожидания ответа истекло", например http.ontimeout = function(){hide('wait');alert("Время выполнения запроса истекло!");};
ontimeout - обработка события "ошибка", например http.onerror = function(){hide('wait');alert("Ошибка выполнения запроса!");};

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

onreadystatechange. Событие, возникающее при смене статуса объекта.
readyState. Значения статуса. Может принимать следующие значения:
- 0 - не инициализирован (перед началом работы объекта),
- 1 - загрузка (однажды, когда идет инициализация объекта),
- 2 - загружен (однажды, когда получен ответ от сервера),
- 3 - доступен (пока объект соединен с сервером),
- 4 - завершен (после того, как объект выполнил все задачи).
responseText. Строка с возвращенными сервером данными.
responseXML. DOM-совместимый объект-документ с возвращенными сервером данными. Например,
var authorElem = xmlhttp.responseXML.getElementById('author')
Чтобы браузер успешно обработал ответ сервера в свойство responseXML, в заголовок ответа должен содержать: "Content-Type: text/xml". Иначе свойство responseXML будет равно null.
status. Стандартный HTTP-код статуса. Например, 404 (для "Not Found") или 200 (для "OK").
Запросы по протоколам FTP, file:// не возвращают статуса, поэтому нормальным для них является status=0.
statusText. Текстовое сообщение статуса, например "Not Found" или "OK".

Общий план работы с объектом XMLHttpRequest можно представить следующим образом:

Создание экземпляра объекта XMLHttpRequest.
Установка обработчика события onreadystatechange.
Открытие соединения с сервером методом open.
Непосредственно отправка запроса методом send.

Пример

var ajaxObj;
if(window.XMLHttpRequest){
    ajaxObj = new XMLHttpRequest();
} else if(window.ActiveXObject){
    ajaxObj = new ActiveXObject("Microsoft.XMLHTTP");
} else {
    return false;
}
ajaxObj.open((post?'POST':'GET'), 'https://htmlweb.ru/api.php');
ajaxObj.setRequestHeader("Content-Type",
            "application/x-www-form-urlencoded; charset=utf-8;");
ajaxObj.onreadystatechange =function(){
    if(ajaxObj.readyState==4 && ajaxObj.status==200){
        console.log('Статус:'+ajaxObj.status+', ответ:'+ajaxObj.statusText);
    }
};
ajaxObj.timeout = 10000; // 10 sec
ajaxObj.ontimeout = function(){hide('wait');alert("Время выполнения запроса истекло!");};
ajaxObj.onerror = function(){hide('wait');alert("Ошибка выполнения запроса!");};
ajaxObj.send(post);
return false;

Следующая лекция