Ajax进度条的原理

      // 定义创建XMLHttpRequest对象的函数
      function getXhr(){ 
         var xhr;  
         if(window.XMLHttpRequest){ // 正常浏览器
            xhr = new XMLHttpRequest(); 
         }else{  
           xhr = new ActiveXObject("Microsoft.XMLHttp");// IE浏览器(8及之前)
         }       
         return xhr;// 返回XMLHttpRequest对象
      }

      var xhr=getXhr();
      //console.log(xhr.progress,xhr.upload) 
      // 判断浏览器是否有xhr.upload属性
      if (xhr.upload) {  
           //开始
           xhr.upload.onloadstart =function(e){
             console.log(e,'start开始')
          }
          //发送
          xhr.upload.onprogress = function (e) {
            var done = e.position || e.loaded, total = e.totalSize || e.total;
            console.log( `onprogress: ${done}/${total}= Math.floor(done / total * 100) % `);
          };

           //结束 事件 loadend：在通信完成或者触发error、abort或load事件后触发。
           //成功返回调用方法
           xhr.upload.onload =function(e){
              console.log('onloadend')
           }

           //错误返回调用方法
           xhr.upload.onerror =function(e){
              console.log('onerror')
           }
           xhr.upload.onloadend =function(e){
             console.log('onloadendend')
            }
            //发送完成 请求状态监控
            xhr.onreadystatechange = function (e) {
            if (4 == this.readyState) {
             console.log('xhr upload complete',e,'onreadystatechange状态为4的时候');
           }
      }

     xhr.open("POST", "01.php");
       xhr.send(data);
     }