03-09 12:26 阅读 115

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

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

attribute value	Description	Times	When
`loadstart`	Progress has begun.	Once.	First.
`progress`	In progress.	Zero or more.	After `loadstart` has been .
`error`	Progression failed.	Zero or once.	After the last `progress` has been , or after `loadstart` has been if `progress` has not been .
`abort`	Progression is terminated.	Zero or once.
`load`	Progression is successful.	Zero or once.
`loadend`	Progress has stopped.	Once.	After one of `error`, `abort`, or `load` has been .

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

1、构建页面代码

进度条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

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

推荐资源

Docker+K8S从基础到项目部署实战 200集视频-六大阶段征服微服务架构高级教程闲鱼无货源从0～1，新手10天卖货109单的实战教程 Linux网络编程与嵌入式开发实战大课-Linux并发程序设计-Linux嵌入式开发高级学习教程黑马程序员 - 深入解析docker容器化技术(带资料) Selinu技术文档 SELinux(Security-Enhanced Linux) 强制访问控制教材「热狐计划」视频号1.0必爆玩法，微信视频号无货源无人直播 GeoHash企业级大数据用户画像实战应用项目 GeoHash大数据项目实战板绘教程：《十分绘画：绘画萌新入门创造营》已完结，共19期 NLP实践 TensorFlow打造聊天机器人完整版 C++ QT5跨越任意平台部署实战 QT5极致性能开发课程 QT5嵌入式与桌面应用实战视频教程