Лекция: Запрос к серверу. Класс XMLHttpRequest
Класс XMLHttpRequest впервые был реализован компанией Microsoft в браузере Internet Explorer 5.0 в виде объекта ActiveX, доступного через JScript. Программисты проекта Mozilla разработали совместимую версию класса XMLHttpRequest. В дальнейшем эта возможность также была реализована компаниями Apple, Opera и другими.
Класс XMLHttpRequest входит в набор API (XMLHTTP), используемый в JavaScript, для пересылки данных по HTTP-протоколу между браузером и веб-сервером. Кроме пересылки XML, по XMLHTTP можно обмениваться данными формы или текстовыми строками. Объект-запрос XMLHttpRequest выполняет одну из функций браузера- формирование и передачу запроса Web-серверу.
Запрос надо создать, открыть методом open(), а затем передать его методом send().
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
req.onreadystatechange = processReqChange;
req.open(«GET», url, true);
req.send(null); }
В методе open() третий параметр async – флаг асинхронного выполнения. Если
async= true, метод send() сразу же вернет управление сценарию. В этом случае пользователь сможет продолжить работу с документом, пока запрос будет пересылаться к серверу и обратно. При получении ответа от сервера, управление должно перейти к функции обратного вызова, задаваемую свойством onreadystatechange класса XMLHttpRequest. С помощью свойства readyState проверяется состояние процесса обработки запроса (readyState = 4 окончание), необходимые данные извлекаются из свойств responseText или responseXML.
Методы класса XMLHttpRequest
abort() — отменяет текущий запрос;
getAllResponseHeaders() — возвращает список всех HTTP-заголовков в виде строки;
getResponseHeader(headerName) — возвращает значение указанного заголовка;
open(method, URL, async, userName, password) — определяет метод, URL, имя и пароль запроса; async=true/false определяет, происходит ли работа в асинхронном режиме;
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 объект XMLHttpRequest реализован через 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»);.
После этого начинает работать вышеуказанный обработчик событий. Он — фактически основная часть программы. В обработчике обычно происходит перехват всех возможных кодов состояния запроса и вызов соответствующих действий, а также перехват возможных ошибок. Пример куска кода:
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);
}
?>