asp.net 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、构建页面代码

 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代码