Объект XMLHttpRequest

Объект XMLHttpRequest позволяет получать данные с сервера в фоновом режиме.

Как правило, возвращаемая информация представляется в формате XML, но данный объект также позволяет работать с любыми текстовыми данными. Объект XMLHttpRequest впервые был реализован компанией Microsoft в виде объекта ActiveX.

Сейчас он доступен во многих браузерах: Поддержка XMLHttpRequest

Объект XMLHttpRequest представляет собой набор API функций, используемый в JavaScript, VBScipt и т.п. для передачи данных XML по протоколу HTTP.

Ниже представлены методы и свойства объекта XMLHttpRequest.

Методы объекта 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://. При этом запрос со страницы можно отправлять только на тот домен и порт, с которого она пришла.

  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 можно представить следующим образом:

1. Создание экземпляра объекта XMLHttpRequest.
2. Установка обработчика события onreadystatechange.
3. Открытие соединения с сервером методом open.
4. Непосредственно отправка запроса методом 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;

Читайте дальше: Создание Ajax-приложения