Ajax та XML Використання Ajax у формах
Створення форм введення за допомогою Ajax
Серія контенту:
Цей контент є частиною # із серії # статей: Ajax та XML
Цей контент є частиною серії: Ajax та XML
Слідкуйте за виходом нових статей цієї серії.
Приклад використання Ajax у простій формі введення даних
Почнемо з дуже простого прикладу: припустимо, є реєстраційна форма, що містить кілька полів, яку ми хочемо відправити на сервер за допомогою Ajax, а не звичайним для Web способом. Сама сторінка з формою показана у лістингу 1.
Лістинг 1. index.html
Першим параметром при виклику Ajax.Updater є ідентифікатор тега
Скрипт add.php показаний у лістингу 2.
Лістинг 2. add.php
Скрипт просто виводить на екран вміст форми. Насправді знадобилося б щось більше, наприклад, додати запис до бази даних, але ці дії за бажання ви можете реалізувати самостійно.
При першому завантаженні форми у браузері сторінка виглядатиме приблизно як на малюнку 1.
Рисунок 1. Приклад простої форми, створеної із застосуванням Ajax
При натисканні на кнопкуSubmit дані надсилаються серверному скрипту add.php, який повертає фрагмент HTML, розташовуючи його прямо підSubmit (рисунок 2).
Малюнок 2. Відображення результату
Варіацією подібних HTML-форм є форми Ajax з автозаповнення, які самостійно змінюють значення деяких полів залежно від значень певних ключових атрибутів. Типовим прикладом є введення ідентифікатора клієнта та натискання на кнопку, внаслідок чого решта полів буде автоматично заповнена інформацією про даного клієнта.
Приклад форми з автозаповнення наведено в лістингу 3.
Лістинг 3. index.html
Обробник події onSuccess , що передається як параметр під час виклику Ajax.Updater , використовує функції Document Object Model (DOM), що підтримуються всіма браузерами, для аналізу отриманого документа XML. Потім заповнює значення елементів з ідентифікаторами elFirst , elLast і elEmail даними з XML.
Сторінка getdata.php показана у лістингу 4.
Лістинг 4. getdata.php
При першому запуску сторінка має виглядати на малюнку 3.
Малюнок 3. Форма із заповненням
Рисунок 4. Інші поля форми заповнюються в результаті роботи скрипта, що приймає ID як параметр
Як наступний фокус з Ajax я створюю список незавершених справ (to-do list).
Поновлені “за місцем” списки
Одним із найпоширеніших прикладів, що використовуються при демонстрації можливостей Ruby on Rails, є списки справ, які оновлюються за місцем (in-place). Іншими словами, уявіть собі список вгорі сторінки і текстове поле, що розташоване під ним. Якщо набрати певний текст у цьому полі та натиснути на кнопкуSubmit, то до списку буде автоматично додано новий елемент, причому без перезавантаження сторінки. Текстове поле, у свою чергу, буде очищене, так що можна продовжувати легко додавати елементи.
Насправді це дуже непросте завдання, тому я вирішив продемонструвати її рішення на PHP. У лістингу 5 показана сторінка, що містить перелік справ.
Лістинг 5. index.php
Замість зберігання елементів списку в базі даних, я використовую простий текстовий файл list.txt, в якому перераховані всі записи (по одному на рядок). Такимвсе, що потрібно для заповнення списку даними – це відкрити файл, прочитати записи і помістити їх всередину елемента
Скрипт add.php показаний у лістингу 6.
Лістинг 6. add.php
Мій невигадливий список справ показаний у лістингу 7.
Лістинг 7. list.txt
При першому завантаженні сторінка виглядає як малюнку 5.
Рисунок 5. Додавання елемента до списку справ
Потім, якщо набрати "Finish in record time!" (побити рекорд) і натиснутиSubmit, то список оновиться без перезавантаження сторінки. Результат показаний малюнку 6.
Рисунок 6. Сторінка після додавання нового елемента
Зрозуміло, що демонстрації можливостей Rails не обмежуються лише списками справ. Але є одними з чинників успіху Web 2.0. До речі, якщо вам не доводилося працювати з Rails, то я настійно рекомендую вам (як і будь-якому Web-програмісту) спробувати його у справі. Навіть якщо ви вирішите не використовувати його у своїх проектах, вам буде корисно подивитися, як вибудовується архітектура додатків, як використовується механізм MVC (модель-представлення-контролер) та наскільки легко працювати з моделлю зберігання даних.
Ще одним прикладом часто зустрічається в Web ситуації є списки полів з можливістю додавання нових. Я називаю їх списками, що розширюються (expando lists).
Список, що розширюються
Як реалізувати можливість додавання необмеженої кількості ключових слів до запису? Як один із способів можна запропонувати використовувати список слів, що розділяються комами. Або можна створити кнопку, за допомогою якої користувачі можуть додавати довільну кількість ключових слів. У лістингу 8 показаний приклад реалізації другого підходу.
Лістинг 8. index.html
Центральне місце тут займає функція addkeyword() , яка використовує виклики insertRow та insertCell для створення нового рядка у таблиці ключових слів. Потім за допомогою методу document.createElement створює нове поле введення для зберігання слова. При натисканні на кнопкуSubmit клас Ajax.Updater викликає скрипт add.php, який просто повертає список ключових слів, отриманих від форми. Скрипт показаний у лістингу 9.
Лістинг 9. add.php
Спочатку у моєму браузері сторінка виглядає так, як показано на малюнку 7.
Малюнок 7. Форма введення, що містить одне ключове слово
Потім, після того як за допомогою кнопкиAdd Keyword я створив кілька нових полів і натиснув наSubmit, сторінка набула вигляду як на малюнку 8.
Рисунок 8. Форма введення після додавання ключових слів та натискання на кнопку Submit
Лістинг 10. index.html
Форма, що знаходиться вгорі сторінки, містить поляUser таPassword. Під ними розташований елемент
Скрипт login.php представлений у лістингу 11.
Лістинг 11. login.php
Цей код просто використовує жорстко задані значення імені користувача та пароля та повертає ok у разі збігу. В іншому випадку повертається bad.
Для повноти картини код домашньої сторінки показано у лістингу 12.
Лістинг 12. home.html
Для початку завантажте форму в браузер, введіть неправильне ім'я та пароль і натиснітьLogin. Результат має бути як на малюнку 9.
Якщо ж змінити ім'я користувача та пароль на коректні значення і знову натиснутиLogin, ви будете перенаправлені на домашню сторінку, яка показана на малюнку 10.
Як останній приклад розглянемо використання Ajax спільно з XForms.
Ajax та XForms
Я не вважаю себе експертом у XForms, але мені подобається цей стандарт. Далі я покажу як можна спільно використовувати клієнтські форми XForms з Prototype.js і Ajax.
Нескладний код прикладу з використанням XForms показаний у лістингу 13.
Лістинг 13. index.xhtml
Лістинг 14. params.php
Якщо відкрити цю сторінку в браузері з встановленим плагіном XForms, вона виглядатиме як на малюнку 11.
Рисунок 11. Сторінка XForms, яка використовує Ajax
Заповнивши форму даними та натиснувшиSubmit, ви побачите результат, показаний малюнку 12.
Рисунок 12. Сторінка після натискання на Submit
Як бачите, сторінка містить дані моделі, які були серіалізовані в XML-рядок, передані скрипту params.php, а потім відправлені назад на сторінку, всередину тега
Висновок
Використання Ajax у формах HTML відкриває широкі можливості, лише невелика частина яких порушена у цій статті. Проте, вона містить кілька реалістичних прикладів, які можуть наштовхнути вас на думки про те, чого можна досягти у ваших власних додатках, уникнувши серйозних змін на сторінках.
Ресурси для скачування
- цей контент у PDF
- Вихідний код прикладів до статті (x-ajaxxml9-forms.zip 101 KБ)