加载脚本的 AJAX 进度条

Question

I have a big problem to make a progress bar in AJAX. The whole page is in AJAX, inside one of the webpage is AJAX which loads a function to get some big rows from the database.

I tried to make progress bar in this script in a foreach loop a flush() method and by writing/reading to $_SESSION, but still nothing. I really tried everything I don`t know how to do this. Need only this to complete my project. Could someone help me with this?

It is anyway which script I want to load, how is the template for this progress bar to use it in GET or POST ajax, for any AJAX.

<script>
    jQuery(document).ready(function($) {
            
            $(document).on('click','#save',function () {
                setTimeout(getProgress,1000);
              $(this).text('Pobieram analizę...');
              $.urlParam = function(name){
             var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.href);
    if (results==null){
       return null;
    }
    else{
       return decodeURI(results[1]) || 0;
    }
            }
        var id = $.urlParam('id');
        var idt = $.urlParam('idt');
                  $.ajax({
                                 url: "views/getresults.php?id="+id+"&idt="+idt,
                    success: function(data) {
                        $("#loadresults").append(data);
                    }
                });
                setTimeout(getProgress,3000);
            return false;
            });
            function getProgress(){
                
                $.ajax({
                    url: 'views/listen.php',
                    success: function(data) {
                        if(data<=100 && data>=0){
                            console.log(data);
                            $('#loadresults').html('<div id="progress"><div class="progress-bar" role="progressbar" style="width:'+ (data / 100)*100 +'%">'+ data + '/' +100+'</div></div>');
                            setTimeout(getProgress,1000);
                            console.log('Repeat');
                        } else {
                            $('#loadresults').text('Pobieram dane');
                            console.log('End');
                        }
                    }
                });
            }
        });
        </script>

and here is a getresults.php

    foreach($result as $resul) {
    $count++;
    session_start();
    $_SESSION['progress'] = $count;
    $_SESSION['total'] = 100;
    session_write_close();
    sleep(1);
}
unset($_SESSION['progress']); 

and a get progress function listen.php

<?php
session_start();
echo (!empty($_SESSION['progress']) ? $_SESSION['progress'] : '');

if (!empty($_SESSION['progress']) && $_SESSION['progress'] >= $_SESSION['total']) {
    unset($_SESSION['progress']);
}

?>

Answer 1

Writing and reading session doesn't work because the standard behavior of PHP is to lock the session file while your main code is being executed.

Try to create a file and update the its content with the percentage done during the execution of your function. Something like:

<?php
function slowFunction() {
    $file = uniqid();
    file_put_contents($file, 0);
    // Long while that makes your stuff
    // you have to know how many loops you will make to calculate the progress
    $total = 100;
    $done = 0;
    while($done < $total) {
        $done++;
        // You may want not to write to the file every time to minimize changes of being writing the file 
        // at the same time your ajax page is fetching it, i'll let it to you...
        $progress = $done / $total;
        file_put_contents($file, $progress);
    }
    unlink($file); // Remove your progress file
}

?>

Answer 2

You can't get the progress of the data download from ajax. Once you request you to the server, the next response will be only after fetching the data or when the error occurs.

The solution to you is, get the data as fractions. Such as first download the 1/10th of the data, and in the success callback, recursively call the ajax again requesting the 2/10th data. On each success callback, you could change the progress bar.

Answer 3

查看服务器端事件或长轮询作为选项