码迷,mamicode.com
首页 > Web开发 > 详细

XMLHttpRequest 进度条以及lengthComputable always false的解决办法

时间:2021-06-02 15:58:34      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:pat   需要   als   后台   使用   时间   tps   The   nal   

一直用ajax好长时间了,对其原理也有一些了解,最近由于项目需要,使用ajax异步进度条的效果,就研究了一下,用原生的XMLHttpRequest实现进度条函数,XMLHttpRequest有以下函数可以使用,摘自(https://www.w3.org/TR/progress-events/)

type attribute valueDescriptionTimesWhen
loadstart Progress has begun. Once. First.
progress In progress. Zero or more. After loadstart has been dispatched.
error Progression failed. Zero or once. After the last progress has been dispatched, or after loadstart has been dispatched if progress has not been dispatched.
abort Progression is terminated. Zero or once.
load Progression is successful. Zero or once.
loadend Progress has stopped. Once. After one of errorabort, or load has been dispatched.

进度条函数主要使用progress事件。下面构造一个进度条实现的demo

1、构建页面代码

技术图片 技术图片
 1 <div class="progress">
 2     <div id="pros" class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
 3     </div>
 4 </div>
 5 <button id="trigger_ajax" type="button">请求数据</button>
 6 <script type="text/javascript">
 7     var trigger = document.getElementById("trigger_ajax");
 8     trigger.onclick = function () {
 9         var xhr = new XMLHttpRequest();
10         xhr.onprogress = function (event) {
11             console.log(event.lengthComputable);
12             console.log(event.loaded);
13             if (event.lengthComputable) {
14                 var loaded = parseInt(event.loaded / event.total * 100) + "%";
15                 $(‘#pros‘).width(loaded);
16                 $(‘#pros‘).text(loaded);
17             }
18         }
19         xhr.open("post", "/Home/aaa", true);
20         xhr.send(null);
21     }
22 </script>
进度条Html代码

2、后台处理接口

技术图片 技术图片
 1         [HttpPost]
 2         public void aaa()
 3         {            
 4             string result = string.Empty;
 5             for (int i = 1; i <= 6000; i++)
 6             {
 7                 result += i.ToString();
 8                 int len = result.Length;
 9                 Response.Headers.Add("Content-Length", len.ToString());
10                 Response.Headers.Add("Content-Encoding", "UTF-8");
11                 Response.Write(result);
12             }
13         }
后台数据处理接口

注意到 

Response.Headers.Add("Content-Length", len.ToString());
Response.Headers.Add("Content-Encoding", "UTF-8");

,写出 http 头时候,附加 “Content-Length”和Content-Encoding,这样 JS 端的 progress 事件的 event.lengthComputable 值才会为 true, event.total 才会在数据传输完毕之前取得值,否则 event.lengthComputable 值会返回 false, event.total 在数据完成之前值都是0

技术图片

转载于:https://www.cnblogs.com/AlphaThink-AT003/p/5715408.html

XMLHttpRequest 进度条以及lengthComputable always false的解决办法

标签:pat   需要   als   后台   使用   时间   tps   The   nal   

原文地址:https://www.cnblogs.com/wangqin-dandan/p/14825984.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!