XMLHttpRequest 进度条以及lengthComputable always false的解决办法
XMLHttpRequest 进度条以及lengthComputable always false的解决办法
一直用ajax好长时间了，对其原理也有一些了解，最近由于项目需要，使用ajax异步进度条的效果，就研究了一下，用原生的XMLHttpRequest实现进度条函数，XMLHttpRequest有以下函数可以使用,摘自(https://www.w3.org/TR/progress-events/)
type attribute value | Description | Times | When |
|---|---|---|---|
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 error, abort, or load has been dispatched. |
进度条函数主要使用progress事件。下面构造一个进度条实现的demo
1、构建页面代码
进度条Html代码
2、后台处理接口
后台数据处理接口
注意到
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