基于AJAX的进度条下载大胆实施示例代码

普通的浏览器下载

在web开发中，如果你想实现下载功能，它往往是用新的网页或使用iframe的形式。它真的很容易实现：
点击下载
或
通过对标签的用户点击弹出新页面的标志，或当iframe打开的浏览器下载响应和下载附件。事实上，所谓的附件下载：浏览器读取响应消息头之后，浏览器生成一个下载提示框，这将继续下载文件确定后，用户的文件实际上是一个流。所谓流动就是一个传输过程。浏览器将自动管理传输过程，自动生成进度条，停止下载按钮，继续继续按钮，取消下载，并显示更新和下载的字节。这些都是浏览器为我们做的，整个过程不受我们控制。
Ajax下载

浏览器支持下载已经基本满足我们的需要，而不是探索在一般情况下，其他下载显著。但有些场景是浏览器下载不能满足要求，例如我们的Web应用程序来监控下载进度，触发某个事件或下载完成后，或Web应用程序可以自动取消下载过程，或工人创建一个后台下载等使用。针对上述情况，我们都可以下载基于Ajax的比较对象。

Ajax Ajax上传附件下载附件，要求浏览器支持ajax2.0.in事实，所谓的常见的Ajax请求不下载有什么区别做一个URL地址的请求，但是下载通常是一个二进制文件不是文本对象或JSON，Javaｓｃｒｉｐｔ是必须提供一个包足够的二进制文件类型，这是血。因此，该类型的responsetype值设置响应的比较：
新的XMLHttpRequest（XHR）var =；
Xhr.open（option.type option.type.toUpperCase（）：' '，网址，真的）；
xhr.responsetype = 'blob；
需要滴是XMLHttpRequest对象的responsetype字段值。那么什么是比较的对象吗

比较对象

MDN描述为：

Blob对象是一个类文件对象包含只读原始数据。在blob对象的数据并不一定要在Javaｓｃｒｉｐｔ原生形式。文件接口是基于斑点，继承blob的功能延伸和用户计算机上的本地文件。通过blob对象，我们可以封装成一个对象的二进制流。

如果你知道关于HTML5的文件相关的API，你不应该是一个陌生人比较对象。竟然可以用一个字节流到一个文件中，并responsetype XMLHttpRequest对象的值是BLOB。我们可以把响应体看作一个团块对象处理。
Xhr.onload = function () {
要重定向文件忽略
如果（this.status this.status < 300 > = 200）{
var =新滴（{这个响应}，{类型：这个。}）；
}
}
使用Ajax下载文件，然后将文件保存为一个缓存对象，缓存在浏览器中，那么如何让用户将文件保存到硬盘上呢

在硬盘上保存对象

我们可以模拟浏览器下载，生成一个标签或iframe，再生成一个URL，这样我们可以回到浏览器下载，同时浏览器会自动生成一个窗口保存attachments.url可以得到URL.createObjectURL（BLOB）的方法。url.createobjecturl支持BLOB对象和文件对象，并生成一个虚拟的网址，用户可以访问这些对象，当然下载，而不是直接从服务器上下载，这里的下载客户端内，没有网络IO，所以下载几乎是瞬时的。然而，在生成的URL，它也会被释放。否则，将不会收集垃圾资源。url.revokeobjecturl可以释放的URL和释放触点的资源。IE浏览器，还有一套blob对象处理策略，这是mssaveoropenblob和mssaveblob两导航方法。
下载 IE浏览器
如果（窗口。导航仪。mssaveoropenblob）{
Navigator.msSaveBlob（BLOB，文件名）；
{人}
IE下载
VaR链接= document.createelement（'a'）；
link.href = window.url.createobjecturl（BLOB）；
link.download =文件名；
Link.click（）；
Window.URL.revokeObjectURL（链接。链接）；
}
进度条和下载

然后是进度条和下载取消功能。事实上，XMLHttpRequest的对象有一个进步的事件，但我们忽略了他时，我们通常把Ajax请求。毕竟，一般的请求是即时的，不需要为它们设置进度条，但是Ajax下载是不同的。下载附件需要时间，所以有必要为它们开发一个进度条。我们可以通过监视进度事件获得下载进度。

中断函数的XMLHttpRequest对象可以取消，和负载的事件可以进行下载，和错误事件可以监视下载失败。总之，事件和方法Ajax下载和普通的Ajax请求是完全相同的。

性能优化与对应策略

Ajax下载，喜欢长连接，占用比普通要求更多的带宽，特别是下载带宽的利用更严重。所以下载的过程中可能会阻止其他的Ajax请求，因此建议Ajax下载资源和其他请求的资源使用不同的域名，但这会带来新的问题——同源策略。

相应的策略是浏览器的安全的基石，如果没有相应的策略，任何网站可以发送CSRF攻击。如果你不能保证下载资源的URL到当前页面的URL将触发同源，导致下载失败的相应的政策，所以你需要做Ajax跨域处理。用下载的方法iframe和新标签相比（请求在iframe页面的父页面可以访问其实iframe彼此同源策略的内容，但不涉及下载功能的互相访问的内容，所以iframe下载不受同源策略的影响），Ajax下载性质或Ajax，所以浏览器会同源策略。所以如果你下载的非同源的配件，你需要的服务器，配件位于支持CORS。如果服务器需要访问cookie，它将设置XMLHttpRequest对象的withcredentials真实。

在同源策略的原因的同时，我们不能使用Ajax下载第三方资源，因为通常下载服务将做CORS处理，不受同源策略影响下载比iframe下载或新的标签，所以没有必要做CORS。这大大限制了Ajax下载的适用性。

总结：

最后，我们将总结Ajax下载的使用情况。

1。要求监控下载进度的场景，如缓慢下载进度的用户，主动提供其他解决方案。

2。下载完成后需要下载特定事件，如弹出桌面提示通知。

三.需要提供一个后台下载。例如，我们可以下载附件偷偷在用户打开网页，然后缓存起来，直到用户真正想下载附件，然后保存在本地。我们甚至可以创建一个工人帮助后台线程，从而保证下载过程不影响正常页面渲染。

4。需要下载和保存在硬盘，但webapp直接处理附件。例如，pdf.js，是Ajax下载。

最后，我把作者的Ajax下载演示：ajaxdownloaddemo_ .rar
以上是本文的全部内容，希望能对您有所帮助，希望大家多多支持。