วิธีใดเป็นวิธีที่สะอาดที่สุดในการรับความคืบหน้าของคำขอ jQuery ajax

Question 1

ในจาวาสคริปต์ธรรมดานั้นง่ายมากเพียงแค่แนบการโทรกลับไปที่ {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);

แต่ฉันกำลังทำไซต์ ajax ที่ดาวน์โหลดข้อมูล html ด้วย JQuery ( $.get()หรือ$.ajax()) และฉันสงสัยว่าวิธีใดเป็นวิธีที่ดีที่สุดในการรับความคืบหน้าของคำขอเพื่อแสดงด้วยแถบความคืบหน้าเล็กน้อย แต่ฉันไม่อยากรู้ ค้นหาสิ่งที่เป็นประโยชน์ในเอกสาร JQuery ...

Question 2

สิ่งนี้สำหรับ$.ajax(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
    }
});

Question 3

jQuery ได้ดำเนินการตามสัญญาแล้วดังนั้นจึงเป็นการดีกว่าที่จะใช้เทคโนโลยีนี้และไม่ย้ายตรรกะเหตุการณ์ไปที่optionsพารามิเตอร์ ฉันสร้างปลั๊กอิน jQuery ที่เพิ่มสัญญาความคืบหน้าและตอนนี้มันใช้งานง่ายเหมือนกับสัญญาอื่น ๆ :

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

ลองดูที่github

Question 4

ฉันลองใช้วิธีสกัดกั้นการสร้างวัตถุ Ajax สามวิธี:

ความพยายามครั้งแรกของฉันใช้xhrFieldsแต่อนุญาตให้มีผู้ฟังเพียงคนเดียวเท่านั้นที่แนบกับความคืบหน้าในการดาวน์โหลด (ไม่ใช่การอัปโหลด) และต้องการสิ่งที่ดูเหมือนว่าจะคัดลอกและวางโดยไม่จำเป็น
ความพยายามครั้งที่สองของฉันแนบprogressฟังก์ชันเข้ากับสัญญาที่ส่งคืน แต่ฉันต้องรักษาอาร์เรย์ของตัวจัดการของฉันเอง ฉันไม่พบวัตถุที่ดีในการแนบตัวจัดการเพราะที่แห่งหนึ่งฉันเข้าถึง XHR และอีกแห่งหนึ่งฉันสามารถเข้าถึง jQuery XHR ได้ แต่ฉันไม่เคยเข้าถึงวัตถุที่รอการตัดบัญชี (มีเพียงสัญญาเท่านั้น)
ความพยายามครั้งที่สามของฉันทำให้ฉันสามารถเข้าถึง XHR ได้โดยตรงเพื่อเชื่อมต่อตัวจัดการ แต่จำเป็นต้องใช้รหัสคัดลอกและวางอีกครั้ง
ฉันปิดความพยายามครั้งที่สามและแทนที่ jQuery ajaxด้วยของฉันเอง ข้อบกพร่องเดียวที่อาจเกิดขึ้นคือคุณไม่สามารถใช้xhr()การตั้งค่าของคุณเองได้อีกต่อไป คุณสามารถอนุญาตได้โดยตรวจสอบว่าoptions.xhrเป็นฟังก์ชันหรือไม่

ฉันเรียกpromise.progressฟังก์ชันของฉันจริงๆxhrProgressเพื่อที่ฉันจะได้ค้นหาได้ง่ายในภายหลัง คุณอาจต้องการตั้งชื่ออย่างอื่นเพื่อแยกผู้ฟังที่อัปโหลดและดาวน์โหลด ฉันหวังว่านี่จะช่วยใครสักคนแม้ว่าโปสเตอร์ต้นฉบับจะมีสิ่งที่เขาต้องการอยู่แล้วก็ตาม

(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 );

Question 5

jQuery มีAjaxSetup()ฟังก์ชันที่ให้คุณลงทะเบียนตัวจัดการ ajax ระดับโลกเช่นbeforeSendและcompleteสำหรับการโทรของ ajax ทั้งหมดรวมทั้งอนุญาตให้คุณเข้าถึงxhrวัตถุเพื่อดำเนินการตามที่คุณกำลังมองหา

Question 6

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

ฉันกำลังค้นหาวิธีแก้ปัญหาที่คล้ายกันและพบว่าอันนี้ใช้เต็ม

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();
});

}

และเซิร์ฟเวอร์ของคุณส่งออก

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');

Question 7

ทำตามขั้นตอนเพื่อแสดงความคืบหน้าของคำขอ Ajax:

สร้าง Spinner โดยใช้ Html & CSS หรือใช้ Bootstrap Spinner
แสดง Spinner เมื่อผู้ใช้ปลายทางร้องขอข้อมูล AJAX สำหรับการวนซ้ำแบบไม่มีที่สิ้นสุดหรือสำหรับเวลา จำกัด ขีด จำกัด
ดังนั้นหลังจากผลลัพธ์ SUCCESS / ERROR ของ AJAX Request ให้ลบ Spinner ที่กำลังแสดงอยู่และแสดงผลลัพธ์ของคุณ

เพื่อให้ง่ายฉันขอแนะนำให้คุณใช้ JS Classes เพื่อแสดงและซ่อนสปินเนอร์แบบไดนามิกเพื่อจุดประสงค์นี้

ฉันหวังว่านี่จะช่วยได้!