How would you create a progress bar with AJAX/jQuery for downloading XML content?

Question

I apologize if this is a rather simple answer, but I\'ve been stuck on it for a while. Currently I have an XML file where users can add images, audio files, and text in a mu

Answer 1

If you could move to websockets, I think you'd get more ability to manage the data transfer in a single thread.

If you want traditional ajax, I think you need an approach similar to the one typically used for upload progress:

http://phpmaster.com/tracking-upload-progress-with-php-and-javascript/

Basically, poll the server and ask it how far along it is in the transfer, then report that to the user. So you'd have your large ajax request while simultaneously polling a different small endpoint. Your server keeps the upload progress as part of the user session.

Answer 2

This should be enough to do it:

$(document).ready(function() {
    showProgressBar();
    $.ajax({
        type: "GET",
        url: xmlTitle,
        dataType: "xml",
        success: parseXML
    });
    function parseXML(xml){
        hideProgressBar();
        ...
    }
});

If you wanted to actually update the progressbar with the real progress of the upload, you'll have to use the xhr.upload.progress event and the xhr.progress event, neither of which are implemented in jQuery because there is no workaround to make them work in IE<10.