Модель ajax:
Между загруженной в браузер страницей и сервером появляется еще одна прослойка - уровень AJAX.
Пользователь загружает web-страницу и генерирует событие.
Скрипт определяет, какая информация необходима для обновления страницы и передает ее уровню AJAX.
AJAX отправляет запрос на сервер.
Сервер возвращает уровню AJAX только ту часть документа, на которую пришел запрос или только данные в формате XML.
Уровень AJAX вызывает код на языке JavaScript, который вносит изменения на страницу с использованием методов DOM без ее полной перезагрузки. Для передачи данных обычно используется XML файл, который формируется динамически.
5.6.1 Класс xmlHttpRequest
Класс XMLHttpRequest используется для запроса к серверу в модели Ajax. Класс впервые был реализован компанией Microsoft в виде объекта ActiveX, доступного через JScript. Программисты проекта Mozilla разработали свою версию класса, в дальнейшем реализованную компаниями Apple, Opera и другими. Класс XMLHttpRequest входит в набор API XMLHTTP и используется в JavaScript, для пересылки по HTTP-протоколу документов XML, данных формы или текстовых строк. Объект XMLHttpRequest выполняет функцию 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: open(method,URL, async, userName, password) – открыть соединение c параметрами: GET/POST - method, URL, async=true/false - определяет, происходит ли работа в асинхронном режиме, имя, пароль запроса;. abort() - отменяет текущий запрос; send(content) - отправляет запрос на сервер; getAllResponseHeaders() - возвращает список всех HTTP-заголовков; getResponseHeader(headerName) - возвращает значение указанного заголовка; setRequestHeader(label, value) - добавляет HTTP-заголовок к запросу. Пример создания экземпляра объекта:
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();//создание экземпляра
req.onreadystatechange = processReqChange;//обработчик событий
req.open("GET", url, true);// открытие соединения
req.send(null); }// Отправка запросов.
В методе open() третий параметр async=true/false – флаг асинхронного выполнения. Если async= true, метод send() сразу вернет управление сценарию и пользователь сможет продолжить работу с документом, пока запрос будет пересылаться к серверу и обратно. При получении ответа от сервера, управление перейдет к функции обратного вызова, задаваемую свойством onreadystatechange. С помощью свойства readyState проверяется состояние процесса обработки запроса (readyState = 4 окончание), данные извлекаются из свойств responseText или responseXML.
function processReqChange() {
try { // Важно!
if (req.readyState == 4) { // действия для статуса "OK"
if (req.status == 200) {}// здесь действия с полученным ответом
else { alert("Не удалось получить данные:\n" + req.statusText); }
}
}
catch( e ) { }
}
После задания всех параметров, запрос отправляют функцией send(). При отправке GET-запроса вызывают метод req.send(null). POST-данные, надо передать в качестве параметра для этой функции. POST-данные должны быть свернуты в URL-escaped строку в кодировке UTF-8 и добавлен заголовок
req.setRequestHeader("Content-Type","application/x-www-form-urlencoded");.
В обработчике обычно происходит перехват всех возможных кодов состояния запроса и вызов соответствующих действий, а также перехват ошибок.Приведем код всего AJAX-приложения:
<html><head>
<title> pr31: Ajax</title>
<script type="text/javascript"> //JavaScript’овая часть:
var req;
var reqTimeout;
function loadXMLDoc(url) {
req = null;
if (window.XMLHttpRequest) {
try {
req = new XMLHttpRequest();
} 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('httpreq31.php?'+params);
}
</script>
</head>
<body>
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=8 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>
</body> </html>
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 ' Передано GET ';
print_r($_GET);
}
?>
Результат:
