自定义Ajax类

class ajax{
   constructor(){
    this.xhr=new XMLHttpRequest();
    }
    get(url,param,back,asyn=true)
    {
        this.xhr.open("get",url+'?'+param,asyn);
        this.xhr.send();
        if(asyn)
        {
            this.xhr.onreadystatechange=()=>{
                if(this.xhr.readyState==4 && this.xhr.status==200)
                {
                    return back(this.xhr.responseText);
                }
            }
        }
        
    }
    post(url,param,back,asyn=true)
    {
        this.xhr.open("post",url,asyn);
        this.xhr.send(param);
        if(asyn)
        {
            this.xhr.onreadystatechange=()=>{
                if(this.xhr.readyState==4 && this.xhr.status==200)
                {
                    return back(this.xhr.responseText);
                }
            }
        }
    }
    //文件上传进度显示
    formdata(url,target,style,back,asyn=true){
        var targetform=document.getElementById(target);
        var speedstyle=document.getElementById(style);
        var formdata=new FormData(targetform);
        this.xhr.open("post",url,asyn);
        console.log(speedstyle);
        console.log(this.xhr);
        this.xhr.upload.onprogress = function(e){
        var current = e.loaded;
        var total = e.total;
        var percent=current/total*100;
        speedstyle.style.width=percent+'%';
        speedstyle.innerText=Math.floor(percent)+'%';
        }
      
        this.xhr.send(formdata);
        if(asyn)
        {
            this.xhr.onreadystatechange=()=>{
                if(this.xhr.readyState==4 && this.xhr.status==200)
                {
                    
                    return back(this.xhr.responseText);
                }
            }
        }
    }
}
var Ajax=new ajax();

<button type="button" class="btn btn-primary btn-block" id='submit' data-toggle="modal" data-target="#myModal">确 定 添 加</button>
<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <!--<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>-->
        <h4 class="modal-title" id="myModalLabel2">进度载入</h4>
      </div>
      <div class="modal-body" id="modalID2">
            <div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" id="speed2">
    0%
  </div>
</div>
      </div>
      <div class="modal-footer" id="footer2">
        <!--<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>-->
        <!--<button type="button" class="btn btn-primary">Save changes</button>-->
      </div>
    </div>
  </div>
</div>

 <script src="ajax.js" type="text/javascript" charset="utf-8"></script>
 <script type="text/javascript" charset="utf-8">
     var submit=document.getElementById('submit');
     submit.onclick=()=>{
         Ajax.formdata('../data/insert.php','formid','speed',function(data){
             var myModalLabel=document.getElementById("myModalLabel");
             myModalLabel.innerText='上传结果';
             var modalstyle=document.getElementById("modalID");
             modalstyle.innerHTML=data;
             var footer=document.getElementById('footer');
             footer.innerHTML='<button type="button" class="btn btn-primary" id="clean">继续添加</button>'
             var clean=document.getElementById('clean');
             clean.onclick=function(){window.history.go(0);}
             
             
         });
     }
</script>

效果图：