Модель ajax:

Между загруженной в браузер страницей и сервером появляется еще одна прослойка - уровень AJAX.

Пользователь загружает web-страницу и генерирует событие.

Скрипт определяет, какая информация необходима для обновления страницы и передает ее уровню AJAX.

AJAX отправляет запрос на сервер.

Сервер возвращает уровню AJAX только ту часть документа, на ко­торую пришел запрос или только данные в формате XML.

Уровень AJAX вызывает код на языке JavaScript, который вносит изменения на страницу с использованием методов DOM без полной перезагрузки. Для передачи данных обычно используется XML файл, который формируется динамически.

Класс xmlHttpRequest

Для запроса к серверу в модели Ajax используется класс XMLHttpRequest, который впервые был реализован компанией Microsoft в браузере IE 5.0 в виде объекта ActiveX, доступного через JScript. Программисты проекта Mozilla разработали свою версию класса XMLHttpRequest, в дальнейшем также реализованную компаниями Apple, Opera и другими. Класс XMLHttpRequest входит в набор API (XMLHTTP), используемый в JavaScript, для пересылки по HTTP-протоколу документов XML, данных формы или текстовых строк. Объект-запрос XMLHttpRequest выполняет функцию HTTP запроса.

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

Свойство onreadystatechange - обработчик события при смене состояния объекта.

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

responseText - текст ответа на запрос;

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

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

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

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

open(method, URL, async, userName, password) – открыть соединение. Параметры: 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 – флаг асинхронного выполнения. Если 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) в котором указывают параметр null. Чтобы передать на сервер POST-данные, их надо пере­дать в качестве параметра для этой функции. POST-данные должны быть свернуты в URL-escaped строку в кодировка UTF-8 и добавлен заголовок req.setRequestHeader("Content-Type","application/x-www-form-urlencoded");.

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

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

//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('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);

}

?>