jQuery метод .ajaxStart()

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

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

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

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

jQuery синтаксис:

Синтаксис 1.0:

.ajaxStart( handler )

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

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

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

Пример старого кода

Метод .ajaxStart() — пример 1

Нажмите ▶. Используйте кнопки в результате и наблюдайте изменения. Измените JavaScript и запустите пример повторно. Используется jQuery 4.0.0.

index.html

HTML

<button>Клик</button><span></span> <br /><br />
<div class="first"></div>
<div class="second"></div>

main.js

JavaScript

$(document).ready(function () {
    $('button').click(function () {
        // задаем функцию при нажатиии на элемент <button>
        $('.first').load('message.html') // с использованием AJAX запроса загружаем данные с сервера и размещаем, возвращенный HTML код внутри элемента <div> с классом .first
        $('.second').load('message.html') // с использованием AJAX запроса загружаем данные с сервера и размещаем, возвращенный HTML код внутри элемента <div> с классом .second
    })
    var num = 0 // создаем переменную
    $(document).ajaxStart(function () {
        // добавляем обработчик события
        num++ // инкерементируем переменную
        $('span').text("It's ajaxStart " + num) // добавляем в элемент  <span> текстовое содержимое и значение переменной num
    })
})

style.css

CSS

body {
  margin: 16px;
  font:
    16px/1.5 system-ui,
    sans-serif;
  overflow-wrap: anywhere;
}
img,
input,
select,
textarea,
button {
  max-width: 100%;
}

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

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

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

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

<button>Клик</button><span></span><br /><br />
<div class="first"></div>
<div class="second"></div>

$(document).ready(function () {
    $('button').click(function () {
        $('.first').load('message.html')
        $('.second').load('message.html')
    })
    var num = 0
    $(document).ajaxStart(function () {
        num++
        $('span').text("It's ajaxStart " + num)
    })
})