Как работать с JQuery функцией ajax

Дата публикации: 2016-03-03

От автора: за предыдущие несколько статей вы должны были довольно хорошо разобраться в AJAX. В этом заключительном уроке мы соберем все вместе с помощью более сложного примера.

Разметка

Чтобы понять смысл примера, рассмотрим разметку:

<section>
  <!-- контент -->
</section>
<main>
  <!-- контент -->
</main>
<section>
  <!-- контент -->
</section>
<div class="modal">
  <!-- контент -->
</div>
<div class="loader">
  <!-- контент -->
</div>

</section>

<main>

</main>

</section>

</div>

</div>

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

<main>
  <h2>Popular front-end frameworks</h2>
  <p>Click each one to load details via AJAX.</p>
  <div class="boxes">
    <a href="#">Bootstrap</a>
    <a href="#">Foundation</a>
    <a href="#">UIkit</a>
    <a href="#">Semantic UI</a>
    <a href="#">Skeleton</a>
    <a href="#">Material Design Lite</a>
  </div>
</main>

<main>

<h2>Popular front-end frameworks</h2>

<p>Click each one to load details via AJAX.</p>

<a href="#">Bootstrap</a>

<a href="#">Foundation</a>

<a href="#">UIkit</a>

<a href="#">Semantic UI</a>

<a href="#">Skeleton</a>

<a href="#">Material Design Lite</a>

</div>

</main>

Обратите внимание на текстовые ссылки. Они соответствуют разным front-end фреймворкам. В следующей части мы увидим, как при клике на эти ссылки будет происходить AJAX запрос. После запроса будет появляться элемент с классом modal, элемент заполняется контентом с сервера. Внешний вид элемента main:

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

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

<div class="modal">
  <button class="close" aria-label="Close">✕</button>
  <div class="m-content">
    <ul class="m-info">
      <li>Framework</li>
      <li></li>
      <li>Current Version</li>
      <li></li>
      <li>Number of Github Stars</li>
      <li></li>
      <li>Official Page</li>
      <li></li>
    </ul>
    <p class="m-message"></p>
  </div>
</div>

<li>Framework</li>

<li>Current Version</li>

<li>Number of Github Stars</li>

<li>Official Page</li>

</ul>

</div>

Как видно, в модальном окне есть несколько пустых элементов. Они пустые, так как их текст будет меняться в зависимости от того, на какую ссылку нажал пользователь. Ниже показан первоначальный вид модального окна:

По умолчанию модальное окно скрыто, загрузчик также прячется. Загрузчик будет отображаться только во время выполнения AJAX запроса. CSS код:

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

.modal {

opacity: 0;

}

.loader {

display: none;

}

Обратите внимание, что для скрытия модального окна мы используем свойство opacity, так как его можно анимировать. Таким образом мы сможем плавно менять состояния окна (открытое и закрытое состояния).

Генерация JSON ответа

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

[
  {
    "url": "//getbootstrap.com/", 
    "numberOfStars": "88.260+", 
    "currentVersion": "3.3.5", 
    "name": "Bootstrap"
  }, 
  {
    "url": "//foundation.zurb.com/", 
    "numberOfStars": "21.180+", 
    "currentVersion": "5.5.3", 
    "name": "Foundation"
  }, 
  // еще 4 объекта
]

[

{

"url": "//getbootstrap.com/",

"numberOfStars": "88.260+",

"currentVersion": "3.3.5",

"name": "Bootstrap"

{

"url": "//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;

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);
});

$('.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])

1	$.ajax([settings])

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

Перед тем как продолжить необходимо упомянуть о трех вещах:

Есть и другой синтаксис функции 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[i].name) {
        $list.show();
        $message.hide();
 
        $list.find('li:nth-of-type(2)').text($framework);
        $list.find('li:nth-of-type(4)').text(data[i].currentVersion);
        $list.find('li:nth-of-type(6)').text(data[i].numberOfStars);
        $list.find('li:nth-of-type(8)').html('<a href="' + data[i].url + '" target="_blank">' + data[i].url + '</a>');
        break;
      } else {
        $list.hide();
        $message.show().text('No data received for this framework!');
      }
    } 
  } else {
    $list.hide();
    $message.text('No data received from your respose!');
  }
}

function successFunction(data) {

if (data.length > 0) {

for (var i = 0; i < data.length; i++) {

if ($framework === data[i].name) {

$list.show();

$message.hide();

$list.find('li:nth-of-type(2)').text($framework);

$list.find('li:nth-of-type(4)').text(data[i].currentVersion);

$list.find('li:nth-of-type(6)').text(data[i].numberOfStars);

$list.find('li:nth-of-type(8)').html('<a href="' + data[i].url + '" target="_blank">' + data[i].url + '</a>');

break;

} else {

$list.hide();

$message.show().text('No data received for this framework!');

}

} else {

$list.hide();

$message.text('No data received from your respose!');

}

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

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

function alwaysFunction() {

$loader.hide();

$modal.addClass('active');

}

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

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

.active {

opacity: 1;

z-index: 10;

transform: scale(1);

}

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

Несколько сценариев

Важно понимать, что код выполняется в определенных обстоятельствах. Рассмотрим два основных сценария:

Значение свойства name не совпадает с текстовой ссылкой тега main. К примеру, предположим, что URL со значением свойства name для фреймворка Foundation задан как Foundation2, а не Foundation. В таком случае по клику на Foundation в модальном окне появится сообщение:

Ответ пустой. К примеру, мы задали URL к пустому массиву. В таком случае модальное окно выдаст:

Обработка ошибок

Мы рассмотрели код при успешно выполнении запроса. А что если запрос не удался? В случае неуспешного запроса мы прячем список и показываем сообщение. Ниже представлен код функции failFunction():

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