IE에 AJAX 진행 이벤트가 있으며 사용 방법은 무엇입니까?

Question

나는 적어도 IE9에서 진행 기능을 얻으려고 생각했지만 모두 시도했지만 아무 것도 작동하지 않습니다. 다른 모든 브라우저는 진행 기능에 들어가 테스트 텍스트를 아무런 문제없이 작성합니다. 잘만되면 누군가 나를 도울 수 있습니다. 고맙습니다!

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

Answer 1

onprogress 이벤트는 XMLHttpRequest 레벨 2 규격의 일부인 ...

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

의해 지원되지

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

... IE 9 이하. 그러나, IE 10 자세한 내용은 ...

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

을 지원하도록되어있는 지원 XHR 레벨 2, caniuse.com ...

를 살펴 브라우저를
• http://caniuse.com/#feat=xhr2

Answer 2

IE9 이하는 진행 중이므로 지원하지 않으므로 작동하지 않는 이유는 무엇입니까?

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

Answer 3

당신은 onreadystatechange 이벤트를 사용하여 메시지를 표시 할 수 있습니다. 나는 단지 그것을 해결 방법으로 제안하고있다.

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

Answer 4

제안 목록에 추가, 프로젝트에서 JQuery가 사용되는 경우. 그것은 아래의 함수에 의해 성취 될 수 있으며, JQuery $ .ajax 요청이 필요합니다. 이 클라이언트 라이브러리의 장점은 브라우저를 기반으로 인스턴스화 된 객체가 있다는 점입니다. 예 : JQuery는 브라우저를 기반으로하여 "ActiveXObject ("Msxml2.XMLHTTP ")"또는 "ActiveXObject ("Microsoft.XMLHTTP ")를 처리합니다.

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