Ajax з допомогою jQuery

Що таке ajax
Ajax(Asynchronous Javascript and XML) – це рішення,
яке дозволяє асинхронно запитувати/передавати дані на сервер.
Сама ідея полягає в тому, щоб не перезавантажуючи веб-сторінку не
блокуючи користувальницький інтерфейс, можна було б з
javascript-сценарії звернутися до будь-якого серверного скрипта(або
іншому ресерсу) для отримання/передачі яких-небудь даних.
Приклади ajax
Прикладів сторінок з використанням ajax зараз можна
багато знайти. Якщо зайти на і почати що-небудь
вводити в пошуковий рядок, то може з’явиться випадаюче меню з схожими
знайденими варіантами запиту. Ці варіанти запрашиваюотся з сервера
асинхронно, не перезегружая саму сторінку.
Що таке jQuery
Для реалізації ajax-запитів в браузери вбудовані компоненти, до яких можна отримати доступ з javascript-коду. Є одна неприємна проблема. Код створення ajax-об’єкта в IE(Internet Explorer), відрізняється від коду створення ajax-об’єкта
в інших браузерах. Це, мабуть, найбільша складність. Мені,
наприклад, не дуже хочеться замислюватися про різних настройках і
низькорівневих реалізаціях ajax. jQuery позбавляє від
вище упомянотых проблем, надаючи дуже зручний інтерфейс. Потрібно
сказати, що застосування даної бібліотеки далеко не обмежується
тільки зручною реалізацією ajax-сценаріїв.
Ajax, jQuery і PHP
У даній статті я буду розглядати досить простий, але повний приклад того, як створити веб-сторінку з асинхронними запитами ajax на сервер. Отже, давайте приступимо.
Необхідно створити сторінку, на якій буде розміщена кнопка. За
натискання на цій кнопці потрібно запросити дані з php-скрипта і
відобразити на сторінці.Необхідно також показувати анімацію при
завантаження даних у вигляді gif-зображення. Для простоти будемо вважати, що
обмін даними буде здійснюватись в json-форматі.
Відразу наведу сруктуру ієрархії каталогів у мене на сервері. Ось вона.
Рис.1 Структура каталогів на сервері
Код html-сторінки www/index.html
Html-розмітка сторінки гранично проста. У хедері підключаються два скрипта – бібліотека jquery(jquery скачати безкоштовно можна тут)
і наш javascript-сценарій. Кнопка з ідентифікатором ajaxButton буде
запускати ajax-запит, а дів dataContainer буде відображати дані,
індикатор завантаження і повідомлення про помилки.
Опис серверноего скрипта
Для серверної сторони напишемо простенький php-скрипт, який буде
приймати два параметра start і end і повертати масив рядків
json-форматі. Даний скрипт я назвав json_data.php. Ось його вміст.

Приклад досить безглуздий для реального життя. Зазвичай інформація
береться з бази даних або з інших джерел. Але наша мета – зрозуміти
як за допомогою jQuery здійснювати ajax-запитів.
Опис сценарію javascript
Нам залишилося написати javascript, який буде запитувати дані з
сервера, звертаючись до json_data.php. Назвемо його our_ajax.js.
Я відразу наведу код з коментарями.
/*
* оброблювач натискання на кнопку
*/
var buttonClickHandler = function()
{
/*
* отримати об’єкт jQuery, який посилається на елемент з
* ідентифікатором dataContainer
*/
var dataContainer = jQuery(“#dataContainer”);
/*
* відчистити вміст контейнера
*/
dataContainer.empty();
/*
* помістити в контейнер gif анімацію індикатора завантаження
*/
dataContainer.append(“);
/*
* створити об’єкт параметрів GET-запиту
*/
var data = {start: 10, end: 20};
/*
* надіслати запит http сервера(php-скрипт json_data.php, який
* знаходиться в каталозі www) з параметрами data. Встановити ajaxCallBack
* як функції зворотного виклику, яка запускається, коли прийдуть
* дані з сервера. При виклику ajaxCallBack їй параметром буде переданий
* об’єкт, сформований з json-рядка.
*/
jQuery.getJSON(‘json_data.php’, data, ajaxCallBack);
}
/*
* викликається, коли з сервера отримано відповідь
* data – дані, у вигляді об’єкта, який отримано з json-рядки,
* отриманої з сервера
*/
var ajaxCallBack = function(data)
{
/*
* отримати об’єкт jQuery, який посилається на елемент з
* ідентифікатором dataContainer
*/
var dataContainer = jQuery(“#dataContainer”);
/*
* відчистити вміст контейнера
*/
dataContainer.empty();
/*
* пробігтися по всіх даними і вставити їх в контейнер
*/
for (var index in data)
{
dataContainer.append(”
“+ data[index] + ”
“);
}
/*
* показати вміст контейнера
*/
dataContainer.css(‘display’, ‘block’);
}
/*
* обробник помилок ajax
**/
var ajaxErrorHandler = function(event, request, settings)
{
var dataContainer = jQuery(“#dataContainer”);
dataContainer.empty();
dataContainer.append(
‘
Error loading data from’ + settings.url + ‘
‘);
dataContainer.css(‘display’, ‘block’);
}
/*
* обробник завантаження DOM
*/
var doucumentLoadHandler = function()
{
/*
* отримати об’єкт jQuery, який посилається на елемент з
* ідентифікатором dataContainer
*/
var dataContainer = jQuery(“#dataContainer”);
/*
* визначити функцію обробки помилок ajax-запитів
*/
dataContainer.ajaxError(ajaxErrorHandler);
/*
* прив’язати до кнопки з ідентифікатором ajaxButton обробник
* події натискання миші
*/
jQuery(“#ajaxButton”).bind(“click”, buttonClickHandler);
}
/*
* підключення функції-обрабтчика завантаження DOM
*/
jQuery(document).ready(doucumentLoadHandler);
Я постарався максимально детально прокоментувати наведений
javascript-сценарій, тому не буду вдаватися в подробиці його роботи.
Поясню лише основні моменти.
При виконанні our_ajax.js браузером за допомогою рядка коду
jQuery(document).ready(doucumentLoadHandler);
ми підключаємося до події завантаження DOM структури нашого
html-документа. При виникненні цієї події спрацює нами
певна функція doucumentLoadHandler. Код
dataContainer.ajaxError(ajaxErrorHandler);
реєструє функцію обробки помилок ajax-запитів. Далі приязываем
подія натискання мишею до нашої кнопки, встановлюючи при цьому
buttonClickHandler в якості функції зворотного виклику. При кліці на
кнопці буде здійснюватися ajax-запит до json_data.php. А обробка
отриманих даних буде відбуватися в функції ajaxCallBack.
От і все. Тепер у нас є закінчений приклад виконання ajax-завантаження даних з сервера.
Автор: Павло Коломыткин
Сайт: