3.3 Приклад використання бібліотеки jQuery для обміну даними засобами Ajax
Серед застосувань бібліотеки JQuery найбільш поширеним є динамічне завантаження інформації у елементи сторінки HTML. Як приклад розглянемо задачу виведення підказки в залежності від набраного користувачем тексту в поле форми (рисунок 3.9). Для реалізації даної задачі необхідно створити три файли і розмістити їх на сервері:
1. HTML-сторінка (hint.html).
2. Програма мовою Javascript із використанням JQuery (hint.js).
3. Текстовий файл, який містить можливі підказки (hint.txt).
Рисунок 3.9. Результат роботи асинхронного завантаження даних у HTML-сторінку
HTML-сторінка містить код, який задає структуру документа (рисунок 3.10):
<C!DOCTVPE html>
<html>
<head>
<script type^'text/jauascript" src="jquery;.js"></script>
<script type="text/jauascript" src="hint.js"></script>
<meta charset=utf-8 />
<title> Приклад Jquery Ajax</title>
<style type="text/css">
#hint {border: 1px solid black; margin:0}
#hint>diu:houer {background: ttccc}
#hint {display:none; margin-left:4px>
</style>
</head>
<body>
<form>
<diu>Mido :</diu>
<input type^'text" autoconplete="off" id="city"/>
<diu id="hint"></diu>
</form>
</body>
</html>
Рисунок 3.10. HTML-код сторінки
З рисунка 3.10 видно, що для виконання задачі включено підтримку бібліотеки JQuery, а також зовнішній файл hint.js, який здійснює операції уведення-виведення. Крім того, задаються мінімально необхідні налаштування стилів (тег <style>), а також власне форма HTML із елементом city – текстовим полем та контейнером div з id=”hint” для виведення підказки.
Код програмного файлу hint.js наведено на рисунку 3.11. Особливостями роботи даної програми є використання засобів JQuery для завантаження списку даних (назв міст) з сервера в асинхронному режимі (.get()).
// ініціалізація поля уведення з id="city"
$().ready( function()
{
$<"itcity").keyup(show_hint).click(cl);
}
);
// сховати та очистити підказку
function cl(euent)
{
$("#hint").hide();
$("#hint").empty();
}
// показати підказку
function show_hint(euent)
{
// очистити застарілі підказки
cl(null)
// s - активний елемент зі списку підказок
s = euent.target
if ($(s).ual()=="") return;
// отримати список підказок, Math.random() - захист від кешування $.get ("hint .txt?,a+Math.random(), function (data) {
if (data==,,,,) return
var a = data.split('\n')
for (uar і in a) {
// якщо підказка підходить, додати її в список
if (а[і].indexOf($("#city").ual())>-1)
$("hint").append ("<diu>"+a[і]+a"</diu>")
}
// підготувати оброблювач onclick для кожної підказки всередені контейнера
$("#hint>diu").click(function(event){ $("#city").ual( $(euent.target).text());cl(null)})
// змінити стиль підказки
$("#hint>diu").сss({"font-weight":"bold"})
// якщо є підказки, показати їх
if($("#hint>div").length>0)
$("#hint").width($("#city").width()).show();
}
}
Рисунок 3.11. Код програми мовою Javascript
Функція .ready() виконується в момент завантаження сторінки, функція cl() викликається, коли необхідно приховати та очистити підказку (наприклад, при виборі зі списку), а функція show_hint() виконується при натисканні користувачем клавіші клавіатури. Крім того, використовуються засоби пошуку елементів HTML із використанням синтаксису мови CSS, зокрема #hint>div означає «знайти усі елементи div всередині елемента з id=hint.
Для прикладу файл hint.txt, який містить підказки має наступний вигляд (риcунок 3.12):
Київ
Полтава
Одеса
Львів
Луганськ
Рисунок 3.12. Вміст файлу hint.txt, який містить можливі підказки
Для спрощення реалізації у прикладі серверна частина складається лише з простого текстового файлу. В реальних умовах це може бути програма будь-якою мовою, що використовується у Web-технологіях, в тому числі з залученням різноманітних бібліотек, зокрема, CodeIgniter. При цьому обробка відбувається таким же чином, як і в традиційній моделі (з використання Ajax).
ПРОЕКТНА ЧАСТИНА