прогресс-бар php, javascript, ajax

[egoriy33]

Здравствуйте все!
Пытаюсь реализовать js, php прогресс бар.
GPT дал такой вариант - но он у меня не работает - я его предельно упростил для примера
клиентская часть

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$.ajax({
    url: 'testProgress.php',
    type: 'POST',
    dataType: 'json',
    xhr: function() {
        var xhr = new window.XMLHttpRequest();
        xhr.addEventListener("progress", function(evt) {
            console.log(evt);
            if (evt.lengthComputable) {
                var percentComplete = evt.loaded / evt.total;
                console.log(percentComplete);
            }
        }, false);
        return xhr;
    },
    beforeSend:function(){               
    },
    success: function(response) {
    // обработка успешного выполнения запроса
    },
    error: function(xhr, status, error) {
    // обработка ошибки выполнения запроса
    }
});
</script>

на стороне сервера

<?
    $total = 180;
    for($i = 1; $i < $total; $i++){
        sleep(1);
        ob_start();
        $progress = floor(($i / $total)*100);           
        echo json_encode(['progress' => $progress]);   
        ob_flush();
        flush();
    }
?>

Может у кого-нибудь есть идеи, что я делаю не так?
Буду очень благодарен.
Спасибо!

 

[weregod]

подпишись на GPTv4, авось дадёт верный ответ.