javascript - 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 multitude of ways. In case the file becomes large, I'd like for the page to require a progress bar.

I have found numerous tutorials on creating progress bars for uploads, for PHP files, and styling them, but I haven't found anything for monitoring the percentage of an XML file that has been read and processed. I've been trying to make my code work in conjunction with this tutorial, but to no luck.

My simple AJAX call:

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

parseXML is my function to read the XML file, and then properly display it on the HTML.

Essentially I'd like to have the code automatically show the progress bar, and on success make the progress bar disappear and show the content.

If I'm approaching this the wrong way, I'm also open for any other suggestions. Sorry again if this is a simple question, but thanks for any responses.

Answer 1

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.