XHR2进度回退

Question

I have the following example which uses the progress events in XHR2 to display a progress bar to the user when performing an AJAX request:

$.ajax({
    xhr: function() {

        var xhr = new window.XMLHttpRequest();

        xhr.upload.addEventListener('progress', function(evt){

            if (evt.lengthComputable) {

                var percentComplete = (evt.loaded / evt.total) * 100;

                if(percentComplete >= 100){
                    $('#loading-bar').find('.bar').css({'width': percentComplete + '%'});
                    $('#loading-bar')
                    .find('.bar')
                    .on('transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd', function() {
                        $('#loading-bar').fadeOut(function(){
                            $('#loading-bar').find('.bar').css({'width': ''});
                        });
                    });
                } else {
                    $('#loading-bar').find('.bar').css({'width': percentComplete + '%'});
                }
            }                               

        }, false);

        return xhr;

    },
    type: 'GET',
    url: 'Test.html',
    success: function (response) {


    },
    error: function (jqXHR, textStatus, errorThrown) {


    }
});

However for browsers that don't support XHR2, the bar won't animate nor will the loading-bar element be faded out from the DOM.

How can I implement a fallback? As I don't want to just fade the loading bar out on success as that will then conflict with the progress events for browsers that DO support it.

Or even better is it possible to get the progress by alternate means?

Answer 1

If it's download progress, we can do it when xhr.readyState >= 3 . Just read the xhr.responseText.length , and then divide it by parseInt(xhr.getResponseHeader('Content-Length')) (assuming the server provides this header and it's same origin or with correct CORS header).

If it's upload progress, I don't know any method to polyfill it purely within the client-side. We can create an id for every upload session, and use another xhr to pull the upload receiving progress from the server. However that requires complicated implementation on the server-side. There are many such implementations in common languages, for example for PHP or .NET. You can look into them and implement your own.

Answer 2

Try using .onreadystatechange() with .readyState :

getter.onreadystatechange = function() {
    if (loading) { //If the loading element has been loaded...
        if (this.status === 200) { //If this.status is already 200...
            loading.style.width = this.readyState*25+"%"; //This sets the width of loading according to this.readyState
            if (this.readyState === 4) {
                //We hide loadingBar and do stuff when we're done.
                loadingBar.style.display = "none";
               [do stuff]
            }
        }
    }
};

If you're accepting 100 Continue statuses, you might also want to account for that into your loading bar. The way this is now, it's at a standstill for a while, but then zooms to 100% when it gets to the status 200 OK and the readyState property goes from 2 to 4 .

Here's the fiddle: http://jsfiddle.net/NobleMushtak/QRuU6/