Лаба3_Готля_Всех

6.050103.4157з.01.03

Изм

Лист

№ Документа

Подпись

Дата

Создание веб-страницы с использованием технологии AJAX

Лит

Лист

Листов

Студент

1

5

Проподав.

НУК им. ад. Макарова

Лабораторная работа № 4

Тема: Создание веб-страницы с использованием технологии AJAX

Цель: Научиться создавать веб-страницы с использованием технологии AJAX

Задание

Составить веб-страницу с использованием технологии AJAX для предметной области «Поиск фильмов».

1. Краткие теоретические сведенья

   1. Описание технологии AJAX

AJAX (от англ. Asynchronous Javascript and XML – «Асинхронный JavaScript и XML») – подход к построению интерактивных пользовательских интерфейсов веб-приложений, заключающийся в «фоновом» обмене данными браузера с веб-вервера. В результате, при обновлении данных, веб-страница не перезагружается полностью, и веб-приложение становится более быстрым и удобным.

AJAX – не самостоятельная технология, а концепция использования нескольких смежных технологий. AJAX базируется на двух основных принципах:

а) использование технологии динамического обращения к серверу «на лету», без перезагрузки всей страницы полностью, например:

• с использованием XMLHttpRequest (основной объект);

• через динамическое создание дочерних фреймов;

• через динамическое создание тега<script>.

б) использование DHTML для динамического изменения содержания страницы.

В качестве формата передачи данных обычно используют JSON или XML.

2. Преимущества

Перечислим основные преимущества использования технологии AJAX:

а) экономия трафика

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

б) уменьшение нагрузки на сервер

AJAX позволяет несколько снизить нагрузку на сервер к примеру, на странице работы с почтой, когда вы отмечаете прочитанные письма, серверу достаточно внести изменения в базу данных и отправить клиентскому скрипту сообщение об успешном выполнении операции без необходимости повторно создавать страницу и передавать её клиенту.

в) ускорение реакции интерфейса

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

3. Недостатки

а) отсутствие интеграции со стандартными инструментами браузера

динамически создаваемые страницы не регистрируются браузером в истории посещении страниц, поэтому не работает кнопка «Назад», предоставляющая пользователям возможность вернуться к просмотренным ранее страницам, но существуют скрипты, которые могут решить эту проблему.

Другой недостаток изменение содержимого страницы при постоянном URL заключается в невозможности сохранения закладки на желаемый материал. Частично решить эти проблемы можно с помощью динамического изменения идентификатора (части URL после #), что позволяет многие браузеры.

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

поисковые машины не могут выполнять JavaScript, поэтому разработчики должны позаботиться об альтернативных способах доступа к содержимому сайта.

в) старые методы учета статистики сайтов становятся неактуальными

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

г) усложнение проекта

перераспределяется логика обработки данных – происходит выделение и частичный перенос на сторону клиента процессов первичного форматирования данных. Это усложняет контроль целостности форматов и типов. Конечный эффект технологии может быть нивелирован необоснованным ростом затрат на кодирование и управление проектом, а также риском снижения доступности сервиса для конечных

6.050103.4157з.01.03

Лист

2

Изм

Лист

№ Документа

Подпись

Дата

пользователей.

д) требуется включенный JavaScript в браузере.

2. Ход работы

Имеется база данных из 6 таблиц в СУБД MySQL. Выбираем таблицы «Категория» (CATEGORYS), «Фильм»

(FILMS).

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

полем «Блюдо». Текст HTML разметки сохраняем в файл form_search.php (представлен в листинге 1).

С помощью технологии AJAX произведем авто заполнение поля «Блюдо». Для этого в конце файла

form_search.php добавим javascript, который будет запускать php скрипт autocomplete.php (представлен в листинге 2), как только пользователь введет как минимум одну букву. Затем ввод анализируется и появляется выпадающий список блюд, которые начинаются на введенный текст.

Результат работы автозаполнения представлен на рисунке 1.

Листинг 1 – Текст html формы (файл form_search.php)

<html>

<head>

<link href=”../lib/css/uni-form.css” media=”screen” rel=”stylesheet” type=”text/css”/>

<link href=”../lib/css/generate_form.css” media=”screen” rel=”stylesheet” type=”text/css”/>

<link href=”../lib/css/uni-form-generic.css” rel=”stylesheet” type=”text/css”/>

<link href=”../lib/css/stile.css” rel=”stylesheet” type=”text/css”/>

<script type=”text/javascript” src=”javascripts/jquery-1.2.1.js”></script>

<script type=”text/javascript” src=”javascripts/jquery.autocomplete.js”></script>

<script scr=’../lib/javascripts/uni-form.jquery.js’ type=’text/javascript’></script>

</head>

<body>

<form action=’search.php’ method=’post’ class=’uniForm’>

<fieldset class='blockLabels'>

<center><legend>Поиск фильма</legend></center><br/>

<center><legend>Введите название фильма для поиска на сайте</legend></center><br/>

</fieldset>

<fieldset class='inLineLabels'>

<div class=’ctrlHolder’>

<label><em>*</em><strong>Фильм</strong></label>

<input id=’ film’ name=’ film’ class=’textInput’ type=’text’ value=””>

<div class=’formHint’>Введите фильм для поиска</div>

</div>

</fieldset>

<fieldset class=blockLabels>

<div class=”buttonHolder”>

<button type=”submit” class=”submitButton”>Найти</button>

</div>

</fieldset>

</form>

</body>

</html>

<script type=”text/javascript”>

$ (document) .ready (function(){

// – – – Авто заполнение – – –

function liFormat (row, I, num) {

var result = row[0] + ‘<p class=qnt>’ + row[1];

return result;

}

6.050103.4157з.01.03

Лист

3

Изм

Лист

№ Документа

Подпись

Дата

function selectItem(li) {

if(li.extra) var sValue = li.extra[2];

else var sValue = li.selectValue;

}

$(“# film”) .autocomplete(“autocomplete.php”, {

Delay:10,

minChars:1,

matchSubset:1,

autoFill:true,

matchContains:1,

chacheLength:10,

selectFirst:true,

formatItem:liFormat,

maxItemsToShow:10,

onItemSelect:selectItem

});

});

</script>

В связи с тем, что используется библиотека jQuery, кратко опишем список опций используемых в

яваскрипте:

autoFill – этот параметр, контролирует выводимый текст, в поле ввода будет подставлено (и выделено)

первое подходящее значение из списка. Если ввод продолжается, то в поле ввода и далее будет подставляться подходящее значение, но уже с учетом введенного текста. (По умолчанию: false).

lineSeparator – символ, который разделяет строки в данных, возвращаемых сервером.(По умолчанию:

“\n”).

cellSeparator – символ, который разделяет «ячейки» в строках данных, возвращаемых сервером. (По

умолчанию: “|”).

minChars – минимальное число символов, которое пользователь должен напечатать перед тем, как

будет активизирован запрос. (По умолчанию: 1).

delay – задержка в миллисекундах. Если в течение этого времени пользователь не нажимал клавиши,

активизируется запрос. (По умолчанию: 400).

Chachelength – Число ответов от серверов, сохраняемых в кэше. Если установлено в 1 – кэширование

данных отключено. (По умолчанию: 1).

maxItemToShow – ограничивает число результатов, которые будут показаны в выпадающем списке. Если

набор данных содержит сотни элементов, может быть неудобно показывать весь список пользователю. Рекомендованное значение 10. (По умолчанию: -1).

selectFirst – если установить в true, то по нажатию клавиши Tab или Enter будет выбрано то значение,

которое в данный момент установлено в элементе ввода. Если же имеется выбранный вручную («подсвеченный») результат из выпадающего списка, то будет выбран именно он. (По умолчанию: false)

formatItem – JavaScript функция, которая поможет обеспечить дополнительную разметку элементов

выпадающего списка. Функция будет вызываться для каждого элемента LI. Возвращаемые от сервера данные могут быть отображены в LI выпадающего списка. Принимает три параметра: строка результата, позиция строки в списке результатов, общее число элементов в списке результатов. (По умолчанию: none).

onItemSelect – JavScript функция, которая будет вызвана, когда элемент списка выбран. Принимает

единственный параметр – выбранный элемент LI. Выбранный элемент будет иметь дополнительный атрибут «extra», значением которого будет являться массив всех ячеек строки, которая была получена в качестве ответа от сервера. (По умолчанию: none).

Листинг 2 – текст php скрипта (файл autocomplete.php)

<?php

header(‘Content0type: text/html; charset=utf-8’);

if ($_SERVER[‘HTTP_X_REQUESTED_WITH’] == ‘XMLHttpRequest’) {

if($_GET[‘q’]) {

$dbh = mysql_connect(‘ecoratercom.ipagemusql.com’, ‘usertest’, ‘123456789’) or die(mysql_error());

$db = mysql_select_db(‘myrestaurant’) or die(mysql_error());

6.050103.4157з.01.03

Лист

4

Изм

Лист

№ Документа

Подпись

Дата

$sql=”SELECT FILMS.NAME, FILMS.NAME FROM `FILMS` JOIN `CATEGORYS` ON

`ID_ CATEGORY `= CATEGORYS.ID AND `IN_MENU`=1;”

Mysql_query(“SET CHARSET UTF8”, $dbh) or die(mysql_error());

$result = mysql_query($sql, $dbh);

while($base = mysql_fetch_row($result)) {

print $base[0].”|”.$base[1].”\n”;

}

Mysql_close($dbh);

}

}

?>

Рисунок 1 – Результат работы автозаполнения

Вывод

В лабороторной работе № 3 я научился создавать веб-страницы с использованием технологии AJAX.

Создал html форму для поиска фильма из базы данных MySQL и получения результата. При вводе в

форму срабатывает скрипт, для автоматического заполнения, в виде выпадающего списка с перечнем подходящих фильмов и выбора из него.

6.050103.4157з.01.03

Лист

5

Изм

Лист

№ Документа

Подпись

Дата