普通的瀏覽器下載

在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});  }}