jQuery: отслеживание хода выполнения запроса на загрузку

Question

Я искал способ отследить объем данных, загруженных в запросе jQuery .load().То, что я хочу, - это панель, которая увеличивается при увеличении объема загружаемых данных - индикатор выполнения.И этот индикатор выполнения должен прослушивать запрос .load().

В течение моих 2 часов исследований я занимался долгосрочным пулированием, JSON и т. Д.Но я не могу понять, нахожусь ли я на правильном пути или нет.

Как заставить индикатор выполнения прослушивать запрос jQuery .load() и увеличивать его пропорционально количеству загруженных данных?

Answer 1

Вы можете разбить ваш .load() вызов на несколько меньших запросов AJAX, а по завершении каждого запроса обновить индикатор выполнения и запустить следующий запрос AJAX. Нет события, которое можно привязать к ajax-progress, ответ сервера отправляется «все сразу», а функция обратного вызова success запроса AJAX вызывается, как только весь ответ получен браузером.

$(function () {
    var total    = 5,
        current  = 1,
        response = [];
    function do_ajax() {
        $.ajax({
            url : 'server-side.php?page=' + current
            success : function (serverResponse) {
                response[response.length] = serverResponse;
                $('#progress-bar').text(current + ' of ' + total + ' are done');
                current++;
                if (current <= total) {
                    do_ajax();
                }
            }
        });
    }
});

Answer 2

Когда у нас была такая задача отслеживать состояние длинного процесса ajax.
То, что у нас есть - это запрос к другой странице, где подсчитываются фактические данные, хранящиеся или обрабатываемые на сервере, и в ответ указывается значение в процентах. Так

var stillLoading = true;
$.get('long-process-url', function(data){
    stillLoading = false;
    //code on success
});

checkStatus()    

function checkStatus() {
    if(stillLoading) {
        setTimeout(function(){
            $.get('get-stats-of-process-url', function(data){
                $('#percent').val(data);
                checkStatus();
            }
        }, 1000);
     }
}