这次给大家带来使用Blod做出ajax的进度条下载，使用Blod做出ajax的进度条下载的注意事项有哪些，下面就是实战案例，一起来看一下。
普通的浏览器下载
在web开发中，如果要实现下载功能，往往都是使用新开web页面或者是使用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});
}
}使用ajax下载文件，再将文件保存为blob对象，缓存在浏览器中。那么如何让用户将文件保存到硬盘上呢？
将blob对象保存在硬盘上
我们可以效仿浏览器下载，生成一个a标签或者iframe，再生成一个url，这样就回到了浏览器下载了，浏览器会自动生成一个保存附件的窗口。url可以使用URL.createObjectURL(blob)方法获得，URL.createObjectURL支持Blob对象和File对象，能够生成一个虚拟的url使当前用户可以访问到这些对象，当然也包括下载。不同于直接从服务器下载，这里的下载是客户端内部的，不走网络io，所以下载几乎是瞬时的。不过生成完这个url后，还要将其释放，否则blob资源不会被垃圾回收，使用URL.revokeObjectURL就可以释放掉这个url，让blob资源释放。对于ie浏览器，有自己的一套Blob对象处理策略，就是msSaveOrOpenBlob和msSaveBlob两个navigator方法。
//ie的下载
if (window.navigator.msSaveOrOpenBlob) {
navigator.msSaveBlob(blob, fileName);
} else {
//非ie的下载
var link = document.createElement('a');
link.href = window.URL.createObjectURL(blob);
link.download = fileName;
link.click();
window.URL.revokeObjectURL(link.href);
}进度条和取消下载
然后就是进度条和下载取消功能了，其实XMLHttpRequest对象是有个progress事件的，只是我们平时做ajax请求的时候都忽略他，毕竟一般请求都是瞬时的，不需要为其设置进度条。但是ajax下载却不一样，下载附件是需要时间的，因此为其开发个进度条还是很有必要的，监听progress事件，我们就可以获取下载进度。
使用XMLHttpRequest对象的abort函数可以取消下载，此外load事件可以监听到下载完成，error事件可以监听到下载失败。总之，ajax下载和一个普通的ajax请求的事件和方法是完全一样的。
性能优化和同源策略
ajax下载和长连接一样，会比普通请求占用更多带宽，尤其下载对带宽占用更是严重。因此下载过程中可能会阻塞其他的ajax请求，所以建议ajax下载的资源和其他请求的资源使用不同的域名，但是这样又会带来新的问题——同源策略问题。
同源策略是浏览器安全的基石，如果没有同源策略随便一个网站都可以发出csrf攻击。如果不能保证下载的资源的url和当前页面的url同源，就会触发同源策略导致下载失败，因此需要做ajax跨域处理。相比iframe和新页签的下载方法(事实上iframe也有同源策略，要求iframe里面的页面和父页面不能访问对方的内容，但是下载功能不涉及这种访问对方的内容操作，所以iframe下载是不受同源策略影响的)，ajax下载本质上还是ajax，因此会受到浏览器同源策略的影响。所以如果下载非同源的附件，就需要附件所在的服务器支持cors，如果服务器需要访问cookie，还要将XMLHttpRequest对象的withCredentials设置为true。
同时出于同源策略的原因，我们不能使用ajax的形式去下载第三方资源，因为通常的下载服务都不会做cors处理的，比竟iframe下载或者新页签下载的方式是不受同源策略影响的，所以无需做cors处理。这大大限制了ajax下载的适用度。
总结：
最后我们再总结一下ajax下载的使用场景：
1.需求对下载进度的进行监控的场景，比如发现用户下载进度过慢，主动提供其他解决方案。
2.需要下载完成后触发特定事件，例如弹出一个桌面提示Notification。
3.需要提供一个后台下载。例如我们可以在用户打开网页后将附件偷偷地下载下来再缓存起来，等到用户真的想下载附件时候直接保存在本地。我们甚至可以借助worker创建一个后台线程，从而还能保证下载过程不会影响页面正常渲染。
4.需要下载后不保存在硬盘中，而是webapp直接处理附件。例如pdf.js，就是采用的ajax下载。
最后奉上笔者的一个ajax下载的demo：ajaxDownloadDemo_jb51.rar
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
触发式加载精美特效企业网站源码使用jquery实现了很多精美的触发式加载特效，网站首页在随着访客的滚动条滚动过程中会出现很多触发式加载的特殊效果，让这个网站的风格瞬间显得非常的高大上，让你的企业品牌在访客心中留下更深的影响。当然，我们在使用jquery特效的同时也要注意程序对搜索引擎的友好型，所以这一点儿作者也有考虑到，已经尽可能的对js和css脚本进行精简和优化，尽可能的加快网站加载速度，同时也
