XMLHttpRequest实现上传/下载进度条

   用原生的XMLHttpRequest实现进度条函数，XMLHttpRequest有以下函数可以使用

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 Events定义了与客户端服务器通信有关的事件。这些事件最早其实只针对XHR操作，但目前也被其它API借鉴。有以下

loadstart：在接收到相应数据的第一个字节时触发。

progress：在接收相应期间持续不断触发。

error：在请求发生错误时触发。

abort：在因为调用abort()方法而终止链接时触发。

load：在接收到完整的相应数据时触发。

loadend：在通信完成或者触发error、abort或load事件后触发。

每个请求不对触发Loadstart事件开始，接下来是一或多个progress事件，然后触发error、abort或load事件中的一个，最后以触发loadend事件结束。

进度条函数主要使用progress事件。下面构造一个进度条实现的demo

1、构建页面代码

  

      

      
  
  请求数据
  

 

2、后台处理接口 asp

          [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);
             }
         }

 

3. 后台处理接口 php

 

注意到 

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。