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

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

function <Название функции>() {
   // Обрабатываем событие
}
function <Название функции>([<Объект event>[,
         <Объект XMLHttpRequest>[, <Опции запроса>]]]) {
   // Обрабатываем событие
}

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

$("#div1").ajaxSend(function(e, xhr, options) {
   alert(options.dataType);
});
function <Название функции>([<Объект event>[,
         <Объект XMLHttpRequest>[, <Опции запроса>]]]) {
   // Обрабатываем событие
}

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

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

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

$("#div1").ajaxComplete(function(e, xhr) {
   if (xhr.readyState == 4 && xhr.status == 200) {
      alert(xhr.responseText);
   }
   else {
      alert("Ошибка");
   }
});
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
Предыдущая статья Все статьи Следующая статья