如何實現基于Blod的ajax進度條

這篇文章主要介紹如何實現基于Blod的ajax進度條，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

普通的瀏覽器下載

在web開發中，如果要實現下載功能，往往都是使用新開web頁面或者是使用iframe的形式。實現起來其實很簡單：

<a target="_blank" href="download.zip" rel="external nofollow" >點擊下載</a>
//或者
<iframe  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});
  }
}

使用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

以上是“如何實現基于Blod的ajax進度條”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！