cpp

Глобальные обработчики событий AJAX

Помимо локальных обработчиков событий, библиотека jQuery предоставляет несколько глобальных. Все глобальные обработчики являются методами объекта jQuery и требуют привязки к объекту document. Могут быть назначены следующие обработчики:

  • ajaxStart(<Функция обратного вызова>) — вызывается в самом начале запроса. В качестве параметра указывается ссылка на функцию следующего формата:
function <Название функции>() {
   // Обрабатываем событие
}
  • ajaxSend(<Функция обратного вызова>) — вызывается до передачи запроса на сервер. В качестве параметра указывается ссылка на функцию следующего формата:
function <Название функции>([<Объект event>[, 
            <Объект jqXHR>[, <Опции запроса>]]]) {
   // Обрабатываем событие
}

Выведем значение опции dataType:

$(document).ajaxSend( function(e, xhr, options) {
   console.log(options.dataType);
});
  • ajaxSuccess(<Функция обратного вызова>) — вызывается в случае успешного выполнения запроса. В качестве параметра указывается ссылка на функцию следующего формата:
function <Название функции>([<Объект event>[, 
            <Объект jqXHR>[, <Опции запроса>[, <Данные>]]]]) {
   // Обрабатываем событие
}

Выведем данные, полученные с сервера:

$(document).ajaxSuccess( function(e, xhr, options, data) {
   console.log(data);
   console.log(xhr.responseText);
   console.log(xhr.responseJSON);
});
  • ajaxError(<Функция обратного вызова>) — вызывается в случае ошибки. В качестве параметра указывается ссылка на функцию следующего формата:
function <Название функции>([<Объект event>[, 
            <Объект jqXHR>[, <Опции запроса>[, 
            <Исключение>]]]]) {
   // Обрабатываем событие
}
  • ajaxComplete(<Функция обратного вызова>) — вызывается по окончании запроса, независимо от успешности его выполнения. В качестве параметра указывается ссылка на функцию следующего формата:
function <Название функции>([<Объект event>[, 
            <Объект jqXHR>[, <Опции запроса>]]]) {
   // Обрабатываем событие
}

Выведем текст, полученный с сервера, в случае успешности запроса или сообщение об ошибке — при неудачном запросе:

$(document).ajaxComplete( function(e, xhr, options) {
   if (xhr.status == 200) {
      console.log(xhr.responseText);
   }
   else {
      console.log('Ошибка');
   }
});
  • ajaxStop(<Функция обратного вызова>) — вызывается в самом конце запроса. В качестве параметра указывается ссылка на функцию следующего формата:
function <Название функции>() {
   // Обрабатываем событие
}

Назначить обработчик можно также с помощью метода on(). В первом параметре указывается глобальное событие AJAX, а во втором — ссылка на функцию, которая будет вызвана при наступлении события:

$(document).on('ajaxSuccess', function() {
   $('#log').append('Ответ успешно получен<br>');
}).on('ajaxError', function() {
   $('#log').append('Произошла ошибка<br>');
});

Если в функции $.ajax() или $.ajaxSetup() опция global имеет значение false, то глобальные обработчики вызываться не будут. По умолчанию опция имеет значение true. Пример отключения глобальных обработчиков:

$.ajax({
   url: '/ajax.php',
   data: { txt1: '1', txt2: '2' },
   dataType: 'json',
   global: false        // Глобальные обработчики отключены
});

Продемонстрируем последовательность прохождения событий (листинг 3.28). Содержимое файла ajax.php см. в листинге 3.11.

Листинг 3.28. Последовательность событий AJAX

<!doctype html>
<html lang="ru">
<head>
   <meta charset="utf-8">
   <meta name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no">
   <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
   <title>Последовательность событий AJAX</title>
</head>
<body>
<div class="container my-3">
   <button type="button" class="btn btn-primary"
           id="btn1">Получить данные</button>
   <div id="log"></div>
</div>

<script src="/js/jquery.min.js"></script>
<script>
$(function() {
   $(document).ajaxStart( function() {
      $('#log').append('Глобальное событие ajaxStart<br>');
   }).ajaxSend( function() {
      $('#log').append('Глобальное событие ajaxSend<br>');
   }).ajaxSuccess( function() {
      $('#log').append('Глобальное событие ajaxSuccess<br>');
   }).ajaxError( function() {
      $('#log').append('Глобальное событие ajaxError<br>');
   }).ajaxComplete( function() {
      $('#log').append('Глобальное событие ajaxComplete<br>');
   }).ajaxStop( function() {
      $('#log').append('Глобальное событие ajaxStop<br>');
   });
   $('#btn1').click( function() {
      $.ajax({
         url: '/ajax.php',
         data: { txt1: '1', txt2: '2' },
         dataType: 'json',
         global: true,
         beforeSend: function() {
            $('#log').append('Локальное событие beforeSend<br>');
         },
         dataFilter: function(data) {
            $('#log').append('Локальное событие dataFilter<br>');
            return data;
         },
         success: function() {
            $('#log').append('Локальное событие success<br>');
         },
         error: function() {
            $('#log').append('Локальное событие error<br>');
         },
         complete: function() {
            $('#log').append('Локальное событие complete<br>');
         }
      }).done( function() {
         $('#log').append('Метод done()<br>');
      }).fail( function() {
         $('#log').append('Метод fail()<br>');
      }).always( function(dataOrXhr, status, xhrOrError) {
         $('#log').append('Метод always()<br>');
      });
   });
});
</script>
</body>
</html>

При успешном запросе результат будет следующим:

Глобальное событие ajaxStart
Локальное событие beforeSend
Глобальное событие ajaxSend
Локальное событие dataFilter
Локальное событие success
Метод done()
Метод always()
Глобальное событие ajaxSuccess
Локальное событие complete
Глобальное событие ajaxComplete
Глобальное событие ajaxStop

При ошибке разбора JSON получим такой результат:

Глобальное событие ajaxStart
Локальное событие beforeSend
Глобальное событие ajaxSend
Локальное событие dataFilter
Локальное событие error
Метод fail()
Метод always()
Глобальное событие ajaxError
Локальное событие complete
Глобальное событие ajaxComplete
Глобальное событие ajaxStop

Учебник по jQuery и AJAX
Учебник по jQuery и AJAX в формате PDF

Реквизиты

ЮMoney (Yandex-деньги): 410011140483022

ПАО Сбербанк:
Счет: 40817810855006152256
Реквизиты банка:
Наименование: СЕВЕРО-ЗАПАДНЫЙ БАНК ПАО СБЕРБАНК
Корреспондентский счет: 30101810500000000653
БИК: 044030653
КПП: 784243001
ОКПО: 09171401
ОКОНХ: 96130
Скриншот реквизитов

cpp