Cách rõ ràng nhất để có được tiến độ của yêu cầu ajax JQuery là gì?

Trong javascript thuần túy rất đơn giản: chỉ cần đính kèm lệnh gọi lại {XMLHTTPRequest}.onprogress

var xhr = new XMLHttpRequest();

xhr.onprogress = function(e){
    if (e.lengthComputable)
        var percent = (e.loaded / e.total) * 100;
};

xhr.open('GET', 'http://www...', true);
xhr.onreadystatechange = function() {
    ...
};
xhr.send(null);

nhưng tôi đang thực hiện một trang web ajax tải xuống dữ liệu html bằng JQuery ( $.get()hoặc $.ajax()) và tôi đã tự hỏi đâu là cách tốt nhất để có được tiến trình của một yêu cầu để hiển thị nó với một thanh tiến trình nhỏ nhưng thật kỳ lạ, tôi không tìm bất cứ thứ gì hữu ích trong tài liệu JQuery ...

Một cái gì đó như thế này cho $.ajax(mặc dù chỉ HTML5):

$.ajax({
    xhr: function() {
        var xhr = new window.XMLHttpRequest();
        xhr.upload.addEventListener("progress", function(evt) {
            if (evt.lengthComputable) {
                var percentComplete = evt.loaded / evt.total;
                //Do something with upload progress here
            }
       }, false);

       xhr.addEventListener("progress", function(evt) {
           if (evt.lengthComputable) {
               var percentComplete = evt.loaded / evt.total;
               //Do something with download progress
           }
       }, false);

       return xhr;
    },
    type: 'POST',
    url: "/",
    data: {},
    success: function(data){
        //Do something on success
    }
});

jQuery đã thực hiện các hứa hẹn, vì vậy tốt hơn nên sử dụng công nghệ này và không chuyển logic sự kiện sang optionstham số. Tôi đã tạo một plugin jQuery bổ sung lời hứa tiến độ và bây giờ nó dễ sử dụng giống như các lời hứa khác:

$.ajax(url)
  .progress(function(){
    /* do some actions */
  })
  .progressUpload(function(){
    /* do something on uploading */
  });

Kiểm tra nó tại github

Tôi đã thử về ba cách khác nhau để chặn việc xây dựng đối tượng Ajax:

1. Lần thử đầu tiên của tôi được sử dụng xhrFields, nhưng điều đó chỉ cho phép một người nghe, chỉ đính kèm với tiến trình tải xuống (không tải lên) và yêu cầu những gì có vẻ giống như sao chép và dán không cần thiết.
2. Lần thử thứ hai của tôi đã gắn một progresshàm vào lời hứa trả về, nhưng tôi phải duy trì mảng trình xử lý của riêng mình. Tôi không thể tìm thấy một đối tượng tốt để đính kèm các trình xử lý vì một nơi tôi muốn truy cập vào XHR và một nơi khác tôi có quyền truy cập vào jQuery XHR, nhưng tôi chưa bao giờ có quyền truy cập vào đối tượng hoãn lại (chỉ là lời hứa của nó).
3. Lần thử thứ ba của tôi đã cho tôi quyền truy cập trực tiếp vào XHR để đính kèm các trình xử lý, nhưng lại yêu cầu nhiều mã sao chép và dán.
4. Tôi đã kết thúc lần thử thứ ba của mình và thay thế jQuery ajaxbằng của riêng tôi. Thiếu sót tiềm ẩn duy nhất là bạn không thể sử dụng xhr()cài đặt của riêng mình nữa. Bạn có thể cho phép điều đó bằng cách kiểm tra xem có phải options.xhrlà một chức năng hay không.

Tôi thực sự gọi promise.progresshàm của mình xhrProgressđể tôi có thể dễ dàng tìm thấy nó sau này. Bạn có thể muốn đặt tên khác cho nó để tách phần nghe tải lên và tải xuống. Tôi hy vọng điều này sẽ giúp ích cho ai đó ngay cả khi người đăng ban đầu đã có những gì anh ta cần.

(function extend_jQuery_ajax_with_progress( window, jQuery, undefined )
{
var $originalAjax = jQuery.ajax;
jQuery.ajax = function( url, options )
{
    if( typeof( url ) === 'object' )
    {options = url;url = undefined;}
    options = options || {};

    // Instantiate our own.
    var xmlHttpReq = $.ajaxSettings.xhr();
    // Make it use our own.
    options.xhr = function()
    {return( xmlHttpReq );};

    var $newDeferred = $.Deferred();
    var $oldPromise = $originalAjax( url, options )
    .done( function done_wrapper( response, text_status, jqXHR )
    {return( $newDeferred.resolveWith( this, arguments ));})
    .fail( function fail_wrapper( jqXHR, text_status, error )
    {return( $newDeferred.rejectWith( this, arguments ));})
    .progress( function progress_wrapper()
    {
        window.console.warn( "Whoa, jQuery started actually using deferred progress to report Ajax progress!" );
        return( $newDeferred.notifyWith( this, arguments ));
    });

    var $newPromise = $newDeferred.promise();
    // Extend our own.
    $newPromise.progress = function( handler )
    {
        xmlHttpReq.addEventListener( 'progress', function download_progress( evt )
        {
            //window.console.debug( "download_progress", evt );
            handler.apply( this, [evt]);
        }, false );
        xmlHttpReq.upload.addEventListener( 'progress', function upload_progress( evt )
        {
            //window.console.debug( "upload_progress", evt );
            handler.apply( this, [evt]);
        }, false );
        return( this );
    };
    return( $newPromise );
};
})( window, jQuery );

jQuery có một AjaxSetup()chức năng cho phép bạn đăng ký các trình xử lý ajax toàn cục, chẳng hạn như beforeSendvà completecho tất cả các lệnh gọi ajax cũng như cho phép bạn truy cập xhrđối tượng để thực hiện tiến trình mà bạn đang tìm kiếm

http://www.htmlgoodies.com/beyond/php/show-progress-report-for-long-running-php-scripts.html

Tôi đã tìm kiếm một giải pháp tương tự và thấy giải pháp này đã được sử dụng đầy đủ.

var es;

function startTask() {
    es = new EventSource('yourphpfile.php');

//a message is received
es.addEventListener('message', function(e) {
    var result = JSON.parse( e.data );

    console.log(result.message);       

    if(e.lastEventId == 'CLOSE') {
        console.log('closed');
        es.close();
        var pBar = document.getElementById('progressor');
        pBar.value = pBar.max; //max out the progress bar
    }
    else {

        console.log(response); //your progress bar action
    }
});

es.addEventListener('error', function(e) {
    console.log('error');
    es.close();
});

}

và đầu ra máy chủ của bạn

header('Content-Type: text/event-stream');
// recommended to prevent caching of event data.
header('Cache-Control: no-cache'); 

function send_message($id, $message, $progress) {
    $d = array('message' => $message , 'progress' => $progress); //prepare json

    echo "id: $id" . PHP_EOL;
    echo "data: " . json_encode($d) . PHP_EOL;
    echo PHP_EOL;

   ob_flush();
   flush();
}


//LONG RUNNING TASK
 for($i = 1; $i <= 10; $i++) {
    send_message($i, 'on iteration ' . $i . ' of 10' , $i*10); 

    sleep(1);
 }

send_message('CLOSE', 'Process complete');

Làm theo các bước để hiển thị Tiến trình của Yêu cầu Ajax:

1. Tạo Spinner bằng Html & CSS hoặc sử dụng Bootstrap Spinner.
2. Hiển thị Spinner khi người dùng cuối yêu cầu Dữ liệu AJAX cho vòng lặp vô hạn hoặc cho thời gian giới hạn ngưỡng.
3. Vì vậy, sau khi kết quả THÀNH CÔNG / LỖI của Yêu cầu AJAX, hãy xóa Spinner hiện đang hiển thị và hiển thị kết quả của bạn.

Để dễ dàng hơn, tôi khuyên bạn nên sử dụng Lớp JS để Tự động Hiển thị & Ẩn con quay cho mục đích này.

Tôi hi vọng cái này giúp được!