Главная страница   /   15.6. Использование глобальных событий Ajax (Pro jQuery

Pro jQuery

Pro jQuery

Адам Фриман

15.6. Использование глобальных событий 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 запрос выполняется без отображения какой-либо информации о статусе.