ajax ----進度條的原理

本文轉載自查看原文 2017-03-26 12:48 4181 JavaScript

一、進度條的原理

新知識點：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.

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Ajax實現下載進度條基於jquery ajax的多文件上傳進度條 Ajax上傳文件進度條顯示 Ajax制作Web進度條 ajax加載時的進度條基於Blod的ajax進度條下載實現進度條在AJAX請求中的應用 JS ajax http請求如何使用實現長連接方式(進度條實現原理) B/S架構的進度條原理 Ajax+PHP實現的進度條--實例