一直用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、构建页面代码
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>
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。
