JQuery та Ajax події, ajax
css, html, php, javascript, jQuery, ajax … – рішення, приклади, рецепти
jQuery та Ajax: події
У попередній статті ми трохи познайомилися із запитами Ajax, які дозволяє виконувати бібліотека jQuery. Тепер розглянемо події Ajax та приклади обробки цих подій.
ajaxComplete( callback ) – прикріплює функцію, яка виконується щоразу, коли виконано ajax-запит. Функція приймає як аргументи об'єкт XMLHttpRequest та установки, які використовуються у цьому запиті.Приклад: показуємо повідомлення, коли AJAX запит виконано.
ajaxError( callback ) – прикріплює функцію, яка виконується щоразу, коли якийсь ajax-запит невдалий. Функція приймає як аргументи об'єкт XMLHttpRequest та установки, які використовуються у цьому запиті. Третій параметр передається, якщо при обробці запиту сталася помилка та ця помилка визначена.Приклад: показуємо повідомлення, коли AJAX запит невдалий.
ajaxSend( callback ) – прикріплює функцію, яка виконується щоразу, коли якийсь ajax-запит відправлений. Функція приймає як аргументи об'єкт XMLHttpRequest та установки, які використовуються у цьому запиті.Приклад: показуємо повідомлення, коли AJAX надіслано запит.
ajaxStart( callback ) – прикріплює функцію, яка виконується кожного разу, коли ajax-запит розпочато (і немає запитів, що виконуються).Приклад: показуємо повідомлення про завантаження.
ajaxStop( callback ) – прикріплює функцію, яка виконується щоразу, коли ajax-запити закінчені.Приклад: приховуємо повідомлення про завантаження після того, як всі AJAX-запити закінчені.
ajaxSuccess( callback ) – прикріплює функцію, яка виконується всякийраз, коли ajax-запит виконано успішно. Функція приймає як аргументи об'єкт XMLHttpRequest та установки, які використовуються у цьому запиті.Приклад: показуємо повідомлення, коли AJAX-запит виконано успішно.
Щоб усе це було трохи зрозумілішим, придумаємо, напишемо і випробувамо якийсь цілком реальний приклад, у якому використовуємо деякі з перерахованих вище подій. Ось сам приклад:
Ви можете завантажити вихідний код прикладу, і за наявності бібліотеки jQuery відтворити цей приклад на своєму сайті.
Потім простенький HTML-код:
шматочок із таблиці стилів:
та повністю javascript-код:
Тепер давайте все це спробуємо розібрати по кроках і будемо відштовхуватися від javascript-коду. По кліку на елементі а з ідентифікаторома1 буде виконаноajax-запит до файлуevents.php (його код трохи пізніше). Тип запиту ми визначимо якPOST і як дані передамо певний параметрn=3. Потім займемося «розвішування» подій на HTML-елементи. ПодіїajaxStart буде показано елемент з ідентифікатором#loading, спочатку прихований за допомогою CSS. Елемент#message за цією ж подією буде прихований (він прихований і спочатку, але ми робимо це для того, щоб приховати його, якщо раніше виконувались запити і цей елемент був показаний). Далі, за подієюajaxStop треба буде приховати елемент#loading, а за подієюajaxComplete показати елемент#message.
А тепер наведу кодобробника ajax-запиту - файлevents.php
Спочатку ми перевіряємо існування об'єктаXMLHttpRequest і виконуємо код тільки в тому випадку, якщо він існує. Сам по собі цей код лише проганяє цикл із 3 ітерацій, щоразу «засинаючи» на секунду (ця затримказроблено у тому, щоб сам процес запиту можна було «відчути»).
Приклад вийшов, звичайно найпростіший, без подальшої обробки даних, що повертаються сервером, але його метою було тільки продемонструвати роботу з подіями Ajax , а для більш реальних прикладів ще буде час ...