Як спростити процес Ajax-розробки за допомогою бібліотеки jQuery
З jQuery потрібна мінімальна кількість коду навіть при розробці складних функцій, тому процес йде набагато швидше. Завдяки цим інструментам Ajax стає більш практичним способом розробки Web-сайту або програми в стислий термін.
- вирішити, який браузер використовувати - на базі XMLHTTPRequest або на базі ActiveXObject;
- задати подію зворотного дзвінка, яка буде використовуватися для отримання відповіді;
- відкрити запит;
- Відправити запит;
- Після запуску зворотного виклику перевірити readyState і визначити, чи готовий об'єкт відповіді звернутися до нього.
Лістинг 1. Традиційний Ajax-запит
Лістинг 2. Простий запит Ajax jQuery
Різниця очевидна. А код можна спростити ще більше, оскільки jQuery не потрібно переписувати весь код для кожного запиту. Відмінним рішенням служить метод, що називається ajaxSetup , який забезпечує можливість встановлення значень за замовчуванням для запитів Ajax. Це особливо корисно, коли передається багато запитів по тому самому URL; можна встановити тип запиту за промовчанням, такий як POST або GET тощо. З вбудованою бібліотекою jQuery можна легко встановити деякі значення за промовчанням, як у прикладі коду з лістингу 3.
Лістинг 3. Використання методу ajaxSetup для встановлення значень за промовчанням параметрів запитів Ajax
У цьому прикладі для запиту встановлюється значення url за промовчанням, щоб цей параметр не потрібно було вмикати у виклик Ajax. Але якщо його увімкнути, він просто перевизначить налаштування за умовчанням. Можна встановити значення за промовчанням для цілого ряду параметрів:
Посилання на повний список та додаткову інформацію див. у розділі Ресурси.
jQuery пропонує також ряд подій Ajax, якідозволяють одержати максимальний контроль над кожним етапом запиту. З їх допомогою можна змінити дані перед відправкою запиту, визначити, був запит успішним чи невдалим, і контролювати запити на локальному чи глобальному рівні.
- Події, що викликаються перед надсиланням запиту:
- ajaxStart (global)
- beforeSend (local; дозволяє змінити об'єкт XMLHTTPRequest , встановивши додаткові заголовки і т.д.)
- ajaxSend (global)
Запит XML-файлу та обробка відповіді
Лістинг 4. Приклад XML-файлу для Ajax-запиту із застосуванням jQuery
Коли сторінка готова, можна створити Ajax-запит за допомогою jQuery. Як видно з лістингу 5, запит схожий на те, що ми вже бачили, але тепер обробляються успішні та помилкові відповіді.
Лістинг 5. Запит та розбір XML-файлу за допомогою Ajax та jQuery
Подія успіху отримує три аргументи: data , textStatus і XMLHttpRequest . Єдиний параметр, який використовується в цій статті - data. У прикладі він названий xml , щоб було легко визначити, що як відповідь повертаються дані XML. По файлу XML ми знаємо, що очікується header , description і sourceUrl , тому пройдемося за параметрами у файлі і надамо ці значення відповідним змінним. Коли всі змінні набули значення, можнаобробити дані як HTML, додавши кожен елемент до тіла HTML-сторінки та застосувавши базове форматування. Якщо запит виявився невдалим, буде запущено подію error, яка представлена трьома аргументами: XMLHttpRequest, textStatus та errorThrown. Параметр XMLHttpRequest має бути фактичним об'єктом; textStatus – це рядок, який описує тип помилки, а параметр errorThrown – це необов'язковий об'єкт виключення.
Запит даних JSON та обробка відповіді
У випадку з JSON процес аналогічний до запиту XML. Основна відмінність полягає в налаштуванні параметра dataType на певне значення, аналіз даних і додаванні скороченого методу, який може використовуватися як альтернатива типовому запиту Ajax jQuery. Нижче розглядаються всі ці відмінності.
У лістингу 6 наведено приклад файлу JSON, що містить ті самі дані, що і XML-файл з лістингу 4. Мета полягає в тому, щоб з використанням цих даних отримати той же HTML-файл. Важливо суворо дотримуватись JSON, оскільки будь-яке відхилення буде відкинуто з повідомленням про помилку обробки.
Лістинг 6. Код JSON для прикладу запиту
Лістинг 7. Запит та розбір JSON за допомогою Ajax та jQuery
Для запиту JSON можна використовувати інший скорочений метод, званий getJSON , який завантажує дані JSON з сервера за допомогою методу GET . Еквівалент попереднього запиту JSON із застосуванням методу getJSON представлений у лістингу 8.
Лістинг 8. Запит та розбір даних JSON за допомогою методу getJSON
Запит HTML-файлу та обробка відповіді
Останній набір статичних даних, що ми запитуємо – це HTML. Код HTML, наведений у лістингу 9, це те, що ми отримували в попередніх прикладах.
Лістинг 9. Приклад HTML-файлу для Ajax-запиту із застосуваннямjQuery
Як і раніше, застосовуються події success і error, і параметру data надається ім'я відповідно до реального типу даних – цього разу, html – щоб його було легко ідентифікувати. Оскільки дані HTML аналізувати не потрібно, їх можна додати в тіло сторінки HTML, і все готове.
Лістинг 10. Запит та розбір HTML за допомогою Ajax та jQuery
Передача даних на сервер
Розібравшись із кількома статичними типами даних, можна поговорити про роботу з динамічними даними. Як серверну будемо використовувати мову PHP, яка генерує відповідь, але для створення такого процесу годиться будь-яка серверна мова. Як правило, цей процес використовується для отримання даних із бази даних на основі певних параметрів, таких як ідентифікатор користувача. В даному випадку ми просто повертаємо набір XML-даних, подібний до того, що використовується в розділі Запит XML-файлу та обробка відповіді, але для повернення даних PHP потрібен певний параметр.
Код PHP, наведений у лістингу 11, – це те, що ми просимо за допомогою Ajax. Він починається з установки типу даних, які будуть повернуті до XML у кодуванні UTF-8. Потім, перш ніж повернути XML-дані, PHP зажадає через POST параметр з іменем secret і значенням ajax . Якщо ці вимоги не будуть виконані, PHP не поверне жодних даних. Тому при створенні запиту на отримання набору даних XML необхідно передати через POST параметр secret зі значенням ajax.
Лістинг 11. Приклад коду PHP, який запитує Ajax
Лістинг 12. Запит та розбір динамічних даних за допомогою Ajax та jQuery
Як бачите, параметр JQuery Data забезпечує широкі можливості. Цей приклад показує, як легко налагодити зв'язок між jQuery та мовою програмування настороні сервера на додаток до обміну змінними та їх значеннями. Ці можливості справді безмежні, а jQuery полегшує доступ до них.
Висновок
Тепер, коли ви познайомилися з усіма основними методами Ajax з використанням jQuery, легко переконатися, що бібліотека Ajax jQuery підвищує якість розробки, значно спрощуючи її, вимагаючи менше коду та забезпечуючи додаткові можливості контролю. Ці вдосконалення становлять основу для швидкого створення складних програм Ajax без написання довгого коду або продовження термінів розробки. Приклади цієї статті демонструють, як з використанням jQuery можна легко і швидко створювати складні Ajax-взаємодії в найкоротші терміни – навіть працюючи з кількома мовами програмування.