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

abort() - отменяет текущий запрос;

getAllResponseHeaders() - возвращает список всех HTTP-заголовков в виде строки;

getResponseHeader(headerName) - возвращает значение указанного заголовка;

open(method, URL, async, userName, password) - определяет метод, URL имя и пароль запроса; параметр async определяет, происходит ли работа в асинхронном режиме;

send(content) - отправляет запрос на сервер

setRequestHeader(label, value) - добавляет HTTP-заголовок к запросу;

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

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

readyState- возвращает текущее состояние объекта (0 — не инициализирован, 1 — открыт, 2 — отправка данных, 3 — получение данных, 4 — данные загружены).

responseText - текст ответа на запрос; responseXML - текст ответа на запрос в виде XML, который затем может быть распарсен посредством DOM

status- возвращает HTTP-статус в виде числа (404 — «Not Found», 200 — «OK» и т. д.)

statusText- возвращает статус в виде строки («Not Found», «OK» и т. д.)

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

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

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

Для остальных браузеров пишем:

var req = new XMLHttpRequest();

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

function createRequestObject()

{

if (window.XMLHttpRequest) {

// проверка наличия window.XMLHttpRequest

try {

return new XMLHttpRequest();

} catch (e){}

} else if (window.ActiveXObject) { проверка наличия window.ActiveXObject

try {

return new ActiveXObject('Msxml2.XMLHTTP');

}

} catch (e){}

}

}

return null;

}

Установка обработчика событий:

req.onreadystatechange = processReqChange;

открытие соединения

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

Отправка запросов.

После определения всех параметров запроса его остается отправить. Делается это функцией send().

При отправке GET-запроса необходимо указать параметр null или не указывать никаких параметров:

req.send(null);

Если необходимо передать на сервер POST-данные, их надо передать в качестве параметра для этой функции. POST-данные должны быть свернуты в URL-escaped строку в кодировка UTF-8 и добавлен заголовок req.setRequestHeader ("Content-Type", "application/x-www-form-urlencoded");.

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

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()

{

try { // Важно!

// только при состоянии "complete"

if (req.readyState == 4) {

// для статуса "OK"

if (req.status == 200) {

// здесь идут всякие штуки с полученным ответом

} else {

alert("Не удалось получить данные:\n" +

req.statusText);

}

}

}

catch( e ) { }

}

Код всего 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);

}

?>