自定义Ajax类

 1 class ajax{
 2    constructor(){
 3     this.xhr=new XMLHttpRequest();
 4     }
 5     get(url,param,back,asyn=true)
 6     {
 7         this.xhr.open("get",url+'?'+param,asyn);
 8         this.xhr.send();
 9         if(asyn)
10         {
11             this.xhr.onreadystatechange=()=>{
12                 if(this.xhr.readyState==4 && this.xhr.status==200)
13                 {
14                     return back(this.xhr.responseText);
15                 }
16             }
17         }
18         
19     }
20     post(url,param,back,asyn=true)
21     {
22         this.xhr.open("post",url,asyn);
23         this.xhr.send(param);
24         if(asyn)
25         {
26             this.xhr.onreadystatechange=()=>{
27                 if(this.xhr.readyState==4 && this.xhr.status==200)
28                 {
29                     return back(this.xhr.responseText);
30                 }
31             }
32         }
33     }
34     //文件上传进度显示
35     formdata(url,target,style,back,asyn=true){
36         var targetform=document.getElementById(target);
37         var speedstyle=document.getElementById(style);
38         var formdata=new FormData(targetform);
39         this.xhr.open("post",url,asyn);
40         console.log(speedstyle);
41         console.log(this.xhr);
42         this.xhr.upload.onprogress = function(e){
43         var current = e.loaded;
44         var total = e.total;
45         var percent=current/total*100;
46         speedstyle.style.width=percent+'%';
47         speedstyle.innerText=Math.floor(percent)+'%';
48         }
49       
50         this.xhr.send(formdata);
51         if(asyn)
52         {
53             this.xhr.onreadystatechange=()=>{
54                 if(this.xhr.readyState==4 && this.xhr.status==200)
55                 {
56                     
57                     return back(this.xhr.responseText);
58                 }
59             }
60         }
61     }
62 }
63 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>

效果图：