Наш чат в Telegram для обмена идеями, проектами, мыслями, людьми в сфере ИТ г.Ростова-на-Дону: @it_rostov

Объект 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-приложения


.