XMLHttpRequest

XMLHTTP (XMLHttpRequest) — набор API, используемый в языках JavaScript, JScript, VBScript и им подобных для пересылки XML-данных по HTTP-протоколу между браузером и веб-сервером. Позволяет осуществлять HTTP-запросы к удаленному серверу без необходимости перезагружать страницу.

XMLHTTP является важной составляющей технологии AJAX (Asynchronous JavaScript And XML), используется многими сайтами для создания динамичных, быстро реагирующих на запросы пользователя приложений. Например XMLHTTP используется такими сайтами как Gmail, Google Suggest, MSN Virtual Earth. К сожалению, XMLHTTP работает только с файлами, находящимися на том же домене, что и использующая XMLHTTP страница. Как и в случае JavaScript, это сделано в целях безопасности (cross-site scripting).

Кроме пересылки XML, по XMLHTTP можно обмениваться данными формы и просто текстовыми строками.

История

Впервые был реализован компанией Microsoft, появившись в Internet Explorer 5.0 в виде объекта ActiveX, доступного через JScript, VBScript, или другие скриптовые языки, поддерживающиеся браузером. Программисты проекта Mozilla затем разработали совместимую версию, называющуюся XMLHttpRequest в Mozilla 1.0. В дальнейшем эта возможность также была реализована компаниями Apple начиная с Safari 1.2, родственным браузером Konqueror, компанией Opera Software начиная с Opera 8.01, и, вероятно, другими.

Методы класса XMLHttpRequest

Метод	Описание
abort()	отменяет текущий запрос
getAllResponseHeaders()	возвращает полный список HTTP-заголовков в виде строки
getResponseHeader(headerName)	возвращает значение указанного заголовка
open(method, URL, async, userName, password)	определяет метод, URL и другие опциональные параметры запроса; параметр async определяет, происходит ли работа в асинхронном режиме
send(content)	отправляет запрос на сервер
setRequestHeader(label, value)	добавляет HTTP-заголовок к запросу
overrideMimeType(mimeType)	позволяет указать mime-type документа, если сервер его не передал или передал неправильно. Внимание: метод отсутствует в Internet Explorer!

Свойства класса XMLHttpRequest

Свойство	Описание
onreadystatechange	обработчик события, которое происходит при каждой смене состояния объекта
readyState	возвращает текущее состояние объекта (0 — неинициализирован, 1 — открыт, 2 — отправка данных, 3 — получение данных и 4 — данные загружены)
responseText	текст ответа на запрос
responseXML	текст ответа на запрос в виде XML, который затем может быть распарсен посредством DOM
status	возвращает HTTP-статус в виде числа (404 — «Not Found», 200 — «OK» и т. д.)
statusText	возвращает статус в виде строки («Not Found», «OK» и т. д.)

Пример использования

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

1. Создание экземпляра объекта XMLHttpRequest
2. Установка обработчика события
3. Открытие соединения и отправка запроса.

Создание экземпляра объекта XMLHttpRequest.

На этой стадии необходима отдельная реализация для разных браузеров. Конструкция создания объекта отличается: в IE 5 - IE 6 она реализована через ActiveXObject, а в остальных браузерах (IE 7, Mozilla, Opera, Netscape и Safari) — как встроенный объект типа XMLHttpRequest.

Вызов для ранних версий Internet Explorer выглядит так:

var req = new ActiveXObject("Microsoft.XMLHTTP");

В более поздних версиях Internet Explorer (до IE7) рекомендуется использовать:

var req = new ActiveXObject("Msxml2.XMLHTTP");

…и для остальных:

var req = new XMLHttpRequest();

То есть, для обеспечения кросс-браузерности кода, нужно лишь проверять наличие объектов window.XMLHttpRequest и window.ActiveXObject, и, в зависимости от того, какой есть, тот и применять.

В качестве универсального решения предлагается использование такой функции:

function createRequestObject()
{
    if (window.XMLHttpRequest) {
        try {
            return new XMLHttpRequest();
        } catch (e){}
    } else if (window.ActiveXObject) {
        try {
            return new ActiveXObject('Msxml2.XMLHTTP');
        } catch (e){}
        try {
            return new ActiveXObject('Microsoft.XMLHTTP');
        } catch (e){}
    }
    return null;
}

Установка обработчика событий, открытие соединения и отправка запросов

Эти вызовы выглядят так:

req.onreadystatechange = processReqChange;
req.open(<"GET"|"POST"|...>, <url>, <asyncFlag>);

После определения всех параметров запроса его остается только отправить. Делается это функцией send(). Если необходимо передать на сервер POST-данные, их надо подставить в качестве параметра для этой функции. POST-данные должны быть свернуты в URL-escaped строку (кодировка UTF-8). Другими словами эта строка будет иметь вид, который мы привыкли видеть в командной строке браузера, при передаче данных методом GET. При отправке GET-запроса для версии без ActiveX необходимо указать параметр null, в остальных случаях можно не указывать никаких параметров. Не будет ошибкой, если для GET всегда будет указан параметр null:

req.send(null);

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

var req;

function loadXMLDoc(url)
{
    req = null;
    if (window.XMLHttpRequest) {
        try {
            req = new XMLHttpRequest();
        } catch (e){}
    } else if (window.ActiveXObject) {
        try {
            req = new ActiveXObject('Msxml2.XMLHTTP');
        } catch (e){
            try {
                req = new ActiveXObject('Microsoft.XMLHTTP');
            } catch (e){}
        }
    }

    if (req) {
        req.onreadystatechange = processReqChange;
        req.open("GET", url, true);
        req.send(null);
    }
}

function processReqChange()
{
    // только при состоянии "complete"
    if (req.readyState == 4) {
        // для статуса "OK"
        if (req.status == 200) {
            // здесь идут всякие штуки с полученным ответом
        } else {
            alert("Не удалось получить данные:\n" +
                req.statusText);
        }
    }
}

Код всего AJAX-приложения:

JavaScript’овая часть:

var req;
var reqTimeout;

function loadXMLDoc(url) {
    req = null;
    if (window.XMLHttpRequest) {
        try {
            req = new XMLHttpRequest();
        } catch (e){}
    } else if (window.ActiveXObject) {
        try {
            req = new ActiveXObject('Msxml2.XMLHTTP');
        } catch (e){
            try {
                req = new ActiveXObject('Microsoft.XMLHTTP');
            } catch (e){}
        }
    }

    if (req) {
        req.onreadystatechange = processReqChange;
        req.open("GET", url, true);
        req.send(null);
        reqTimeout = setTimeout("req.abort();", 5000);
    } else {
        alert("Браузер не поддерживает AJAX");
    }
}

function processReqChange() {
    document.form1.state.value = stat(req.readyState); 
    
    
    if (req.readyState == 4) {
        clearTimeout(reqTimeout);
        
        document.form1.statusnum.value = req.status; 
        document.form1.status.value = req.statusText; 
        
        // only if "OK"
        if (req.status == 200) {
            document.form1.response.value=req.responseText;
        } else {
            alert("Не удалось получить данные:\n" + req.statusText);
        }
    }  
}

function stat(n)
{
  switch (n) {
    case 0:
      return "не инициализирован";
    break;
      
    case 1: 
      return "загрузка...";
    break;
    
    case 2: 
      return "загружено";
    break;
    
    case 3: 
      return "в процессе...";
    break;
      
    case 4: 
      return "готово";
    break;
    
    default:
      return "неизвестное состояние";  
  }  
}

function requestdata(params)
{
  loadXMLDoc('examples/httpreq.php'+params);
}

HTML-форма:

<form name=form1>
<table width=100% style="font-size: 100%">
<tr>
<td width=30% valign=top>Состояние запроса</td>
<td width=70%><input size=25 disabled type=text name=state value=""></td>
<tr>
</tr>
<td valign=top>Код статуса</td>
<td><input disabled size=2 type=text name=statusnum value=""> <input disabled size=19 type=text name=status value=""></td>
</tr>
<tr>
<td valign=top>Данные от сервера</td>
<td><textarea rows=6 name=response></textarea></td>
</tr>
<tr>
<td>Строка GET-запроса<td>
<td></td>
</tr>
</table>
<input type=text name=getparams value="?"> <input type=button onclick="requestdata(getparams.value);" value="GET">
</form>

PHP-файл:

<?php
header("Content-type: text/plain; charset=windows-1251");
header("Cache-Control: no-store, no-cache, must-revalidate");
header("Cache-Control: post-check=0, pre-check=0", false);

echo "Hello world!\n\n"; 

if (isset($a))
{
  for ($i=1; $i < 10000; $i++)
  {
    echo 'Это тестовая строка. ';
    if (($i % 1000) == 0) flush();	
  }
}

if (count($_GET) > 0)
{
  echo "\n\nПередано GET'ом\n"; print_r($_GET);
}
?>

Известные проблемы

Проблема с кешированием в Microsoft Internet Explorer

Internet Explorer кеширует GET-запросы. Те авторы, которые не знакомы с кешированием HTTP, ожидают, что GET-запросы не кешируются, или что кеш может быть обойдён, как в случае нажатия кнопки обновления. В некоторых ситуациях избегание кеширования действительно является ошибкой. Одним из решений является использование метода POST, который никогда не кешируется; однако он предназначен для других операций. Другим решением является использование метода запроса GET, включающего уникальную строку запроса с каждым вызовом, как показано на примере ниже.

req.open("GET", "xmlprovider.php?hash=" + Math.random());

или установки заголовка Expires на прошедшую дату в вашем скрипте, который генерирует содержимое XML. В PHP это будет так:

header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");  // disable IE caching
header("Last-Modified: " . gmdate( "D, d M Y H:i:s") . " GMT"); 
header("Cache-Control: no-cache, must-revalidate"); 
header("Pragma: no-cache");

В сервлетах Java это будет так:

response.setHeader("Pragma", "no-cache");
response.setHeader("Cache-Control", "must-revalidate");
response.setHeader("Cache-Control", "no-cache");
response.setHeader("Cache-Control", "no-store");
response.setDateHeader("Expires", 0);

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

req.open("GET", "xmlprovider.php");
req.setRequestHeader("If-Modified-Since", "Sat, 1 Jan 2000 00:00:00 GMT");
req.send(null);

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

См. также

• AJAX

Ссылки

Реализация в браузерах

• Apple Safari и KDE Konqueror
• Microsoft IXMLHTTPRequest
• Mozilla XMLHttpRequest object HowTo
• Mozilla XML Extras
• Opera для компьютеров и для мобильных телефонов

Учебные руководства

• XMLHTTPRequest: описание, применение, частые проблемы
• Сверхдинамичные веб-интерфейсы

Стандарты

• Создана рабочая группа по стандартизации XMLHTTPRequest во всех браузерах

Литература

• Дейв Крейн, Эрик Паскарелло, Даррен Джеймс. AJAX в действии: технология - Asynchronous JavaScript and XML = Ajax in Action. — М.: «Вильямс», 2006. — С. 640. — ISBN 1-932394-61-3.
• Дари К., Бринзаре Б., Черчез-Тоза Ф., Бусика М. AJAX и PHP: разработка динамических веб-приложений. — СПб.: Символ Плюс, 2006. — С. 336. — ISBN 5-93286-077-4.