Глобальные события ajax

В предыдущих параграфах мы посмотрели, как использовать функции обратного вызова для обработки ответа с сервера. Но кроме локальных функций, мы можем использовать также обрабатывать глобальные события AJAX. Для обработки данных глобальных событий в jQuery предоставляет следующие методы:

• ajaxComplete: регистрирует обработчик завершения запроса AJAX

• ajaxError: регистрирует обработчик, который будет вызываться, если запрос завершился с ошибкой

• ajaxSend: регистрирует функцию, которая будет срабатывать перед отправкой запроса

• ajaxStart: регистрирует обработчик, который запускается при запросе ajax

• ajaxStop: регистрирует обработчик, который запускается при завершении запросов ajax

• ajaxSuccess: регистрирует функцию, которая запускается при успешном завершении запроса

Все методы принимают в качестве параметра функцию обработчика. В свою очередь данная функция во всех методах, кроме ajaxStart и ajaxStop может принимать три параметра:

• объект Event, содержащий данные о событии

• объект jqXHR, связанный с данным ajax-запросом

• дополнительные параметры

Для управления глобальными событиями предназначена опция global в методе ajax. По умолчанию она имеет значение true, то есть глобальные события будут генерироваться, и мы их сможем обработать. Если же этот параметр равен false, то события не будут генерироваться.

Начиная с версии jquery 1.8 глобальные события следует прикреплять к объекту document:

$(function(){
	$(document).ajaxStart(function() {
		$("#log").append("<p>Сработало событие ajaxStart</p>" );
	});
	$('button').click(function() {
		$("#result").load('ajax.php');
	});
});

При нажатии на кнопку будет выполняться ajax-запрос и вместе с этим будет инициировано событие ajaxStart, в результате чего в один элемент добавится запись о сработавшем событии, а в другой будет загружен ответ от сервера.

Подобным образом мы можем использовать остальные методы:

$(document)
	.ajaxStart(function() {
		$("#log").append("<p>Начало запроса</p>" );
	})
	.ajaxSend(function(event, jqxhr, settings) {
		$("#log").append("<p>Запрос отправлен по адресу: "+settings.url+"</p>" );
	})
	.ajaxStop(function() {
		$("#log").append("<p>Все запросы завершены</p>" );
	})
	.ajaxError(function(event, jqxhr, settings) {
		$("#log").append("<p>Ошибка при выполнении запроса</p>" );
	})
	.ajaxComplete(function(event, jqxhr, settings) {
		$("#log").append("<p>Запрос завершен</p>" );
	})
	.ajaxSuccess(function(event, jqxhr, settings) {
		$("#log").append("<p>С сервера получены данные: "+jqxhr.responseText+"</p>" );
	});
	$('button').click(function() {
		$("#result").load('ajax.php');
	});