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

• 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

4 Answers 4

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