ajax-handlers.md

Обработчики событий

Для удобства разработки AJAX-запросы бросают несколько событий, и их, естественно, можно и нужно обрабатывать. jQuery позволяет обрабатывать эти события для каждого AJAX-запроса и в отдельности и глобально. Приведу схемку, на которой наглядно виден порядок возникновения событий в jQuery:

AJAX Events

Вот и полный список событий с небольшими ремарками:

событие	описание
ajaxStart	данное событие возникает в случае, когда побежал первый AJAX-запрос, и при этом других активных AJAX-запросов в данный момент нет
beforeSend	возникает до отправки запроса, и позволяет редактировать XMLHttpRequest, локальное событие
ajaxSend	возникает до отправки запроса, как и beforeSend
success	возникает по возвращении ответа, когда в нём нет ошибок, локальное событие
ajaxSuccess	возникает по возвращении ответа, аналогично событию success
error	возникает в случае ошибки, локальное событие
ajaxError	возникает в случае ошибки
complete	возникает по завершении текущего AJAX-запроса при любом раскладе, локальное событие
ajaxComplete	глобальное событие, аналогичное complete
ajaxStop	данное событие возникает в случае, когда больше нет активных AJAX-запросов

Пример для отображения элемента с id="loading" во время выполнения любого AJAX-запроса (т.е. мы обрабатываем глобальное событие):

$(document).on("ajaxSend", function() {
    $("#loading").show(); // показываем элемент
}).on("ajaxStop", function(){
    $("#loading").hide(); // скрываем элемент
});

{% hint style="warning" %} Это задачка по юзабилити – мы всегда должны держать пользователя сайта в курсе дела о происходящем на странице и отправка AJAX-запроса тоже попадает под разряд «must know». Подобное решение у вас будет практически на любом сайте, где ходит AJAX. {% endhint %}

Для локальных событий – вносим изменения в опции метода ajax():

$.ajax({
    beforeSend: function() {
        // данный обработчик будет вызван перед отправкой данного AJAX-запроса
    },
    success: function() {
        // а этот при удачном завершении
    },
    error: function() {
        // этот при возникновении ошибки
    },
    complete: function() {
        // и по завершении запроса (удачном или нет)
    }
});

Можно глобальные обработчики отключить принудительно, используя флаг «global». Для этого выставляем его на false и пишем функционал в обход событий ajaxStart и ajaxStop:

$.ajax({
    global: false,
    beforeSend: function() {
        // ...
    },
    success: function() {
        // ...
    },
    error: function() {
        // ...
    },
    complete: function() {
        // ...
    }
});

Данная опция частенько помогает избежать конфликтов при работе с AJAX-запросами, но не стоит ей злоупотреблять.