Використання XForms і Ajax для створення поля форми з автозаповненням

попередні вимоги
Визначення: підказка для поля з автозаповненням
Створення поля з автозаповненням за допомогою Ajax
HTML для поля з автозаповненням
Лістинг 1. HTML для поля з автозаповненням
JavaScript, щоб попросити
Лістинг 2. JavaScript-функція suggest
Java-код для створення підказок
Лістинг 3. Сервлет Suggest
Лістинг 4. suggestions.jsp
JavaScript-код для обробки відповіді
Лістинг 5. Оброблювач відповіді: JavaScript-функція handleSuggestions
Малюнок 1. Заповнити форму з використанням Ajax
Створення підказок за допомогою XForms і Ajax
парадигма XForms
Налаштування XForm: Модель запиту
Лістинг 6. Модель XForms: Дані запиту
Налаштування XForm: Модель відповіді
Лістинг 7. Модель XForms: Дані відповіді
Налаштування XForm: Дія сервера
Лістинг 8. Модель XForms: submission
Вид XForms: Введення даних
Лістинг 9. Вид XForms
Використання Java на стороні сервера
Обробка відповіді
Лістинг 10. Відображення результатів зі зв'язаними XForm-даними
Лістинг 11. Нова функція setValue
резюме
Ресурси для скачування

попередні вимоги

XForms - це стандартизована технологія, проте все ще не реалізована за замовчуванням в більшості браузерів. У даній статті використовується модуль Mozilla XForms . Цей модуль може застосовуватися в будь-яких заснованих на механізмі Mozilla Gecko браузерах, таких як Firefox, Seamonkey і Flock. Весь використовуваний тут XForms-код є стандартним, тому всі сумісні XForms-продажу повинні бути аналогічними, але в даному випадку я тестував тільки модуль Mozilla XForms версії 0.8, встановлений на Mozilla Firefox 2.0. Аналогічно, JavaScript-код тестувався тільки на Firefox.

Все Ajax-додатки повинні запитувати дані з будь-якого сервера. У даній статті в якості серверної технології використовується Java ™. Отже, необхідна наявність Java 1.5 + разом з Java Web-контейнером, які реалізують специфікацію Servlet 2.4. Ця програма тестувалася з Apache Tomcat 5.5 .

Визначення: підказка для поля з автозаповненням

У даній статті ви разработаете поле форми з автозаповненням. Це прототип функціональності Ajax. Одним з додатків, популяризувати цю функціональність, є Google Suggest. В Google Suggest ви починаєте вводити ключове слово для пошуку, а додаток пропонує (підказує) пошукові вирази, грунтуючись на їх популярності. Це корисна функція для користувачів, оскільки їм не треба вводити пошуковий вираз повністю. Тим самим запобігають помилки введення. Даний технічний прийом зараз широко використовується в Web-додатках. Давайте розглянемо, як ця функціональність зазвичай реалізується за допомогою Ajax.

Створення поля з автозаповненням за допомогою Ajax

З точки зору функціональних можливостей Ajax поле з автозаповненням є досить зрозумілим. Ви будете використовувати JavaScript для перехоплення події введення користувачем даних в поле форми. Потім виконайте асинхронний запит на сервер для отримання підказок, заснованих на інформації, введеної користувачем на даний момент. Сервер поверне підказки. JavaScript-обробник обробить їх і змінить HTML DOM, щоб відобразити підказки і дати можливість кінцевому користувачеві вибрати їх зі списку. Розглянемо кожен з цих кроків зі створення поля з автозаповненням за допомогою Ajax. Почнемо з HTML для цього поля.

HTML для поля з автозаповненням

HTML для поля з автозаповненням досить простий. Він приведений в лістингу 1.

Лістинг 1. HTML для поля з автозаповненням

Тут все зрозуміло. Є звичайне текстове поле, але його атрибути дуже важливі. Перш за все, атрибут onkeyup використовується для оголошення того, що при кожному виникненні події onkeyup повинна викликатися JavaScript-функція під назвою suggest. Ми розглянемо цю функцію в наступному розділі. Відзначимо також, що атрибут autocomplete встановлений в Off. Це оберігає поля форми від автозаповнення браузером. Нарешті, зверніть увагу на те, що ми створюємо порожній елемент div. Ми заповнимо цей div підказками. Розглянемо, як запросити ці підказки.

JavaScript, щоб попросити

Ви бачили, що текстове поле викликає функцію suggest при введенні в нього символу користувачем. Ця функція приведена в лістингу 2.

Лістинг 2. JavaScript-функція suggest

// Це не працює в IE 6 var suggestReq = new XMLHttpRequest (); function suggest () {if (suggestReq.readyState == 4 || suggestReq.readyState == 0) {var str = escape (document.getElementById ( 'tBox'). value); suggestReq.open ( "GET", '/ xfsuggest / suggest? root =' + str, true); suggestReq.onreadystatechange = handleSuggestions; suggestReq.send (null); }}

Функція suggest використовує об'єкт XMLHttpRequest для формування запиту до URL / xfsuggest / suggest. Наведений у лістингу 2 код не працює в Internet Explorer 6 або більш ранніх версіях Internet Explorer. Для Internet Explorer 6 необхідно знехтувати браузером і викликати новий ActiveXObject ( "Microsoft.XMLHTTP") для отримання об'єкта XMLHttpRequest. Після цього використовувати JavaScript для добування інформації, введеної користувачем в поле. Вона стає параметром root вашого запиту HTTP GET на сервер. Нарешті, зверніть увагу на те, що обробник відповіді налаштовується на JavaScript-функцію handleSuggestions. Ми розглянемо її пізніше. Тепер подивимося, як ваш сервер буде обробляти цей запит.

Java-код для створення підказок

Однією з чудових особливостей таких технологій на стороні клієнта як Ajax (і XForms) є те, що вони незалежні від технологій на стороні сервера. Ви можете використовувати PHP, Ruby або ще що-небудь. Тут ми будемо використовувати Java-сервлет. Код сервлету приведений в лістингу 3.

Лістинг 3. Сервлет Suggest

package org.developerworks.xfsuggest; import java.io.IOException; import java.util. *; import javax.servlet.ServletException; import javax.servlet.http. *; public class SuggestServlet extends HttpServlet {private final int listSize = 15; private final Random gen = new Random (Calendar.getInstance (). getTimeInMillis ()); protected void doGet (HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {String root = request.getParameter ( "root"); List <String> suggestions = this.getSuggestions (root); request.setAttribute ( "suggestions", suggestions); request.getRequestDispatcher ( "/ suggestions.jsp"). forward (request, response); } Private List <String> getSuggestions (String str) {if (str.length ()> = listSize) {return Collections.emptyList (); } Int size = listSize - str.length (); List <String> suggestions = new ArrayList <String> (); for (int i = 0; i <size; i ++) {StringBuilder sb = new StringBuilder (str); for (int j = 0; j <size; j ++) {char ch = (char) ( 'a' + gen.nextInt (26)); sb.append (ch); } Suggestions.add (sb.toString ()); } Return suggestions; }}

Цей сервлет просто витягує параметр root запиту і викликає метод getSuggestions () для отримання списку підказок. наведена в лістингу 3 реалізація створює випадковий список рядків підказок. Ця фіктивна реалізація створює менше підказок, при збільшенні довжини параметра root, імітуючи звуження можливостей вибору при продовженні введення даних в поле з автозаповненням. Потім список поміщається в об'єкт request. Сервлет передає управління JSP для візуалізації даних. JSP-сторінка наведена в лістингу 4.

Лістинг 4. suggestions.jsp

<? Xml version = "1.0" encoding = "ISO-8859-1"?> <% @ Page language = "java" contentType = "text / xml; charset = ISO-8859-1" pageEncoding = "ISO-8859- 1 "%> <% @ taglib prefix =" c "uri =" http://java.sun.com/jsp/jstl/core "%> <suggestions> <c: forEach items =" $ {suggestions} "var = "str"> <word> $ {str} </ word> </ c: forEach> </ suggestions>

JSP створює XML-документ для передачі назад клієнту. Це робиться просто шляхом ітерації за списком підказок, створених сервлетом. Тепер давайте розглянемо JavaScript-код на стороні клієнта, обробляє ці дані.

JavaScript-код для обробки відповіді

При виклику сервера з використанням об'єкта XMLHttpRequest реєструється обробник відповіді. Тобто, коли сервер повертає XML-документ, наведений в лістингу 4 , Цей JavaScript-обробник активізується. Такого роду асинхронна робота є однією з найтиповіших пасток Ajax-програмування. Давайте розглянемо JavaScript-функцію handleSuggestions, яка обробляє відповідь сервера (див. Лістинг 5).

Лістинг 5. Оброблювач відповіді: JavaScript-функція handleSuggestions

Ця функція складається з двох основних частин. Спочатку обробляється XML шляхом проходження по документу responseXML і вилучення підказок. Вони зберігаються в масиві suggestions. Потім код динамічно створює список підказок для вибору користувачем і поміщає цей список всередині suggest div, створеного в HTML. На малюнку 1 показано, як виглядає поле з автозаповненням.

Малюнок 1. Заповнити форму з використанням Ajax

Є окремий CSS і JavaScript-код для створення "ефекту підказки". Їх можна знайти в повному вихідному коді. А зараз давайте розглянемо, як XForms спрощує код.

Створення підказок за допомогою XForms і Ajax

Двома ключовими компонентами Ajax є можливість виконання запитів на сервер без зміни переглядається в браузері сторінки, а також можливість отримання XML-даних від сервера. Перша характеристика (асинхронні запити) - це буква "A" в Ajax. Остання характеристика - це буква "X" у Ajax. Зазвичай використовується об'єкт XMLHttpRequest, але це безумовно не єдиний спосіб. XForms може виконати ту ж задачу і бути представленим буквами "A" і "X" у Ajax.

парадигма XForms

XForms відокремлює модель від виду (view) в Web-додатку. Дані поділяються так, щоб їх легше можна було змінювати. Всі дані і дії (запити серверу) є частиною моделі, що притаманне типовим архитектурам Модель Вид Управління (Model View Control - MVC). У нашому додатку з автозаповненням присутні дані запиту (root, який передається на сервер), дані відповіді (підказки від сервера) і дію (HTTP-запит серверу) як частини моделі. Давайте їх розглянемо.

Налаштування XForm: Модель запиту

Дані, які ми збираємося використовувати для запиту на сервер, є першою частиною нашої моделі. Вона досить проста. Необхідний тільки параметр root. Погляньте на лістинг 6.

Лістинг 6. Модель XForms: Дані запиту

<Xf: instance id = "xfsuggestQuery"> <query xmlns = ""> <root /> </ query> </ xf: instance>

Це всього лише простий XML-документ для зберігання параметра root, який ми збираємося передати на сервер. Пізніше ви побачите його зв'язок з видом. А зараз розглянемо, як включити дані відповіді в нашу модель.

Налаштування XForm: Модель відповіді

Дані для відповіді кілька більш складні. Ми збережемо структуру, що використовувалася з Ajax-версією, оскільки вона граматично правильна і повністю сумісна з XForms. Однак на початку роботи програми у нас немає підказок, тому поки необхідно пусте місце для них (див. Лістинг 7).

Лістинг 7. Модель XForms: Дані відповіді

<Xf: instance id = "xfsuggestResults"> <suggestions xmlns = "" /> </ xf: instance>

Ми повністю замінимо вузол suggestions при отриманні відповіді від сервера. А зараз просто залишимо suggestions порожнім. Це дані, необхідні в нашій моделі, а тепер для моделі потрібно дію.

Налаштування XForm: Дія сервера

Дані є частиною моделі, але дії з цими даними також важливі. В даному випадку дією є HTTP-запит на сервер. У лістингу 8 показано, як легко це можна зробити за допомогою вузла XForms submission.

Лістинг 8. Модель XForms: submission

<Xf: submission id = "get_suggest" action = "/ xfsuggest / suggest" method = "get" separator = "&" ref = "instance ( 'xfsuggestQuery')" replace = "instance" instance = "xfsuggestResults" />

Дією в нашому вузлі submission є URL HTTP-запиту, який ми збираємося виконати. Параметр ref вказує submission, що передавати. В даному випадку вказується передача даних з об'єкта xfsuggestQuery. Це наші дані запиту, певні в лістингу 6 . Атрибут method встановлений в get, а роздільник - амперсанд (&). Це вказує XForms, як додавати дані в HTTP-запит. Буде створюватися параметр root, оскільки це елемент вузла xfsuggestQuery / query, а значення цього параметра буде значенням дочірнього вузла text вузла "root" XML-даних. Якби було кілька параметрів, вони поділялися б за допомогою амперсанда для створення правильно сформованого запиту HTTP GET. Ми визначили модель XForms, а тепер потрібно просто визначити вид.

Вид XForms: Введення даних

Вид в нашій XForm досить простий - це всього лише текстове поле, хоча і не зовсім звичайне, оскільки воно матиме Ajax-функціональність автозаповнення. Його оголошення приведено в лістингу 9.

Лістинг 9. Вид XForms

<Xf: input ref = "instance ( 'xfsuggestQuery') / root" incremental = "true" id = "tBox"> <xf: action ev: event = "xforms-value-changed"> <xf: send submission = " get_suggest "/> </ xf: action> </ xf: input>

Давайте проаналізуємо, що тут відбувається. Спочатку визначається поле input. Воно зв'язується з моделлю за допомогою атрибута ref. Це говорить XForms про те, що при введенні значення в полі input воно також має бути введені в вузол "root" XML-документа xfsuggestQuery. Потім визначається дія (action) при введенні. Дана дія викликає "send" для передачі в уявлення (submission), створене в моделі. Все це дуже типово для XForms і має бути добре знайоме розробникам, які мали справу з XForms.

Втім, тут використовується також кілька незвичайних можливостей XForms. Поле input має атрибут incremental, встановлений в значення true, що активізує подія при будь-якому інкрементного зміні, виконаному в поле input. У порівнянні з типом події onkeyup поля input (див. лістинг 1 ) Такий підхід більш досконалий. Цей атрибут дозволяє XForms проявляти більшу вибірковість при активізації подій, так як активізація пригнічується при швидкому введенні даних користувачем. Багато Ajax-додатки часто повинні додавати власні механізми придушення для реалізації функціональності, яку в XForms ви отримуєте автоматично.

Певне нами подія має атрибут event, встановлений в значення "xforms-value-changed". Він вказує, як прослуховувати дію для інкрементних подій, активізується полем введення. Тепер, коли б ці події ні активізувалися, буде викликатися дію submission, і, отже, виконуватися запит на сервер про отримання підказок для поля. Давайте розглянемо, як серверний код обробляє запит.

Використання Java на стороні сервера

Отже, як змінити сервер для обробки запитів від XForm? Нічого не треба змінювати! Ваш сервер вже посилає XML назад Ajax, що відмінно працює і з XForms. Це демонстрація того, як XForms доповнює Ajax. Служби на стороні сервера, використовувані в одній технології, можуть використовуватися і з іншого. Тепер потрібно просто обробити відповідь сервера на клієнта.

Обробка відповіді

У Ajax-додатку ми використовували JavaScript-функцію для обробки responseXML, отриманого з сервера, а також для зміни HTML DOM з метою відображення підказок. За допомогою XForms можна зробити аналогічні речі (але значно простіше), зв'язавши відповідь безпосередньо з даними. Коли дані передаються на сервер, наш вид оновлює себе автоматично. Тому замість включення порожнього елемента suggest div ми просто додаємо деякі пов'язані дані, як показано в лістингу 10.

Лістинг 10. Відображення результатів зі зв'язаними XForm-даними

Тут реалізовано зв'язування вузлів "word" в документі xfsugggestResults. Природно, спочатку немає ніяких слів, але це поки немає відповіді від сервера. Після появи вузлів "word" по ним виконується ітерація для створення div зі словом. Цей div аналогічний елементу div, створюваному динамічно в JavaScript у чистій Ajax-версії. JavaScript-функції suggestOver і suggestOut, на які цей елемент посилається, залишаються незмінними. Єдине, що потрібно поміняти, - це функція setValue. Ця функція необхідна для роботи з XForms-даними замість простого зміни даних поля HTML input. Погляньте на setValue в лістингу 11.

Лістинг 11. Нова функція setValue

У цій функції ми звертаємося до моделі XForms, добираємося до примірника xfsuggestQuery, а потім йдемо до його елемента root і або додаємо до нього текстовий вузол, або змінюємо його значення, якщо він вже існує. Даний технічний прийом можна використовувати для прямого доступу до даних xfsuggestResults і відображення підказок точно так же, як це робилося раніше. JavaScript і XForms дуже добре працюють спільно.

резюме

Ви побачили, як можна використовувати XForms для доповнення Ajax. Він використовує багато тих же принципів, що і Ajax, але певною мірою спрощує і оптимізує роботу. Використовуючи XForms, легше передавати та отримувати дані від сервера, а ще в XForms формуються більш "розумні" події. Також спрощується необхідний JavaScript-код, так як надається функціональність "шаблонів". На закінчення можна сказати, що часто краще довірити саме XForms бути буквами "A" і "X" у Ajax.

Ресурси для скачування

Схожі теми

Оригінал статті " Use XForms and Ajax to create an autosuggest form field "(EN).
Основи XForms в статтях " Введення в XForms, частина 1: Новий Web-стандарт для форм "(Кріс Херборт (Chris Herborth), developerWorks, вересень 2006)," Введення в XForms, частина 2: Форми, моделі, елементи управління і дії для представлення даних "(Кріс Херборт, developerWorks, вересень 2006) і" Введення в XForms, частина 3: Використання дій і подій "(Кріс Херборт, developerWorks, вересень 2005).
Додаткові способи використання XForms і Ajax в статті " Комбінування XForms і Ajax "(Ніколас Чейс (Nicholas Chase), developerWorks, жовтень 2006).
Додаткова інформація про спільне використання JavaScript і XForms в статті " Виклик JavaScript з XForms-форм "(Ніколас Чейс, developerWorks, січень 2007).
Дослідження можливостей команди repeat, використаної в даній статті, в матеріалі developerWorks " Оптимальне використання команд XForms repeat "(EN) (Ян Короткі (Jan J. Kratky) і Стів Спайхер (Steve K. Speicher), developerWorks, листопад 2006).
Шукаєте швидший спосіб створення XForms? Прочитайте про Visual XForms Designer в статті " Розробка форм за допомогою Visual XForms Designer "(EN) (Ян Короткі (Jan J. Kratky), Кейт Уеллс (Keith Wells) і Кевін Келлі (Kevin E. Kelly), developerWorks, червень 2006 року).
Додаткові способи спрощення Ajax за допомогою XForms в блозі Курта кагла (Kurt Cagle): Why XForms Matter, Revisited (EN).
Найкраще місце з додатковою інформацією по Ajax - центр ресурсів developerWorks Ajax (EN).
XForms Recommendation підтримується організацією W3C. (EN)
куди йде XForms . (EN)
Особливості створення форм наступного покоління в статті " основи XForms "(Ніколас Чейс (Nicholas Chase), developerWorks, жовтень 2006).
Спільнота користувачів IBM XForms (EN).
завантажте розширення XForms для Mozilla (EN).
Сертифікація IBM XML : Як стати сертифікованим фахівцем IBM-Certified Developer по XML і суміжних технологій. (EN)
Інформація по XML в розділі developerWorks XML .

Підпишіть мене на повідомлення до коментарів

Quot;GET", '/ xfsuggest / suggest?
Quot; encoding = "ISO-8859-1"?
Шукаєте швидший спосіб створення XForms?

Статьи