Отображение индикатора выполнения при загрузке данных с помощью AJAX

При выполнении запроса AJAX, извлекающего данные из базы данных, это может занять некоторое время для возврата результатов. Чтобы предоставить пользователю обратную связь во время процесса загрузки, может отображаться индикатор выполнения.

Создание индикатора выполнения с помощью jQuery

Библиотека jQuery предлагает встроенные методы которые облегчают создание и манипулирование индикаторами выполнения. Чтобы добавить индикатор выполнения к вызову AJAX, вы можете прикрепить прослушиватель событий к объекту xhr:

$.ajax({
    xhr: function() {
        var xhr = new window.XMLHttpRequest();

        // Upload progress
        xhr.upload.addEventListener("progress", function(evt) {
            if (evt.lengthComputable) {
                var percentComplete = evt.loaded / evt.total;
                // Update the progress bar here
            }
        }, false);

        // Download progress
        xhr.addEventListener("progress", function(evt) {
            if (evt.lengthComputable) {
                var percentComplete = evt.loaded / evt.total;
                // Update the progress bar here
            }
        }, false);

        return xhr;
    },
    type: 'POST',
    url: "/",
    data: {},
    success: function(data) {
        // Hide the progress bar and display the results
    }
});

В этом коде:

• Прослушиватель событий прогресса для свойства загрузки отслеживает ход отправки данных на сервер.
• Прослушиватель событий прогресса для объекта xhr отслеживается ход получения данных с сервера.
• Вы можете использовать переменную процентовComplete, чтобы определить процент завершения и соответствующим образом обновить индикатор выполнения.
• После успешной обработки данных извлекаются и обрабатываются, индикатор выполнения можно скрыть, а результаты можно отобразить.

Реализуя этот подход, вы можете улучшить свои обратные вызовы AJAX с помощью удобного индикатора выполнения, обеспечивающего визуальную обратную связь во время обработки данных. погрузочные операции.