Банк рефератов содержит более 364 тысяч рефератов, курсовых и дипломных работ, шпаргалок и докладов по различным дисциплинам: истории, психологии, экономике, менеджменту, философии, праву, экологии. А также изложения, сочинения по литературе, отчеты по практике, топики по английскому.
Полнотекстовый поиск
Всего работ:
364150
Теги названий
Разделы
Авиация и космонавтика (304)
Административное право (123)
Арбитражный процесс (23)
Архитектура (113)
Астрология (4)
Астрономия (4814)
Банковское дело (5227)
Безопасность жизнедеятельности (2616)
Биографии (3423)
Биология (4214)
Биология и химия (1518)
Биржевое дело (68)
Ботаника и сельское хоз-во (2836)
Бухгалтерский учет и аудит (8269)
Валютные отношения (50)
Ветеринария (50)
Военная кафедра (762)
ГДЗ (2)
География (5275)
Геодезия (30)
Геология (1222)
Геополитика (43)
Государство и право (20403)
Гражданское право и процесс (465)
Делопроизводство (19)
Деньги и кредит (108)
ЕГЭ (173)
Естествознание (96)
Журналистика (899)
ЗНО (54)
Зоология (34)
Издательское дело и полиграфия (476)
Инвестиции (106)
Иностранный язык (62792)
Информатика (3562)
Информатика, программирование (6444)
Исторические личности (2165)
История (21320)
История техники (766)
Кибернетика (64)
Коммуникации и связь (3145)
Компьютерные науки (60)
Косметология (17)
Краеведение и этнография (588)
Краткое содержание произведений (1000)
Криминалистика (106)
Криминология (48)
Криптология (3)
Кулинария (1167)
Культура и искусство (8485)
Культурология (537)
Литература : зарубежная (2044)
Литература и русский язык (11657)
Логика (532)
Логистика (21)
Маркетинг (7985)
Математика (3721)
Медицина, здоровье (10549)
Медицинские науки (88)
Международное публичное право (58)
Международное частное право (36)
Международные отношения (2257)
Менеджмент (12491)
Металлургия (91)
Москвоведение (797)
Музыка (1338)
Муниципальное право (24)
Налоги, налогообложение (214)
Наука и техника (1141)
Начертательная геометрия (3)
Оккультизм и уфология (8)
Остальные рефераты (21697)
Педагогика (7850)
Политология (3801)
Право (682)
Право, юриспруденция (2881)
Предпринимательство (475)
Прикладные науки (1)
Промышленность, производство (7100)
Психология (8694)
психология, педагогика (4121)
Радиоэлектроника (443)
Реклама (952)
Религия и мифология (2967)
Риторика (23)
Сексология (748)
Социология (4876)
Статистика (95)
Страхование (107)
Строительные науки (7)
Строительство (2004)
Схемотехника (15)
Таможенная система (663)
Теория государства и права (240)
Теория организации (39)
Теплотехника (25)
Технология (624)
Товароведение (16)
Транспорт (2652)
Трудовое право (136)
Туризм (90)
Уголовное право и процесс (406)
Управление (95)
Управленческие науки (24)
Физика (3463)
Физкультура и спорт (4482)
Философия (7216)
Финансовые науки (4592)
Финансы (5386)
Фотография (3)
Химия (2244)
Хозяйственное право (23)
Цифровые устройства (29)
Экологическое право (35)
Экология (4517)
Экономика (20645)
Экономико-математическое моделирование (666)
Экономическая география (119)
Экономическая теория (2573)
Этика (889)
Юриспруденция (288)
Языковедение (148)
Языкознание, филология (1140)

Лабораторная работа: XMLHttpRequest (AJAX)

Название: XMLHttpRequest (AJAX)
Раздел: Рефераты по информатике, программированию
Тип: лабораторная работа Добавлен 01:38:22 03 июня 2009 Похожие работы
Просмотров: 19 Комментариев: 4 Оценило: 1 человек Средний балл: 5 Оценка: неизвестно     Скачать

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

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

На тему: 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>";

}

? >

Оценить/Добавить комментарий
Имя
Оценка
Комментарии:
Где скачать еще рефератов? Здесь: letsdoit777.blogspot.com
Евгений06:53:52 19 марта 2016
Где скачать еще рефератов? Здесь: letsdoit777.blogspot.com
Евгений22:40:50 18 марта 2016
Кто еще хочет зарабатывать от 9000 рублей в день "Чистых Денег"? Узнайте как: business1777.blogspot.com ! Cпециально для студентов!
13:22:41 25 ноября 2015
www.Imaci.ru Здесь можно скачать его на IPhone.
Артур07:28:46 10 января 2011Оценка: 5 - Отлично

Работы, похожие на Лабораторная работа: XMLHttpRequest (AJAX)

Назад
Меню
Главная
Рефераты
Благодарности
Опрос
Станете ли вы заказывать работу за деньги, если не найдете ее в Интернете?

Да, в любом случае.
Да, но только в случае крайней необходимости.
Возможно, в зависимости от цены.
Нет, напишу его сам.
Нет, забью.



Результаты(151311)
Комментарии (1844)
Copyright © 2005-2016 BestReferat.ru bestreferat@mail.ru       реклама на сайте

Рейтинг@Mail.ru