jQuery метод .ajaxStart()

Определение и применение

jQuery метод .ajaxStart() позволяет задать функцию (обработчик события), которая вызывается после того как последовал первый AJAX запрос (при этом отсутствуют другие неотправленные AJAX запросы).

Обращаю Ваше внимание, что каждый раз, когда AJAX запрос отправляется, jQuery проверяет есть ли какие-нибудь другие невыполненные AJAX запросы, если нет, то инициирует событие ajaxStart, при этом все обработчики события, которые были зарегистрированы при помощи метода .ajaxStart() будут выполнены в данный момент.

Если методы $.ajax(), или $.ajaxSetup() используются с установленным параметром global со значением false, то обработчик ajaxStart не будет вызван. Начиная с версии jQuery 1.9, все обработчики для глобальных AJAX событий, должны быть прикреплены к объекту document следующием образом:

$( document ).ajaxEvent( handler ) // пример добавления обработчика для глобального AJAX события

jQuery синтаксис:

Синтаксис 1.0:
.ajaxStart( handler )

handler - Function() // функция не принимает параметров

Добавлен в версии jQuery

1.0

Значения параметров

Параметр	Описание
handler	позволяет задать функцию (обработчик события), которая вызывается после того как последовал первый AJAX запрос. Функция используется без параметров.

Пример использования

<!DOCTYPE html>
<html>
	<head>
		<title>Использование метода .ajaxStart()</title>
		<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
		<script>
	$( document ).ready(function(){
	  $( "button" ).click(function(){ // задаем функцию при нажатиии на элемент <button>
	    $( ".first" ).load( "test.php" ); // с использованием AJAX запроса загружаем данные с сервера и размещаем, возвращенный HTML код внутри элемента <div> с классом .first
	    $( ".second" ).load( "test.php" ); // с использованием AJAX запроса загружаем данные с сервера и размещаем, возвращенный HTML код внутри элемента <div> с классом .second
	  });
	  var num = 0; // создаем переменную
	  $( document ).ajaxStart(function(){ // добавляем обработчик события
	    num++; // инкерементируем переменную  
	    $( "span" ).text( "It's ajaxStart " + num ); // добавляем в элемент  <span> текстовое содержимое и значение переменной num
	  })
	});
		</script>
	</head>
	<body>
		<button>Клик</button><span></span>
		<br><br>
		<div class = "first"></div>
		<div class = "second"></div>
	</body>
</html>

В этом примере с использованием jQuery метода .load() мы при нажатии на элемент <button> (кнопка) с использованием двух AJAX запросов загружаем данные с сервера и размещаем, возвращенный HTML код внутри элементов <div> с классами .first и .second. Загружаемый файл ("test.php") содержит следующий HTML код:

<h1>Заголовок первого уровня</h1>
<p>Обычный параграф</p>

С использованием метода .ajaxStart() задаем функцию (обработчик события), которая вызывается после того как последовал первый AJAX запрос и при этом отсутствуют другие неотправленные AJAX запросы. Функция увеличивает значение переменной на один (выступает в роли счетчика) и с использованием метода .text() производит добавление текстового содержимого со значением переменной.

Обратите внимание на то, что не смотря на то, что мы используем два AJAX запроса, функция .ajaxStart() срабатывает только один раз после нажатия на кнопку.

Результат нашего примера:

Пример использования jQuery метода .ajaxStart(). — Пример использования jQuery метода .ajaxStart()

jQuery AJAX