zoukankan      html  css  js  c++  java

  • 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

    PropertyTypeDescription
    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.
  • 相关阅读:
    章节三、2-方法_演示实例
    章节三、1-方法
    章节二、5-数组
    章节二、4-String以及StringBuffer和StringBuilder的对比
    章节二、3-字符串类方法
    章节二、2-String 引用数据类型-字符串类
    章节二、1-java概述-数据类型
    需求管理做不好，等着9-12-7吧
    谈谈软件项目的风险管理
    《Spring Boot Cook Book》阅读笔记
  • 原文地址：https://www.cnblogs.com/blog-index/p/6619101.html
Copyright © 2011-2022 走看看