ajax ----进度条的原理

时间：2021-05-20 04:08:01

一、进度条的原理

新知识点：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.

相关文章