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

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

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

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

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

Выведем текст, полученный с сервера.

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

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

$("#div1").ajaxComplete(function(e, xhr) {
   if (xhr.readyState == 4 && xhr.status == 200) {
      alert(xhr.responseText);
   }
   else {
      alert("Ошибка");
   }
});
  • ajaxStop() — срабатывает в самом конце запроса. В качестве параметра указывается ссылка на функцию следующего формата.
function <Название функции>() {
   // Обрабатываем событие
}

Текущий элемент доступен внутри обработчиков через указатель this. Обратите внимание на то, что указатель this ссылается на текущий элемент объектной модели документа, а не на элемент коллекции jQuery.

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

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

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

$.ajax({
   url: "/ajax.php",
   dataType: "html",
   data: { id:1, txt:"Данные" },
   global: false // Глобальные обработчики отключены
});

Продемонстрируем последовательность прохождения событий (листинг 11.16).

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

<!doctype html>
<html>
<head>
<title>Последовательность событий AJAX</title>
<meta charset="utf-8">
<script src="js/jquery.js"></script>
<script>
$(document).ready(function() {
   $("#div1").ajaxStart(function() {
      $(this).append("Глобальное событие ajaxStart<br>");
   }).ajaxSend(function() {
      $(this).append("Глобальное событие ajaxSend<br>");
   }).ajaxSuccess(function() {
      $(this).append("Глобальное событие ajaxSuccess<br>");
   }).ajaxError(function() {
      $(this).append("Глобальное событие ajaxError<br>");
   }).ajaxComplete(function() {
      $(this).append("Глобальное событие ajaxComplete<br>");
   }).ajaxStop(function() {
      $(this).append("Глобальное событие ajaxStop<br>");
   });
   $(":button").click(function() {
      $.ajax({
         url: "/ajax.php",
         dataType: "html",
         cache: false,
         beforeSend: function() {
            $("#div1").append("Локальное событие beforeSend<br>");
         },
         dataFilter: function(data) {
            $("#div1").append("Локальное событие dataFilter<br>");
            return data;
         },
         success: function() {
            $("#div1").append("Локальное событие success<br>");
         },
         error: function() {
            $("#div1").append("Локальное событие error<br>");
         },
         complete: function() {
            $("#div1").append("Локальное событие complete<br>");
         },
         data: { id:1, txt:"Данные" }
      });
   });
});
</script>
</head>
<body>
<div id="div1"></div>
<input type="button" value="Получить данные">
</body>
</html>

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

Глобальное событие ajaxStart
Локальное событие beforeSend
Глобальное событие ajaxSend
Локальное событие dataFilter
Локальное событие success
Глобальное событие ajaxSuccess
Локальное событие complete
Глобальное событие ajaxComplete
Глобальное событие ajaxStop

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

Глобальное событие ajaxStart
Локальное событие beforeSend
Глобальное событие ajaxSend
Локальное событие error
Глобальное событие ajaxError
Локальное событие complete
Глобальное событие ajaxComplete
Глобальное событие ajaxStop

Самоучитель по jQuery
Самоучитель по jQuery Учебник по jQuery 3.5.1 и AJAX в формате PDF

Помощь сайту

Yandex-деньги: 410011140483022

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

Поиск по сайту в Яндексе