AJAX request progress percentage log

Question

I read content from http://www.dave-bond.com/blog/2010/01/JQuery-ajax-progress-HMTL5/ and i try make that ajax progress bar on my own site, but in console i have only xhr response when php script is full completed.

My part of JS code:

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

For example, part of my test php script is:

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

My current console log first show 1, and then after about 10sec console.log write 'completed'

Simply, i want while ajax request is in progress (php usleep time is about 10sec) display in console percentage of ajax reqest (is that possible?).

Please help.

Raffaele · Accepted Answer · 2013-10-08T23:30:47.990

2

The problem may be with the server side, since the client seems correct. That long call to usleep() may freeze server output, and if the client doesn't receive the HTTP response status line, it can't even fire the start event on the XHR object (for example the service may respond with a 404 status code, which is an error at the protocol level and is reported as delivering failure).

Also, the browser may need to accumulate a certain number of bytes before passing the event to the JS engine. I used the following script on the server side to send a 4KB load of data N times (4096 octets seems enough for Chrome at least to update the progress counter):

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

This is the script on the client side:

$.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"});

edited Oct 08 '13 at 23:30

answered Oct 08 '13 at 21:36

Raffaele

20,627
6
47
86

I try that, but same result. – Vlatko Oct 08 '13 at 21:40
@user1477508 can you better describe the problem? Do you see any JS error in the console? Can you set a breakpoint in the progress callback? And how can the browser know `evt.total` if your server script doesn't send any `Content-Length` header? – Raffaele Oct 08 '13 at 21:56
No errors in console, server script is as above, lease describe what i need to add.. – Vlatko Oct 08 '13 at 22:06
Please, set a breakpoint in the progress listener and tell what the value for `evt.total` is. – Raffaele Oct 08 '13 at 22:18
First, in xhr.upload listeneru event.total is 198, then in second xhr listeneru event.total is 0 – Vlatko Oct 08 '13 at 22:28
What if you try with the updated script in my answer? – Raffaele Oct 08 '13 at 22:42
Then in second xhr listeneru event.total is 10 – Vlatko Oct 08 '13 at 22:47
And is the progress listener called 10 times? – Raffaele Oct 08 '13 at 22:50
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/38831/discussion-between-raffaele-and-user1477508) – Raffaele Oct 08 '13 at 22:56

AJAX request progress percentage log

1 Answers1

Linked