ajax ----进度条的原理

一、进度条的原理

新知识点：Html5中FormData，xmlHttpRequest中的upload属性，progress事件监控

xmlHttpRequest中的upload属性，实现：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <script src="js/jquery-1.9.1.js"></script>
 7 
 8 </head>
 9 <body>
10     <form action="#" id="form" method="post" enctype="multipart/form-data">
11             <input type="text" name="password"><br>
12             <input type="file" id="file" name="apk_file" class="file"><br>
13     </form>
14     <input type="button" value="ajax" id="ajax">
15 
16 </body>
17     <script>
18         window.onload=function(){
19 
20             document.getElementById('ajax').addEventListener('click',function(){
21                 
22                 var formElement = document.getElementById("form");
23                 var xhr=getXhr();
24                 console.log(xhr.progress,xhr.upload) 
25                 var data=new FormData(formElement)
26                 // 
27                 // console.log(xhr.progress,xhr.upload) 
28                 // 判断浏览器是否有xhr.upload属性
29                  if (xhr.upload) {
30                      //开始
31                      xhr.upload.onloadstart =function(e){
32                          console.log(e,'start开始')
33                      }
34 
35                      //发送
36                     xhr.upload.onprogress = function (e) {
37                         var done = e.position || e.loaded, total = e.totalSize || e.total;
38                         console.log('xhr.upload.onprogress: ' + done + ' / ' + total + ' = ' + (Math.floor(done / total * 1000) / 10) + '%,onprogress. ');
39                     };
40 
41 
42 
43                     //结束 事件 loadend：在通信完成或者触发error、abort或load事件后触发。 4种 不同的事件  
44                     //成功返回调用方法
45                     xhr.upload.onload =function(e){
46                          console.log('onloadend')
47                      }
48                      //错误返回调用方法
49                     xhr.upload.onerror =function(e){
50                          console.log('onerror')
51                      }
52 
53                     xhr.upload.onloadend =function(e){
54                          console.log('onloadendend')
55                      }
56 
57                     //发送完成 请求状态监控
58                     xhr.onreadystatechange = function (e) {
59                     if (4 == this.readyState) {
60                             console.log('xhr upload complete',e,'onreadystatechange状态为4的时候');
61                         }
62                     };
63                 }
64                 xhr.open("POST", "01.php");
65                 xhr.send(data);
66             })
67         }
68 
69         // 定义创建XMLHttpRequest对象的函数
70     function getXhr(){
71         // 声明XMLHttpRequest对象
72         var xhr;
73         // 根据不同浏览器创建
74         if(window.XMLHttpRequest){
75             // 其他浏览器
76             xhr = new XMLHttpRequest();
77         }else{
78             // IE浏览器(8及之前)
79             xhr = new ActiveXObject("Microsoft.XMLHttp");
80         }
81         // 返回XMLHttpRequest对象
82         return xhr;
83     }
84     </script>
85 </html>
86

xmlhtmlrequest.upload属性下面的方法有：来源

Event listeners	Data type of `response` property
`onloadstart`	The fetch starts
`onprogress`	Data transfer is going on
`onabort`	The fetch operation was aborted
`onerror`	The fetch failed
`onload`	The fetch succeeded
`ontimeout`	The fetch operation didn't complete by the timeout the author specified
`onloadend`	The fetch operation completed (either success or failure)

通过progress事件，实现：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <script src="js/jquery-1.9.1.js"></script>
 7 
 8 </head>
 9 <body>
10     <form action="#" id="form" method="post" enctype="multipart/form-data">
11             <input type="text" name="password"><br>
12             <input type="file" id="file" name="apk_file" class="file"><br>
13     </form>
14     <input type="button" value="ajax" id="ajax">
15 
16 </body>
17     <script>
18 
19 
20     document.getElementById('file').addEventListener('change', function (e) {
21         var xhr = getXhr();
22         // 通过formData 获得参数 this.File
23         var data=new FormData(document.getElementById("form"))
24         // 监控 progress事件
25         xhr.addEventListener('progress', function (e) {
26             var done = e.position || e.loaded, total = e.totalSize || e.total;
27             console.log('xhr progress: ' + (Math.floor(done / total * 1000) / 10) + '%');
28         }, false);
29 
30         xhr.onreadystatechange = function (e) {
31             if (4 == this.readyState) {
32                 console.log(['xhr upload complete', e]);
33             }
34         };
35         xhr.open('post', '01.php', true);///这里写上url~
36         xhr.send(data);
37     }, false);
38        
39     function getXhr(){
40         // 声明XMLHttpRequest对象
41         var xhr;
42         // 根据不同浏览器创建
43         if(window.XMLHttpRequest){
44             // 其他浏览器
45             xhr = new XMLHttpRequest();
46         }else{
47             // IE浏览器(8及之前)
48             xhr = new ActiveXObject("Microsoft.XMLHttp");
49         }
50         // 返回XMLHttpRequest对象
51         return xhr;
52     }
53     </script>
54 </html>

https://developer.mozilla.org/zh-CN/docs/Web/Events/%E8%BF%9B%E5%BA%A6%E6%9D%A1

Property	Type	Description
`target` 只读	`EventTarget`	The event target (the topmost target in the DOM tree).
`type` 只读	`DOMString`	The type of event.
`bubbles` 只读	`Boolean`	Whether the event normally bubbles or not
`cancelable` 只读	`Boolean`	Whether the event is cancellable or not?
`lengthComputable`	boolean	Specifies whether or not the total size of the transfer is known. Read only.
`loaded`	unsigned long (long)	The number of bytes transferred since the beginning of the operation. This doesn't include headers and other overhead, but only the content itself. Read only.
`total`	unsigned long (long)	The total number of bytes of content that will be transferred during the operation. If the total size is unknown, this value is zero. Read only.