XMLHttpRequest (AJAX)

Лабораторная работаПомощь в написанииУзнать стоимостьмоей работы

Здесь мы используем метод GET, хотя можно и POST; в общем виде это выглядет так: request. open (<" GET" |" POST" |…>, ,);. Функцию, являющуюся обработчиком события onreadystatechange (в нашем случае это функция — processRequestChange ()), мы должны определить сами. И, как было сказано выше, объявим дополнительные HTML-элементы (в нашем случае — это невидимые слои) для отображения полученного… Читать ещё >

XMLHttpRequest (AJAX) (реферат, курсовая, диплом, контрольная)

Кафедра: АСОИиУ Лабораторная Работа На тему: XMLHttpRequest (AJAX)

XMLHttpRequest (AJAX) — отправка и обработка ответов http-запросов с помощью JavaScript

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

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

abort ()

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

getAllResponseHeaders ()

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

getResponseHeader ()

возвращает строковое значение заголовка, название которого указано в параметре.

open (, [, [, [, ]]])

Присвоение параметров (метода, URL, и других) текущему запросу.

send ()

Посылает запрос

setRequestHeader (,)

Установка в отправляемом запросе заголовка со значением

Свойства объекта 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.

Для Internet Explorer:

var request = new ActiveXObject («Microsoft. XMLHTTP»);

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

var request = new XMLHttpRequest ();

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

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

request. onreadystatechange = processRequestChange;

request. open («GET», url, false);

Ну и последний пункт — посыл запроса — метод 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 (); «, 10 000);

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

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-формы нашего примера:

id="search"

value="Введите первые буквы ника"

onFocus="this. value=''; document. getElementById ('resultdiv'). style. display='none'; «

value="Поиск"

onClick="doLoad ('ajaxsearch. php? search='+document. getElementById ('search'). value);"

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

Состояние запроса:

Код статуса:

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

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

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

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…

style="

background: red;

border: 1px solid #0;

color: #FFFFFF;

padding: 2px 2px 2px 2px;

cursor: pointer;

onClick="

request. abort ();

document. getElementById ('loading'). style. display = 'none';

return false;

>Cansel

Ну что ж, с 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 «MessagenFrom AJAX» ;

// а не так!

print 'MessagenFrom AJAX';

Ну и теперь весьма банальный 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 «

«;

print «

«;

print «

«;

print «

«;

print «

«;

print «

«;

$get = $_GET [» search" ] ;

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

print «

«;

print «

«;

print «

«;

print «

«;

print «

«;

}

print «

NickName

RealName

E-mail

print ($row [" unick" ]? preg_replace («/($get) /i», «1″, $row [» unick" ]):" «);

print «

($row [" urealname" ]? $row [" urealname" ]: " «)

$row [» umail" ]

" ;

}

? >

Показать весь текст

Заполнить форму текущей работой