XMLHttpRequest (AJAX)

Кафедра: АСОИиУ

Лабораторная Работа

На тему: XMLHttpRequest (AJAX)

XMLHttpRequest (AJAX) – отправка и обработка ответов http-запросов с помощью JavaScript Методы объекта XMLHttpRequest

Все нижеизложанные методы и свойства – общие для Internet Explorer 5, Mozilla, Netscape 7, и соответственно, использовать их можно безопасно.

Abort()

Обрывает текущий запрос

GetAllResponseHeaders()

Возвращает полный набор заголовков ответа (названий и значений) в виде строки

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

Текстовое сообщение статуса

Здесь все необходимые свойства и методы этого объекта, которые помогут нам решить наш таск. Опишем последовательность наших действий:

Алгоритм:

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

2. Объявление обработчика события onreadystatechange нашего экземпляра.

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

4. Посыл запроса.

Алгоритм незамысловат, но, учитывая кое-какие нюансы (и учитывая, что мы учимся:)), конечно же, рассмотрим его подробней:

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

Для InternetExplorer:

Var request = new ActiveXObject(“Microsoft. XMLHTTP”);

Для всех остальных:

Varrequest = newXMLHttpRequest();

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

Далее по плану – создание обработчика событий и открытие соединения. Это весьма просто:

Request. onreadystatechange = processRequestChange;

Request. open(“GET”, url, false);

Здесь мы используем метод GET, хотя можно и POST; в общем виде это выглядет так: request. open(<“GET”|”POST”|… >, <url>, <asyncFlag>);. Функцию, являющуюся обработчиком события onreadystatechange (в нашем случае это функция – processRequestChange()), мы должны определить сами.

Ну и последний пункт – посыл запроса – метод send() (для версии без ActiveX в качестве параметра нужно передать null).

// для IE

Request. send();

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

Request. send(null);

После запуска метода send() начинает работать вышеуказанный обработчик события onreadystatechange. Собственно, этот обработчик – основная часть программы. В нем обычно перехватываются все возможные коды состояния запроса и вызываются соответствующие действия, а также перехватываются возможные ошибки.

Исходя из всего вышесказанного, JavaScript код будет примерно следущим:

Var request;

/**

* Load XMLDoc function

* Здесь в качестве параметра url при вызове мы должны указать

* backend-скрипт, который, собственно, и получит данные с сервера

*/

Function doLoad(url) {

If (window. XMLHttpRequest) {

Request = new XMLHttpRequest();

Request. onreadystatechange = processRequestChange;

Request. open(“GET”, url, true);

Request. send(null);

} else if (window. ActiveXObject) {

Request = new ActiveXObject(“Microsoft. XMLHTTP”);

If (request) {

Request. onreadystatechange = processRequestChange;

Request. open(“GET”, url, true);

Request. send();

}

}

}

/**

* Get request state text function

*/

Function getRequestStateText(code) {

Switch (code) {

Case 0: return “Uninitialized. “; break;

Case 1: return “Loading… “; break;

Case 2: return “Loaded. “; break;

Case 3: return “Interactive… “; break;

Case 4: return “Complete. “; break;

}

}

/**

* Event on request change

* Собственно, обработчик события onreadystatechange.

* Здесь мы, в зависимости от состояния запроса,

* будем скрывать / показывать слои “Загрузка данных”,

* само поле данных и т. д.

*/

Function processRequestChange() {

Document. getElementById(“resultdiv”). style. display = ‘none’;

Document. getElementById(“state”). value = getRequestStateText(request. readyState);

AbortRequest = window. setTimeout(“request. abort(); “, 10000);

// если выполнен

If (request. readyState == 4) {

ClearTimeout(abortRequest);

Document. getElementById(“statuscode”). value = request. status;

Document. getElementById(“statustext”). value = request. statusText;

// если успешно

If (request. status == 200) {

Document. getElementById(“resultdiv”). style. display = ‘block’;

Document. getElementById(“responseHTML”). innerHTML = request. responseText;

} else {

Alert(“Не удалось получить данные: n” + request. statusText);

}

Document. getElementById(“loading”). style. display = ‘none’;

}

// иначе, если идет загрузка или в процессе – показываем слой “Загружаются данные”

Else if (request. readyState == 3 || request. readyState == 1) {

Document. getElementById(“loading”). style. display = ‘block’;

}

}

Теперь HTML-формы нашего примера:

<input type=”text”

Id=”search”

Value=”Введите первые буквы ника”

OnFocus=”this. value=”; document. getElementById(‘resultdiv’). style. display=’none’; “

/>

<input type=”button”

Value=”Поиск”

OnClick=”doLoad(‘ajaxsearch. php? search=’+document. getElementById(‘search’). value);”

/><br /><br />

Дополнительная информация о выполнении запроса: <br /><br />

<table>

<tr>

<td>Состояние запроса: </td>

<td><input type=”text” id=”state” disabled=”true” /></td>

</tr>

<tr>

<td>Код статуса: </td>

<td>

<input type=”text” id=”statuscode” disabled=”true” />

<input type=”text” id=”statustext” disabled=”true” />

</td>

</tr>

</table>

Обратите внимание на фрагмент, выделенный зеленным цветом – событие onClick кнопки “Поиск”. Мы вызываем функцию doLoad(. .), в качестве параметра которой передаем адрес backend-скрипта, выполняющего поиск в базе зарегистрированного пользователя. О backend-скрипе чуть позже, имя его мы определили как ajaxsearch. php. Также GET-параметром скрипту мы передаем переменную search, со значением, взятым из поля ввода для ника.

И, как было сказано выше, объявим дополнительные HTML-элементы (в нашем случае – это невидимые слои) для отображения полученного содержимого и окна загрузки с возможностью отмены:

<div id=”resultdiv” style=”display: none; “>

Резульаты поиска:

<span id=”responseHTML”></span>

</div>

<div id=”loading”

Style=”

Position: absolute;

Top: 450px;

Left: 550px;

Display: none;

Width: 125px;

Height: 40px;

Font-family: Verdana;

Font-size: 11pt;

Border: 1px solid #BBBBBB;

Background: #EEEEEE;

Padding: 5px 5px 5px 5px;

>

Loading data…

<div id=”canselloading”

Style=”

Background: red;

Border: 1px solid #000000;

Color: #FFFFFF;

Padding: 2px 2px 2px 2px;

Cursor: pointer;

OnClick=”

Request. abort();

Document. getElementById(‘loading’). style. display = ‘none’;

Return false;

>Cansel

</div>

</div>

Ну что ж, с frontend’ом разобрались, переходим к backend’у – скрипт ajaxsearch. php. И вновь мы сталкиваемся с небольшими нюансами: для того, чтобы PHP-скрипт корректно работал с XMLHttpRequest, он (скрипт) должен посылать ряд заголовков. А именно: тип содержимого и его кодировку (особенно важно, если вы работаете с кириллицей), а также параметры кеширования – любое кеширование должно быть отключено (ну это и понятно – необходимо иметь свежую информацию).

Послать эти заголовки можно, примерно, так:

Header(“Content-type: text/html; charset=windows-1251”);

Header(“Cache-Control: no-store, no-cache, must-revalidate”);

Header(“Cache-Control: post-check=0, pre-check=0”, false);

И еще одна особенность: если вы будете выводит данные в формате text/plane (в нашем случае – text/html, поэтому нас это не каснется, но все же – чтобы знать), помните, что спецсимволы такие как n, t, r и т. д., обрабатываются по умолчанию только в строках с двойными кавычками:

// т. е. правильно так

Print”MessagenFromAJAX”;

// а не так!

Print ‘MessagenFromAJAX’;

Ну и теперь весьма банальный PHP-скрипт получения данных из базы (а банальный, потому что предполагается, что у вас уже есть навыки работы с базами данных в 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);

/**

* Хост, логин и пароль базы данных

* (вам, естественно, нужно заменить на свои значения)

*/

$dbhost = “localhost”;

$dblogin = “root”;

$dbpassword = “root”;

/**

* Коннектимся к базе, выполняем

* запрос, получаем результат

*/

@mysql_connect($dbhost, $dblogin, $dbpassword) or die(“Unable to connect to database. “);

@mysql_select_db(“MYDATABASE”) or die(“Unable to select database”);

$sql = “SELECT * FROM users WHERE nick LIKE ‘%”. $_GET [“search”]. “%’ ORDER BY nick”;

$result = mysql_query($sql);

Print “Найдено по запросу: “. mysql_num_rows($result);

/**

* Если есть ряды, выводим таблицу

*/

If (mysql_num_rows($result) > 0) {

Print “<table>”;

Print “<tr>”;

Print “<td>NickName</td>”;

Print “<td>RealName</td>”;

Print “<td>E-mail</td>”;

Print “</tr>”;

$get = $_GET [“search”] ;

While ($row = mysql_fetch_array($result)) {

Print “<tr>”;

Print “<td>”;

Print ($row [“unick”] ? preg_replace(“/($get) /i”, “<font color=’red’>1</font>”, $row [“unick”]):” “);

Print “</td>”;

Print “<td>($row [“urealname”] ? $row [“urealname”]: “&;nbsp; “) </td>”;

Print “<td>$row [“umail”] </td>”;

Print “</tr>”;

}

Print “</table>”;

}

? >


XMLHttpRequest (AJAX)