问题描述
当想通过Ajax请求一个URL进行下载操作时,会发现浏览器不会报任何错误信息,也没有这次请求相应的反馈。
这是为什么呢?
一般请求浏览器是会处理服务器输出的response,例如生成png、文件下载等,然而ajax请求只是个“字符型”的请求,即请求的内容是以文本类型存放的。文件的下载是以二进制形式进行的,虽然可以读取到返回的response,但只是读取而已,是无法执行的,说白点就是js无法调用到浏览器的下载处理机制和程序。
这是一种处于安全的考虑,JS在设计时,无法在用户计算机上执行较底层的任务,启动文件下载提示就是这些限制之一,我们可以使用XMLHttpRequest对象下载二进制文件,但是无法对响应做任何操作!
解决方法一(粗暴)
直接不使用Ajax,通过下面这种方法来请求下载…
window.location="download.action?para1=value1....;"
存在问题:
但既然我们打算考虑使用Ajax就是考虑到交互的友好,而这种粗暴的方式肯定不是我们想要的!
首先它发送了页面的跳转,不可以添加回调函数,比如success回调或者error回调。
解决方法二(优雅)
前面既然说到了Ajax不能操作用户机的底层,那还怎么优雅的起来?
引入第三方包:
最后达到如下效果:
$.fileDownload('/url/to/download.pdf', {
successCallback: function (url) {
alert('You just got a file download dialog or ribbon for this URL :' + url);
},
failCallback: function (html, url) {
alert('Your file download just failed for this URL:' + url + '\r\n' +
'Here was the resulting error HTML: \r\n' + html
);
}
});
接近于ajax的用法和体验!