ajax ----进度条的原理

一、进度条的原理

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

xmlHttpRequest中的upload属性，实现：

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Document</title>
     <script src="js/jquery-1.9.1.js"></script>

 </head>
 <body>
     <form action="#" id="form" method="post" enctype="multipart/form-data">
             <input type="text" name="password"><br>
             <input type="file" id="file" name="apk_file" class="file"><br>
     </form>
     <input type="button" value="ajax" id="ajax">

 </body>
     <script>
         window.onload=function(){

             document.getElementById('ajax').addEventListener('click',function(){

                 var formElement = document.getElementById("form");
                 var xhr=getXhr();
                 console.log(xhr.progress,xhr.upload)
                 var data=new FormData(formElement)
                 //
                 // console.log(xhr.progress,xhr.upload)
                 // 判断浏览器是否有xhr.upload属性
                  if (xhr.upload) {
                      //开始
                      xhr.upload.onloadstart =function(e){
                          console.log(e,'start开始')
                      }

                      //发送
                     xhr.upload.onprogress = function (e) {
                         var done = e.position || e.loaded, total = e.totalSize || e.total;
                         console.log('xhr.upload.onprogress: ' + done + ' / ' + total + ' = ' + (Math.floor(done / total * 1000) / 10) + '%,onprogress. ');
                     };

                     //结束 事件 loadend：在通信完成或者触发error、abort或load事件后触发。 4种 不同的事件
                     //成功返回调用方法
                     xhr.upload.onload =function(e){
                          console.log('onloadend')
                      }
                      //错误返回调用方法
                     xhr.upload.onerror =function(e){
                          console.log('onerror')
                      }

                     xhr.upload.onloadend =function(e){
                          console.log('onloadendend')
                      }

                     //发送完成 请求状态监控
                     xhr.onreadystatechange = function (e) {
                     if (4 == this.readyState) {
                             console.log('xhr upload complete',e,'onreadystatechange状态为4的时候');
                         }
                     };
                 }
                 xhr.open("POST", "01.php");
                 xhr.send(data);
             })
         }

         // 定义创建XMLHttpRequest对象的函数
     function getXhr(){
         // 声明XMLHttpRequest对象
         var xhr;
         // 根据不同浏览器创建
         if(window.XMLHttpRequest){
             // 其他浏览器
             xhr = new XMLHttpRequest();
         }else{
             // IE浏览器(8及之前)
             xhr = new ActiveXObject("Microsoft.XMLHttp");
         }
         // 返回XMLHttpRequest对象
         return xhr;
     }
     </script>
 </html>
      

 

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事件，实现：

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Document</title>
     <script src="js/jquery-1.9.1.js"></script>

 </head>
 <body>
     <form action="#" id="form" method="post" enctype="multipart/form-data">
             <input type="text" name="password"><br>
             <input type="file" id="file" name="apk_file" class="file"><br>
     </form>
     <input type="button" value="ajax" id="ajax">

 </body>
     <script>

     document.getElementById('file').addEventListener('change', function (e) {
         var xhr = getXhr();
         // 通过formData 获得参数 this.File
         var data=new FormData(document.getElementById("form"))
         // 监控 progress事件
         xhr.addEventListener('progress', function (e) {
             var done = e.position || e.loaded, total = e.totalSize || e.total;
             console.log('xhr progress: ' + (Math.floor(done / total * 1000) / 10) + '%');
         }, false);

         xhr.onreadystatechange = function (e) {
             if (4 == this.readyState) {
                 console.log(['xhr upload complete', e]);
             }
         };
         xhr.open('post', '01.php', true);///这里写上url~
         xhr.send(data);
     }, false);

     function getXhr(){
         // 声明XMLHttpRequest对象
         var xhr;
         // 根据不同浏览器创建
         if(window.XMLHttpRequest){
             // 其他浏览器
             xhr = new XMLHttpRequest();
         }else{
             // IE浏览器(8及之前)
             xhr = new ActiveXObject("Microsoft.XMLHttp");
         }
         // 返回XMLHttpRequest对象
         return xhr;
     }
     </script>
 </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.