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

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

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

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wjspzs.html