Is there AJAX progress event in IE and how to use

问题:

I tried all I could think of to at least get to the progress function in IE9 but nothing works. All other browsers get inside of the progress function and write test text without any problems. Hopefully someone can help me. Thank you!

     var info = document.getElementById('info');
     var xhr;
        if (window.XMLHttpRequest) {
            xhr = new XMLHttpRequest();  
        } 
        else if (window.ActiveXObject) { 
            try {  
                xhr = new ActiveXObject("Msxml2.XMLHTTP");  
            } 
            catch (e) {  
                try {  
                    xhr = new ActiveXObject("Microsoft.XMLHTTP");  
                } 
                catch (e) {}  
            }  
        }
        xhr.attachEvent("onprogress", function(e) {
            info.innerHTML += "loading...<br />";   
        });

        /*xhr.addEventListener("progress", function(e) {
            info.innerHTML += "loading...<br />";   
        }, false);*/

        xhr.open("GET", "10_MB_File.txt", true);
        xhr.send(null);

回答1:

The onprogress event is part of the XMLHttpRequest Level 2 spec...

• http://www.w3.org/TR/XMLHttpRequest2/

• http://www.w3.org/TR/XMLHttpRequest2/#event-handlers

... which is not supported by IE 9 and below. However, IE 10 is supposed to support it...

• http://msdn.microsoft.com/en-us/library/ie/hh673569(v=vs.85).aspx#Enhanced_Event_Support

For more information on which browsers support XHR Level 2, take a look at caniuse.com...

• http://caniuse.com/#feat=xhr2

回答2:

IE9 and under do not support onprogress, hence why you can not get it to work.

var xhr = new XMLHttpRequest();
console.log('onprogress' in xhr);

回答3:

You could use the onreadystatechange event and display your message. I'm just suggesting it as a workaround.

xhr.onreadystatechange=function() {
    if (xhr.readyState != 4) {
        // Display a progress message here.
    } else if (xhr.readyState==4 && xhr.status==200) {
        // Request is finished, do whatever here.
    }
}

回答4:

Adding to suggestion list, if JQuery is used in your project. It can be achieved by below functions and ofcourse, it needs to be JQuery $.ajax request. Advantage of these client libraries is they have objects instantiated based on browsers. For ex: JQuery takes care of "ActiveXObject("Msxml2.XMLHTTP")" or "ActiveXObject("Microsoft.XMLHTTP")" based on browser.

//displays progress bar
$('#info').ajaxStart(function () {
    $(this).show();
}).ajaxStop(function () {
    $(this).hide();
});