Get the size of an AJAX response before it finishes loading

Question

I'm using jQuery to load data via AJAX from a server, it's a fairly normal use case. The trick is that I'd like to get the expected content length from the request before it is completed; I want to be able to show a progress bar as the data is loaded.

Is there any way at all to do this? I have to imagine there is. Thanks!

Update: The server has to do quite a bit of work to generate the response, so I'd prefer not to hit it with two requests, it would defeat the purpose.

As @StephenThomas pointed out, try `HEAD` request ; parse response for `Content-Length` header , if present ? — guest271314, Oct 13 '14 at 17:29
I should've specified this, the server has to do quite a bit of work to generate the response, it isn't a static page by any means. I'd prefer not to hit it twice. Sometimes the page can take 15 seconds just to generate (hence the need for a progress bar haha). — Leah Sapan, Oct 13 '14 at 17:38

score 3 · Accepted Answer · answered Oct 13 '14 at 18:07

You can use xhr event in ajax call, and then hook up progress event to that, and check if event.lengthComputable= true, then you will get value, else you will not get value. You can check out following code.

$.ajax({
    type: 'POST',
    dataType: 'json',
    url: URL,
    cache: false,
    error: function (xhr, ajaxOptions, thrownError) {
        alert(xhr.responseText);
        alert(thrownError);
    },
    xhr: function () {
        var xhr = new window.XMLHttpRequest();
        //Download progress
        xhr.addEventListener("progress", function (evt) {
            console.log(evt.lengthComputable);
            if (evt.lengthComputable) {
                var percentComplete = evt.loaded / evt.total;
                console.log(percentComplete );
            }
        }, false);
        return xhr;
    },
    beforeSend: function () {
      // before send
    },
    complete: function () {
       // complete.
    },
    success: function (json) {
       // success;
    }
});

Get the size of an AJAX response before it finishes loading

1 Answers1