1) Классическая модель веб-приложения

• Пользователь заходит на веб-страницу и нажимает на какой-нибудь её элемент.

• Браузер формирует и отправляет запрос серверу.

• В ответ сервер генерирует полностью новую веб-страницу и отправляет её браузеру и т. д.

2) Модель ajax

• Пользователь заходит на веб-страницу и нажимает на какой-нибудь её элемент.

• Скрипт (на языке JavaScript) определяет, какая информация необходима для обновления страницы.

• Браузер отправляет соответствующий запрос на сервер.

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

• Скрипт вносит изменения с учётом полученной информации (без полной перезагрузки страницы).

Часто сервер передаёт не готовый HTML-код, а только данные; а HTML-элементы создаются исходя из этих данных, с использованием методов модификации DOM. При этом в качестве формата передачи данных обычно используется XML

Использование объекта XMLHttpRequest)

Разберёмся с возможностями, которые предоставляет нам объект XMLHttpRequest. Попробуем реализовать на JavaScript работу с удаленным сервером посредством прямой отправки http-запросов и обработкой ответов. Объект XMLHttpRequest, который позволяет посылать HTTP-запросы к удаленному серверу и принимать страницу-ответ сервера как в виде текста, так в виде DOM (объектной модели документа).

Впервые объект XMLHttpRequest внедрила в свой Internet Explorer 5 фирма Microsoft в виде ActiveX-компоненты. Позже он появился также в Mozilla, Netscape (начиная с 7-ой версии) , но работает несколько по другому (не в виде ActiveX-компоненты).

Методы объекта XMLHttpRequest

Ниже представлены атрибуты, общие для Internet Explorer 5, Mozilla, Netscape 7 и др.:

• 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

• Установка для него обработчика события onreadystatechange

• Открытие соединения с указанием типа запроса, URL и прочих параметров.

• Непосредственно отправка запроса.

Рассмотрим этот алгоритм подробнее.

1) Создание экземпляра объекта XMLHttpRequest. Здесь как раз зашито то разделение в реализации браузеров, о котором говорилось выше. Конструкция создания объекта отличается: в IE 5+ она реализована через ActiveXObject, а в остальных браузерах (Mozilla, Netscape и Safari) — как встроенный объект типа XMLHttpRequest.

Итак, вызов для Internet Explorer:

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

для остальных:

var req = new XMLHttpRequest();

То есть, для обеспечения кроссбраузерности нашего кода, нужно лишь проверять наличие объектов window.XMLHttpRequest и window.ActiveXObject, и, в зависимости от того, какой есть, тот и применять):

2) создание обработчика событий и открытие соединения. Эти вызовы выглядят просто и одинаково:

req.onreadystatechange = processReqChange;

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

Здесь лишь нужно указать нужные параметры, и, конечно же, написать саму функцию processReqChange() (о ней ниже).

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

// для IE

req.send();

// для остальных

req.send(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);

}

}

}

Итак, более подробный исходный код JavaScript'овой части:

var req;

function loadXMLDoc(url) {

if (window.XMLHttpRequest) {

req = new XMLHttpRequest();

req.onreadystatechange = processReqChange;

req.open("GET", url, true);

req.send(null);

} else if (window.ActiveXObject) {

req = new ActiveXObject("Microsoft.XMLHTTP");

if (req) {

req.onreadystatechange = processReqChange;

req.open("GET", url, true);

req.send();

}

}

}

function processReqChange() {

document.form1.state.value = stat(req.readyState);

ab = window.setTimeout("req.abort();", 5000);

if (req.readyState == 4) {

clearTimeout(ab);

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

}

Некоторые особенности PHP-скриптов работающих с XMLHttpRequest

Для корректной работы с XMLHttpRequest, ваш 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);

Если планируется вывод в формате text/plain (как у меня), необходимо учесть, что специальные символы (типа /n,/r,/t..) обрабатываются по умолчанию только в строках с двойными кавычками ("").

Пример:

<?

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 "Хелло ворлд!\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);

?>

Задание:

Модифицировать результаты выполнения 5-ой лабораторной работы, путем использования технологии AJAX(документ оформить таким образом, чтобы при переходе по ссылкам страница не перегружалась).

Контрольные вопросы

1. Какой JavaScriptобъект обеспечивает работу черезHTTP-протокол?

2. В каком формате обычно возвращаются данные?

3. Какие заголовки необходимо посылать для корректной работы?