Pro jQuery
Адам Фриман
Использование глобальных событий Ajax
В дополнение к событиям каждого запроса, которые я описал в предыдущей главе, jQuery также определяет набор глобальных событий, которые можно использовать, чтобы осуществлять мониторинг всех запросов Ajax, которые сделаны вашим приложением. В таблице 15-6 представлены методы для работы с глобальными событиями.
Таблица 15-6: Методы jQuery для Ajax событий
Метод | Описание |
ajaxComplete(function) |
Регистрирует функцию, которая должна быть вызвана, когда завершается Ajax запрос (независимо от того, был он удачным или нет) |
ajaxError(function) |
Регистрирует функцию, которая должна быть вызвана, если Ajax запрос сталкивается с ошибкой |
ajaxSend(function) |
Регистрирует функцию, которая должна быть вызвана, прежде чем начнется Ajax запрос |
ajaxStart(function) |
Регистрирует функцию, которая должна быть вызвана, когда начнется Ajax запрос |
ajaxStop(function) |
Регистрирует функцию, которая должна быть вызвана, когда завершатся все Ajax запросы |
ajaxSuccess(function) |
Регистрирует функцию, которая должна быть вызвана, если Ajax запрос был удачным |
Вы используете эти методы для любого элемента в документе, так же как вы делаете это с обычными событийными методами, которые я описал в главе 9. Вы определяете функцию, которая должна быть вызвана, если произойдет соответствующее событие. Методы ajaxStart
и ajaxStop
не передают своим функциям никаких аргументов. Другие методы добавляют своим функциям следующие аргументы:
- Объект
Event
, описывающий событие - Объект
jqXHR
, описывающий запрос - Объект настроек, который содержит конфигурацию запроса
Метод ajaxError
добавляет функции дополнительный аргумент, который является описанием произошедшей ошибки.
Совет
В документации jQuery говорится, что функции методов
ajaxComplete
иajaxSuccess
, содержатXMLHttpRequest
объект, а неjqXHR
объект. Это неправда: всем функциям, которые принимают аргумент, добавляетсяjqXHR
объект.
Есть две важные вещи, касаемые этих методов, которые нужно запомнить. Первое: функции будут запускаться для событий всех Ajax запросов, что обозначает, что вы должны очень быть абсолютно уверены в своих предположениях и действиях, которые касаются специфичных запросов. Второе: вам нужно определить эти методы, прежде чем вы начнете делать Ajax запросы, чтобы убедиться, что функции запускаются правильно. Если вы вызовете глобальные методы после вызова метода ajax
, вы рискуете, что Ajax запрос закончится, прежде чем jQuery должным образом зарегистрирует ваши функции обработки событий. В листинге 15-12 показан пример использования методов для глобальных Ajax событий.
Листинг 15-12: Использование методов глобальных Ajax событий
<style type="text/css">
.ajaxinfo {
color: blue;
border: medium solid blue;
padding: 4px;
margin: auto;
margin-bottom: 2px;
width: 200px;
text-align: center;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
$('<div class=ajaxinfo ><label for="globalevents">Events:<input type="checkbox"'
+ 'id="globalevents" name="globalevents" checked></label></div>')
.insertAfter('h1');
$('<div id="info" class=ajaxinfo/>').text("Ready").insertAfter('h1');
$(document)
.ajaxStart(function () {
displayMessage("Ajax Start")
})
.ajaxSend(function (event, jqxhr, settings) {
displayMessage("Ajax Send: " + settings.url)
})
.ajaxSuccess(function (event, jqxhr, settings) {
displayMessage("Ajax Success: " + settings.url)
})
.ajaxError(function (event, jqxhr, settings, errorMsg) {
displayMessage("Ajax Error: " + settings.url)
})
.ajaxComplete(function (event, jqxhr, settings) {
displayMessage("Ajax Complete: " + settings.url)
})
.ajaxStop(function () {
displayMessage("Ajax Stop")
})
function displayMessage(msg) {
$('#info').queue(function () {
$(this).fadeTo("slow", 0).queue(function () {
$(this).text(msg).dequeue()
}).fadeTo("slow", 1).dequeue();
})
}
$('button').click(function (e) {
$('#row1, #row2').children().remove();
$.ajax("mydata.json", {
global: $('#globalevents:checked').length > 0,
success: function (data, status, jqxhr) {
var template = $('#flowerTmpl');
template.tmpl(data.slice(0, 3)).appendTo("#row1");
template.tmpl(data.slice(3)).appendTo("#row2");
}
});
e.preventDefault();
})
});
</script>
В этом примере я зарегистрировал функции для всех глобальных событий Ajax. Эти функции вызывают функцию displayMessage
и показывают, какое событие было запущено. Поскольку Ajax события могут совершаться очень быстро, я использовал очередь эффектов, чтобы замедлить переход от одного сообщения к другому, таким образом, вы можете четко проследить последовательность (это не замедляет Ajax запросы, только лишь отображение событийных сообщений). И наконец, чтобы вы могли управлять запуском данной последовательности, я добавил обработчик для элемента button
события click
, который начинает Ajax запрос. Отображение статуса вы можете увидеть на рисунке 15-2.
Рисунок 15-2: Отображение глобальных событий Ajax
Управление глобальными событиями
Вы обратили внимание, что я добавил в документ флажок (check box). Во время вызова функции ajax
я использую флажок для установки значения настройки global
, как показано в листинге 15-13.
Листинг 15-13: Использование настройки global
$.ajax("mydata.json", {
global: $('#globalevents:checked').length > 0,
success: function (data, status, jqxhr) {
var template = $('#flowerTmpl');
template.tmpl(data.slice(0, 3)).appendTo("#row1");
template.tmpl(data.slice(3)).appendTo("#row2");
}
});
Если значение настройки global
является ложным, Ajax запрос не генерирует глобальные Ajax события. Вы можете проверить это сами, используя пример. Снимите галочку в check box и нажмите на кнопку. Вы увидите, что Ajax запрос выполняется без отображения какой-либо информации о статусе.