Як працювати з JQuery функцією ajax

17

Від автора: за попередні кілька статей ви повинні були досить добре розібратися в AJAX. У цьому заключному уроці ми зберемо всі разом за допомогою більш складного прикладу.

Розмітка

Щоб зрозуміти сенс прикладу, розглянемо розмітку:

Розмітка тега main:

Popular front-end frameworks

Click each one to load details via AJAX.

Bootstrap
Foundation
UIkit
Semantic UI
Skeleton
Material Design Lite

Зверніть увагу на текстові посилання. Вони відповідають різним front-end фреймворкам. У наступній частині ми побачимо, як при натисканні на ці посилання буде відбуватися AJAX запит. Після запиту буде з’являтися елемент з класом modal, елемент заповнюється контентом з сервера. Зовнішній вигляд елемента main:

Як працювати з JQuery функцією ajax

Розмітка модального вікна

Далі необхідно розглянути розмітку нашого модального вікна. HTML-розмітка:

  • Framework
  • Current Version
  • Number of Stars Github
  • Official Page

Як видно, в модальному вікні є декілька порожніх елементів. Вони порожні, так як їх текст буде змінюватися в залежності від того, на яку посилання натиснув користувач. Нижче показаний початковий вигляд модального вікна:

Як працювати з JQuery функцією ajax

За замовчуванням модальний приховано, завантажувач також ховається. Завантажувач буде відображатися тільки під час виконання AJAX запиту. CSS код:

.modal {
opacity: 0;
}
.loader {
display: none;
}

Зверніть увагу, що для приховування модального вікна ми використовуємо властивість opacity, так як його можна анімувати. Таким чином ми зможемо плавно змінювати стану вікна (відкрите і закрите стану).

Генерація JSON відповіді

Метою нашого прикладу ми вибрали формат відповіді JSON. А конкретно, очікуваний відповідь буде масивом об’єктів (Demo.json). Кожен об’єкт буде зберігати подробиці щодо front-end фреймворка. Більш того, значення властивості name буде збігатися з текстовим посиланням тега main (розмітка трохи вище). На основі вищесказаного відповідь виглядає приблизно так:

[
{
«url»: «http://getbootstrap.com/»,
«numberOfStars»: «88.260+»,
«currentVersion»: «3.3.5»,
«name»: «Bootstrap»
},
{
«url»: «http://foundation.zurb.com/»,
«numberOfStars»: «21.180+»,
«currentVersion»: «5.5.3»,
«name»: «Foundation»
},
// ще 4 об’єкти
]

Зверніть увагу: значення властивостей numberOfStars і currentVersion вигадані просто для демонстрації.
Як і в попередніх прикладах, ми будемо використовувати AJAX запит для доступу до статичного файлу. Якщо ж ми хочемо вставляти контент з інших сайтів (Google Maps, Flickr), доведеться почитати документацію API.

Крім того наші дані знаходяться на тому ж сервері, що і сама демо. Тому у нас не буде помилок, пов’язаних із взаємодією зі сторонніми сервісами (див. розділ «Обмеження AJAX запитів» у першій статті).

Відправка AJAX запиту

У цьому розділі ми будемо працювати з JQuery функцією ajax для ініціалізації AJAX запиту. Але перед цим створимо змінні, кэшируя найпоширеніші JQuery селектори:

var $list = $(‘.m-info’),
var $message = $(‘.m-message’);
var $modal = $(‘.modal’);
var $loader = $(‘.loader’);
var $framework;

Розглянемо код запиту:

$(‘.boxes a’).on(‘click’, function(e) {
e.preventDefault();
$framework = $(this).text();
$.ajax({
url: ‘Demo.json’,
dataType: ‘json’,
beforeSend: function() {
$loader.show();
}
}).done(successFunction)
.fail(errorFunction)
.always(alwaysFunction);
});

Помітно, що синтаксис ajax функції наступний:

$.ajax([settings])

Параметр settings – об’єкт конфігурації, в якому зберігається інформація про наших запитах. У даного об’єкта може бути дуже багато властивостей (близько 34 властивостей). Для спрощення ми розглянемо тільки ті, які задіяні в нашому демо:

Як працювати з JQuery функцією ajax

Перед тим як продовжити необхідно згадати про три речі:

Є й інший синтаксис функції ajax: $.ajax(url[, settings])

Всі властивості налаштувань в параметрі settings необов’язкові

HTTP метод за замовчуванням – GET

Promise методи

Функція ajax повертає об’єкт jQuery XMLHttpRequest або jqXHR. Даний об’єкт виконує інтерфейс Promise, а значить, в ньому зберігаються всі властивості, методи та параметри об’єкта Promise. У нашому прикладі ми використовуємо три Promise методу:

done

fail

always

Метод done виконується, якщо запит успішний. Метод приймає дві та більше аргументів, кожний з яких може бути як функцією, так і масивом функцій. Приміром, у нашому демо successFunction() передається як аргумент.

Колбек функція (наприклад, successFunction()) приймає три аргумента. Перший – повертаються дані. Другий – рядок статусу запиту (див. можливі значення в попередній статті). Останній – об’єкт jqXHR.

Метод fail викликається при невдалому виконанні запиту. На вхід подається один або більше аргументів, кожний з яких може бути як функцією, так і масивом функцій. Приміром, у нашому демо errorFunction() передається як аргумент. Колбек функція (наприклад, errorFunction()) приймає три параметри: jqXHR об’єкт, рядок статусу запиту, рядок з кінцевою помилкою. В помилку записується частина HTTP статусу типу Not Found або Forbidden.

Метод always виконується після завершення запиту незалежно від його успішності (тобто виконаний метод done або fail). Точно так само він приймає аргументом функцію або масив функцій. Приміром, у нашому демо alwaysFunction() передається як аргумент.

Стан запиту визначає аргументи функції. У разі успіху (наприклад, alwaysFunction()) колбек функція отримує ті ж аргументи, що і колбек метод done. І навпаки, якщо запит не вдався, функція приймає ті ж аргументи, що і метод fail.

Зверніть увагу: замість Promise методів done, fail і always, які ми використовували в нашому прикладі, можна також використовувати колбек функції success, error і complete. Це можна змінити в параметрі settings.

Як показати дані

Якщо запит пройшов успішно, ми можемо повернути дані. Отримані дані ми поміщаємо в порожні теги модального вікна.
Розглянемо колбек фукнцию successFunction:

function successFunction(data) {
if (data.length > 0) {
for (var i = 0; i < data.length; i++) {
if ($framework === data.name) {
$list.show();
$message.hide();
$list.find(‘li:nth-of-type(2)’).text($framework);
$list.find(‘li:nth-of-type(4)’).text(data.currentVersion);
$list.find(‘li:nth-of-type(6)’).text(data.numberOfStars);
$list.find(‘li:nth-of-type(8)’).html(‘‘ + data.url + «);
break;
} else {
$list.hide();
$message.show().text(‘No received data for this framework!’);
}
}
} else {
$list.hide();
$message.text(‘No data received from your respose!’);
}
}

Контент модального вікна оновлено, але він все ще приховано. Воно стане видимим, а завантажувач зникне, коли запит закінчиться. Тільки після цього запуститься колбек функція alwaysFunction:

function alwaysFunction() {
$loader.hide();
$modal.addClass(‘active’);
}

Клас active виглядає так:

.active {
opacity: 1;
z-index: 10;
transform: scale(1);
}

Нижче представлений приклад роботи модального вікна по кліку на посилання Bootstrap:

Як працювати з JQuery функцією ajax

Кілька сценаріїв

Важливо розуміти, що код виконується в певних обставинах. Розглянемо два основні сценарії:

Значення властивості name не збігається з текстовим посиланням тега main. Наприклад, припустимо, що URL зі значенням властивості name для фреймворку Foundation заданий як Foundation2, а не Foundation. У такому разі по кліку на Foundation в модальному вікні з’явиться повідомлення:

Як працювати з JQuery функцією ajax

Відповідь порожній. Наприклад, ми поставили URL до порожнього масиву. В такому випадку модальне вікно видасть:

Як працювати з JQuery функцією ajax

Обробка помилок

Ми роздивилися код за успішно виконання запиту. А що якщо запит не вдався? У разі неуспішного запиту ми ховаємо список і показуємо повідомлення. Нижче представлений код функції failFunction():

function failFunction(request, textStatus, errorThrown) {
$list.hide();
$message.text(‘An error occurred during your request:’ + request.status + »+ textStatus + » + errorThrown);
}

Щоб розібратися в коді, вкажемо неіснуючий URL адресу. У такому разі виконається метод fail, а на модальному вікні з’явиться помилка:

Як працювати з JQuery функцією ajax

Зверніть увагу: Якщо ви запускаєте демо на локальному комп’ютері, то у вас буде інше повідомлення про помилку.

Висновок

У цьому уроці ми закінчили наш розповідь про AJAX для веб-дизайнерів. Сподіваюся, ця серія статей виявилася для вас корисною, і ви дізналися щось нове.