jQuery метод .ajaxSend()

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

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

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

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

jQuery синтаксис:

Синтаксис 1.0:

.ajaxSend( handler )

handler - Function( Event event, jqXHR jqXHR, PlainObject ajaxOptions )

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

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

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

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

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

index.html

HTML

<button>Клик</button><span></span> <br /><br />
<div></div>

main.js

JavaScript

$(document).ready(function () {
    $('button').click(function () {
        // задаем функцию при нажатиии на элемент <button>
        $('div').load('message.html') // с использованием AJAX запроса загружаем данные с сервера и размещаем, возвращенный HTML код внутри элемента <div>
    })
    $(document).ajaxSend(function (event, xhr, options) {
        // добавляем обработчик события
        if (options.url == 'message.html')
            // если в объекте, содержащим настройки AJAX запроса ключ url содержит значение message.html
            $('span').text("it's ajaxSend") // то добавить в элемент  <span> текстовое содержимое
    })
})

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>. Загружаемый файл ("message.html") содержит следующий HTML код:

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

Кроме того, мы с использованием метода .ajaxSend() задаем функцию (обработчик события), которая будет выполняться каждый раз перед тем как AJAX запрос будет выполнен. Функция производит проверку на наличие в объекте, содержащего настройки AJAX запроса ключа "url", который содержит значение message.html. Если содержит, то в элемент <span> с использованием метода .text() производит добавление текстового содержимого.

<button>Клик</button><span></span><br /><br />
<div></div>

$(document).ready(function () {
    $('button').click(function () {
        $('div').load('message.html')
    })

    $(document).ajaxSend(function (event, xhr, options) {
        if (options.url == 'message.html') $('span').text("it's ajaxSend")
    })
})