I've been busy with some AJAX code. I want to calculate how much data has been loaded and I want to display it with percents.

All my preloaded info is inside "feedback". Can I calculate how much DATA it contains (in bytes) and can I also view the progress? Like when it has loaded: 10kb, 20kb, 30kb etc

My code:

function calc(page)
    {
    $('#pageLoad h2').animate({ marginTop : '0px'}, 200);
        $.ajax(
        {
            url:            './pages/page.php',
            type:           'POST',
            data:           'page='+page,
            success:        function( feedback )
            {
                $('#content').html( feedback );
            }                               

        });
    };

Sorry for my poor english.

I've been busy with some AJAX code. I want to calculate how much data has been loaded and I want to display it with percents.

All my preloaded info is inside "feedback". Can I calculate how much DATA it contains (in bytes) and can I also view the progress? Like when it has loaded: 10kb, 20kb, 30kb etc

My code:

function calc(page)
    {
    $('#pageLoad h2').animate({ marginTop : '0px'}, 200);
        $.ajax(
        {
            url:            './pages/page.php',
            type:           'POST',
            data:           'page='+page,
            success:        function( feedback )
            {
                $('#content').html( feedback );
            }                               

        });
    };

Sorry for my poor english.

• javascript
• jquery
• ajax

• First of all you should fix the syntax errors in the code and use data: {page: page} insetead of data: 'page='+page – ThiefMaster Commented May 11, 2012 at 22:13
• @ThiefMaster the latter is perfectly valid syntax (but in the question it should not have the additional +' – Explosion Pills Commented May 11, 2012 at 22:15
• Lawl, my bad. I used to have 2 post values, but i removed one. – Mossawi Commented May 11, 2012 at 22:16
• @tandu: It is, but I highly doubt he's escaping characters like & in that string. So better let jQuery do that. – ThiefMaster Commented May 11, 2012 at 22:21

1 Answer 1

It is possible. XHRs have a progress event. The only problem is accessing the XHR object - unfortunately beforeSend only receives the jqXHR object and not the underlying XHR object. It is also not accessible as a property of the wrapper. You can however hook into the creation process of the XHR object by adding the following option to $.ajax():

xhr: function () {
    var xhr = $.ajaxSettings.xhr(); // call the original function
    xhr.addEventListener('progress', function (e) {
        if (e.lengthComputable) {
            var percentComplete = e.loaded / e.total;
            // Do something with download progress
        }
    }, false);
    return xhr;
}

Here's my initial solution. It is extremely hard to bine with jQuery since you can't easily hook into the onreadystatechange handler and cannot safely replace it after it has been set:

You need to add a custom onreadystatechange handler. When the readyState of the XHR object bees 2 (*HEADERS_RECEIVED*) you can access the Content-Length header to get the total size and then wait for the event to fire with xhr.readyState == 3 (LOADING).

Then you can calculate the progress by looking at xhr.responseText.length.
However, this will only fire once. So you need to start a timer (using setInterval()) which will check the ready state and response size e.g. every 100 msecs. As soon as the request finishes you stop the interval again using clearInterval().