Объект XMLHTTPRequest
Объект XMLHTTPRequest.
Этот объект поддерживается в браузере Internet Explorer начиная с версии 5,
а также в браузерах Mozilla,
Netscape (начиная с
7-ой версии), а также в Safari
(с версии 1.2). Несмотря на отсутствие официального стандарта консорциума W3C, XMLHttpRequest уже
поддерживается на уровне, позволяющем говорить о нем, как о стандарте de facto.
Объект XMLHTTPRequest имеет набор атрибутов,
общих для Internet Explorer
5, Mozilla, Netscape 7 и Safari 1.2.
Ниже представлены методы объекта XMLHTTPRequest:
§
abort() – обрывает текущий запрос;
§
getAllResponseHeaders() – возвращает полный
набор заголовков ответа (названий и значений) в виде строки;
§
getResponseHeader(<headerLabel>) –
возвращает строковое значение заголовка, название которого указано в параметре
<headerLabel>;
§
open(<method>, <URL> [,
<asyncFlag>[, <userName>[, <password>]]]) – присвоение
параметров (метода, URL, и других) текущему запросу;
§
send(<content>) – отправка запроса;
§
setRequestHeader(<label>, <value>) –
установка в отправляемом запросе заголовка <label> со значением
<value>.
Свойства объекта XMLHttpRequest:
§
onreadystatechange – событие, возникающее при
смене статуса объекта;
§
readyState – значения статуса (integer), может
принимать следующие значения: 0 = неинициализирован (uninitialized); 1 = «идет
загрузка» (loading); 2 = «загружен» (loaded); 3 = «интерактивен» (interactive)
4 = «выполнен» (complete);
§
responseText – строка с возвращенными сервером
данными;
§
responseXML – DOM-совместимый объект-документ с
возвращенными сервером данными;
§
status – стандартный HTTP код статуса, например
404 (для «Not Found») или 200 (для «OK»);
§
statusText – текстовое сообщение статуса.
План работы с
объектом XMLHttpRequest можно представить следующим образом:
1)
Создание экземпляра объекта XMLHttpRequest
2)
Установка для него обработчика события
onreadystatechange
3)
Открытие соединения с указанием типа запроса,
URL и прочих параметров.
4)
Непосредственно отправка запроса.
Рассмотрим этот
план подробнее.
Метод создания экземпляра объекта XMLHttpRequest
зависит от реализации поддержки
в браузере, о чем говорилось выше. Конструкция
создания объекта отличается: в IE 5+ она реализована через ActiveXObject,
а в остальных браузерах (Mozilla, Netscape и Safari) – как встроенный
объект типа XMLHttpRequest. Итак, вызов для Internet
Explorer выглядит следующим образом:
var req = new
ActiveXObject("Microsoft.XMLHTTP");
Для остальных браузеров:
var req = new XMLHttpRequest();
Для обеспечения правильности исполнения кода
разными браузерами нужно проверять наличие объектов window.XMLHttpRequest и window.ActiveXObject,
и, в зависимости от того, какой есть, тот и применять.
Создание обработчика событий и открытие соединения выглядит
одинаково для всех браузеров:
req.onreadystatechange = processReqChange;
req.open(<"GET"|"POST"|...>,
<url>, <asyncFlag>);
Здесь лишь нужно указать нужные параметры и написать саму функцию processReqChange() (о ней ниже).
После определения всех параметров запроса его остается только
отправить. Делается это функцией send(),
для версии без ActiveX нужно указывать параметр null. После этого начинает работать вышеуказанный обработчик
событий. Он – фактически основная часть программы. В обработчике обычно
происходит перехват всех возможных кодов состояния запроса и вызов
соответствующих действий, а также перехват возможных ошибок. Ниже
для наглядности приведен фрагмент кода с использованием упомянутых функций:
var req;
function
loadXMLDoc(url) {
// для встроенного XMLHttpRequest
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
req.onreadystatechange =
processReqChange;
req.open("GET", url, true);
req.send(null); }
// для версии с ActiveX
else if
(window.ActiveXObject) {
req = new
ActiveXObject("Microsoft.XMLHTTP");
if (req) {
req.onreadystatechange =
processReqChange;
req.open("GET", url,
true);
req.send(); } } }
function
processReqChange() {
// только при состоянии "complete"
if (req.readyState == 4) {
// для статуса "OK"
if (req.status == 200) {
// здесь помещается
код для обработки полученного ответа
} else {
alert("Не
удалось получить данные:\n" +
req.statusText);
} }}
|