Какие бывают глобальные обработчики событий в AJAX

Вы здесь: Главная >> Jquery-учебник >> Какие бывают глобальные обработчики событий в AJAX

Какие бывают глобальные обработчики событий в AJAX

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

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

ajaxStart () — вызывается в самом начале запроса. В качестве параметра указывается ссылка на функцию следующего формата.
function Название функции() { // Обрабатываем событие }

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

Выведем значение опции dataType.
$("#divl").ajaxSend(function(e, xhr, options) {
alert(options.dataType);
});

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

Выведем текст, полученный с сервера.
$("#divl").ajaxSucccss(function(е, xhr, options) {
alert(xhr.responseText);
});

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

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

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

$("#divl").ajaxComplete(function(е, xhr) {
if (xhr.readyState == 4 && xhr.status == 200) { alert(xhr.responseText);
}
else {
alert("Ошибка");
}
});

ajaxStopO — срабатывает в самом конце запроса. В качестве параметра указывается ссылка на функцию следующего формата.

function Название функции ()
{ // Обрабатываем событие
}

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

Назначить обработчик можно также с помощью метода bind (). В первом параметре указывается глобальное событие AJAX, а во втором — ссылка на функцию, которая будет вызвана при наступлении события.
$("#divl") .bindC`ajaxSucccss", function () {
$(this).append("Ответ успешно получен<Ьг>");
}).bind("ajaxError", function() {
$(this).append("Произошла ошибка<Ьг>");
});

Если в функции $.ajax() или $. aj axSetup () опция global имеет значение false, то глобальные обработчики вызываться не будут. По умолчанию опция имеет значение true.
$.ajax({
url: "/ajax.php", dataType:
"html", data: { id:l,
txt:"Данные" },
global: false // Глобальные обработчики отключены
};

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

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

<html>
<head>
<title>Последовательность событий AJAX</title>
<meta httpequiv="ContentType" content="text/html;
charset=utf-8">
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
<!
$(document).ready(function() {
   $("#div1").ajaxStart(function() {
      $(this).append("Глобальное событие ajaxStart
");
   }).ajaxSend(function() {
      $(this).append("Глобальное событие ajaxSend
");
   }).ajaxSuccess(function() {
      $(this).append("Глобальное событие ajaxSuccess
");
   }).ajaxError(function() {
      $(this).append("Глобальное событие ajaxError
");
   }).ajaxComplete(function() {
      $(this).append("Глобальное событие ajaxComplete
");
   }).ajaxStop(function() {
      $(this).append("Глобальное событие ajaxStop
");
   });
   $(":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
");
         },
         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
Локальное событие succcss
Глобальное событие ajaxSucccss
Локальное событие complete
Глобальное событие ajaxComplete
Глобальное событие ajaxStop

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

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

Сергей Владимирцев
07.03.2011

Изучаем Java

Какие бывают глобальные обработчики событий в AJAX

Разделы

Партнеры сайта