Версия для печати. Взято с сайта phpsql.ru

На главную   Назад   Вперед

Глобальные обработчики событий 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 http-equiv="Content-Type" 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<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
Локальное событие succcss
Глобальное событие ajaxSucccss
Локальное событие complete
Глобальное событие ajaxComplete
Глобальное событие ajaxStop

При ошибке получим такой результат.
Глобальное событие ajaxStart
Локальное событие beforeSend
Глобальное событие ajaxSend
Локальное событие error
Глобальное событие ajaxError
Локальное событие complete
Глобальное событие ajaxComplete
Глобальное событие ajaxStop

 
Предыдущая   На главную   Следующая