首頁 > web前端 > js教程 > 主體

基於Blod的ajax進度條下載實作範例程式碼

亚连
發布: 2018-05-22 16:46:56
原創
1912 人瀏覽過

本篇文章主要介紹了基於Blod的ajax進度條下載實現範例程式碼,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟著小編過來看看吧

普通的瀏覽器下載

在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() : &#39;GET&#39;, url, true);
xhr.responseType = &#39;blob&#39;;
登入後複製

要求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(&#39;a&#39;);
  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

上面是我整理給大家的,希望今後會對大家有幫助。

相關文章:

簡單實體類別和xml檔案的相互轉換方法

使用Ajax局部更新Razor頁面(圖文教學)

AjaxFileUpload Struts2實作多檔案上傳功能

以上是基於Blod的ajax進度條下載實作範例程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!