阅读 181

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

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

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

type attribute valueDescriptionTimesWhen
loadstartProgress has begun.Once.First.
progressIn progress.Zero or more.After loadstart has been dispatched.
errorProgression failed.Zero or once.After the last progress has been dispatched, or after loadstart has been dispatched if progress has not been dispatched.
abortProgression is terminated.Zero or once.
loadProgression is successful.Zero or once.
loadendProgress has stopped.Once.After one of errorabort, 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


文章分类
后端
版权声明:本站是系统测试站点,无实际运营。本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 XXXXXXo@163.com 举报,一经查实,本站将立刻删除。
相关推荐