javascript - Is there AJAX progress event in IE and how to use it? - Stack Overflow

admin管理员组

文章数量:1356735

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);

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);

• javascript
• ajax
• internet-explorer
• events
• progress

Share Improve this question Follow asked Oct 12, 2012 at 20:01 user1154269user1154269 6311 silver badge44 bronze badges 1

• Unfortunately there's not the progress event in the xhr of <= IE9, but I detect it with this condition: typeof this.ProgressEvent === 'function'. Where this, is window, the global object. – user5066707 Commented Sep 4, 2016 at 11:24

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

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

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

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

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

• http://msdn.microsoft./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....

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

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);

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.
    }
}

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();
});

本文标签： javascriptIs there AJAX progress event in IE and how to use itStack Overflow