基于Blod的ajax进度条下载实现示例代码

普通的浏览器下载

在web开发中，如果要实现下载功能，往往都是使用新开web页面或者是使用iframe的形式。实现起来其实很简单：

<a target="_blank" href="download.zip" rel="external nofollow" >点击下载</a>//或者<iframe style="display:none" src="download.zip"></iframe>

用户点击a标签弹出一个新页签后，或者是打开了iframe后，浏览器就会接受一个下载响应，并下载附件。其实所谓附件下载，就是在浏览器读到响应报文的头之后，浏览器生成一个下载提示框，在用户确定后会继续下载文件。文件其实就是个流，所谓流就是一个传输的过程，浏览器会自动管理这个传输过程，会自动生成进度条、停止下载按钮、继续继续按钮、取消下载按、显示更新下载的字节数钮等。这些都是浏览器自动为我们做的，整个过程不受我们控制。

ajax下载

浏览器对下载的支持基本上已经能满足我们的需求，一般场景下再探索其他下载方式意义不大。但是还是有些场景是浏览器下载不能满足的，比如要求我们的web应用对下载进度的进行监控，或者下载完成后触发特定事件，或者web应用可以自动取消下载过程，或者使用worker创建一个后台运行的下载等等。对于以上情况我们都可以采用基于Blod对象的ajax下载。

ajax下载附件和ajax上传附件一样，需要浏览器支持ajax2.0。其实所谓下载和和普通的ajax请求没什么区别，都是对一个url地址做请求，但是下载一般都是二进制文件，不是文本对象或者json对象，需要JavaScript提供一个对够封装这个二进制文件的类型，这就是blod。因此要设置响应的类型responseType的值为“blod”：

var xhr =new XMLHttpRequest();xhr.open(option.type ? option.type.toUpperCase() : 'GET', url, true);xhr.responseType = 'blob';

要求XMLHttpRequest对象的responseType字段值是blob。那么blod对象又是什么？

blod对象

MDN对其描述为：

Blob对象是包含有只读原始数据的类文件对象。Blob对象中的数据并不一定得是JavaScript 中的原生形式。File接口基于 Blob，继承了Blob的功能，并且扩展支持用户计算机上的本地文件。通过Blob对象我们可以将一个二进制流封装为一个对象。

如果你了解过html5的file相关的api，你对于blod对象应该不会是陌生。blod能够把一个字节流封装为一个文件，将XMLHttpRequest对象的responseType值是blob，我们可以把响应体当做是一个blob对象处理。

xhr.onload = function () {  //对于重定向的文件不予理会  if (this.status >= 200 && this.status < 300) {    var blob = new Blob([this.response], {type: this.response.type});  }}