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、構建頁面代碼

<div class="progress">
    <div id="pros" class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
    </div>
</div>
<button id="trigger_ajax" type="button">請求數據</button>
<script type="text/javascript">
    var trigger = document.getElementById("trigger_ajax");
    trigger.onclick = function () {
        var xhr = new XMLHttpRequest();
        xhr.onprogress = function (event) {
            console.log(event.lengthComputable);
            console.log(event.loaded);
            if (event.lengthComputable) {
                var loaded = parseInt(event.loaded / event.total * 100) + "%";
                $('#pros').width(loaded);
                $('#pros').text(loaded);
            }
        }
        xhr.open("post", "/Home/aaa", true);
        xhr.send(null);
    }
</script>

2、后台處理接口

        [HttpPost]
        public void aaa()
        {            
            string result = string.Empty;
            for (int i = 1; i <= 6000; i++)
            {
                result += i.ToString();
                int len = result.Length;
                Response.Headers.Add("Content-Length", len.ToString());
                Response.Headers.Add("Content-Encoding", "UTF-8");
                Response.Write(result);
            }
        }

注意到 

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。