AJAX請求進度百分比日誌

Question

我從 http://www.dave-bond.com/blog/2010/01/JQuery-ajax-progress-HMTL5/閱讀內容，我試着在我自己的網站上使ajax進度條，但在控制檯我只有xhr響應，當PHP腳本完全完成。

我的JS代碼的一部分：

$('#userSaveData').on('click', function(e){ 
      e.preventDefault(); 
     var $form = $(this).closest('form'); 
     var route = $form.attr('action'); 
     var form_data = $form.serializeObject(); 
     $.ajax({ 
     xhr: function() 
     { 
       var xhr = new window.XMLHttpRequest(); 
       //Upload progress 
       xhr.upload.addEventListener("progress", function(evt){ 
        if (evt.lengthComputable) { 
         var percentComplete = evt.loaded/evt.total; 
         //Do something with upload progress 
         console.log(percentComplete); 
        } 
       }, false); 
       //Download progress 
       xhr.addEventListener("progress", function(evt){ 
        if (evt.lengthComputable) { 
         var percentComplete = evt.loaded/evt.total; 
         //Do something with download progress 
         console.log(percentComplete); 
        } 
       }, false); 
      return xhr; 
     }, 
     type: 'post', 
     url: route,//url to my script below 
     data: form_data, //some data, not used in script below 
     success: function(){ 
      console.log('completed'); 
     } 
     }); 
    return false; 
    }); 

例如，我測試的PHP腳本的一部分：

<?php 
    usleep(10000000); 
    echo true; 
?> 

我現在的控制檯日誌首先顯示1，然後經過約10秒控制檯。日誌寫'完成'

簡單地說，我想在ajax請求正在進行（php usleep時間約10秒）顯示在控制檯的ajax請求百分比（這是可能的？）。

請幫忙。

Answer 1

問題可能出在服務器端，因爲客戶端似乎是正確的。對usleep()的長時間調用可能會凍結服務器輸出，並且如果客戶端未收到HTTP響應狀態行，它甚至不能觸發XHR對象上的start事件（例如，服務可能會響應404狀態碼，這在協議級別是錯誤的並且被報告爲交付失敗）。

此外，在將事件傳遞給JS引擎之前，瀏覽器可能需要累積一定數量的字節。我用在服務器端下面的腳本發送的數據N次4KB的負載（4096個字節似乎很適用於Chrome至少更新進度計數器）：

<?php 
header("Content-Type: text/plain"); 
header("Content-Length: " . ($size * $times)); 
flush(); 
ob_flush(); 

$size = 4096; 
$times = 5; 

function send($size) { 
    while($size-- > 0) { 
    echo "A"; 
    } 
    echo "\n"; 
} 

for ($i = 0; $i < $times; $i++) { 
    send($size); 
    flush(); 
    ob_flush(); 
    sleep(1); 
} 

這是在客戶端腳本：

$.ajax({ 
     xhr: function() { 
       var xhr = new window.XMLHttpRequest(); 
       xhr.addEventListener("progress", function(evt){ 
        if (evt.lengthComputable) { 
         console.log(evt.loaded); 
        } 
       }, false); 
      return xhr; 
     } 
     , type: 'post' 
     , cache: false 
     , url: "sleep.php"});