Процент хода выполнения запроса AJAX

Question

Я читал контент от http://www.dave-bond.com/blog/2010/01/JQuery-ajax-progress-HMTL5/, и я пытаюсь сделать этот индикатор выполнения на моем собственном сайте, но в консоли у меня есть только 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сек консоли. log write 'completed'

Просто я хочу, чтобы в то время как выполняется запрос ajax (время простоя php составляет около 10 секунд), отображается процент консоли ajax reqest (возможно ли это?).

Пожалуйста, помогите.

Answer 1

Проблема может быть на стороне сервера, так как клиент кажется правильным. Этот длинный вызов usleep() может заморозить вывод сервера, и если клиент не получает строку состояния ответа HTTP, он даже не может запустить событие start на объекте XHR (например, служба может отвечать кодом состояния 404, что является ошибкой на уровне протокола и сообщается как отказ от сбоя).

Кроме того, браузеру необходимо будет накопить определенное количество байтов перед передачей события в JS-движок. Я использовал следующий сценарий на стороне сервера, чтобы послать 4KB нагрузку данных N раз (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"});