如何實(shí)現(xiàn)基于Blod的ajax進(jìn)度條-創(chuàng)新互聯(lián)

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

成都創(chuàng)新互聯(lián)公司主要從事網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)洮南,10余年網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):13518219792

普通的瀏覽器下載

在web開發(fā)中，如果要實(shí)現(xiàn)下載功能，往往都是使用新開web頁面或者是使用iframe的形式。實(shí)現(xiàn)起來其實(shí)很簡(jiǎn)單：

<a target="_blank" href="download.zip" rel="external nofollow" >點(diǎn)擊下載</a>
//或者
<iframe  src="download.zip"></iframe>

用戶點(diǎn)擊a標(biāo)簽彈出一個(gè)新頁簽后，或者是打開了iframe后，瀏覽器就會(huì)接受一個(gè)下載響應(yīng)，并下載附件。其實(shí)所謂附件下載，就是在瀏覽器讀到響應(yīng)報(bào)文的頭之后，瀏覽器生成一個(gè)下載提示框，在用戶確定后會(huì)繼續(xù)下載文件。文件其實(shí)就是個(gè)流，所謂流就是一個(gè)傳輸?shù)倪^程，瀏覽器會(huì)自動(dòng)管理這個(gè)傳輸過程，會(huì)自動(dòng)生成進(jìn)度條、停止下載按鈕、繼續(xù)繼續(xù)按鈕、取消下載按、顯示更新下載的字節(jié)數(shù)鈕等。這些都是瀏覽器自動(dòng)為我們做的，整個(gè)過程不受我們控制。

ajax下載

瀏覽器對(duì)下載的支持基本上已經(jīng)能滿足我們的需求，一般場(chǎng)景下再探索其他下載方式意義不大。但是還是有些場(chǎng)景是瀏覽器下載不能滿足的，比如要求我們的web應(yīng)用對(duì)下載進(jìn)度的進(jìn)行監(jiān)控，或者下載完成后觸發(fā)特定事件，或者web應(yīng)用可以自動(dòng)取消下載過程，或者使用worker創(chuàng)建一個(gè)后臺(tái)運(yùn)行的下載等等。對(duì)于以上情況我們都可以采用基于Blod對(duì)象的ajax下載。

ajax下載附件和ajax上傳附件一樣，需要瀏覽器支持ajax2.0。其實(shí)所謂下載和和普通的ajax請(qǐng)求沒什么區(qū)別，都是對(duì)一個(gè)url地址做請(qǐng)求，但是下載一般都是二進(jìn)制文件，不是文本對(duì)象或者json對(duì)象，需要JavaScript提供一個(gè)對(duì)夠封裝這個(gè)二進(jìn)制文件的類型，這就是blod。因此要設(shè)置響應(yīng)的類型responseType的值為“blod”：

var xhr =new XMLHttpRequest();
xhr.open(option.type ? option.type.toUpperCase() : 'GET', url, true);
xhr.responseType = 'blob';

要求XMLHttpRequest對(duì)象的responseType字段值是blob。那么blod對(duì)象又是什么？

blod對(duì)象

MDN對(duì)其描述為：

Blob對(duì)象是包含有只讀原始數(shù)據(jù)的類文件對(duì)象。Blob對(duì)象中的數(shù)據(jù)并不一定得是JavaScript 中的原生形式。File接口基于 Blob，繼承了Blob的功能，并且擴(kuò)展支持用戶計(jì)算機(jī)上的本地文件。通過Blob對(duì)象我們可以將一個(gè)二進(jìn)制流封裝為一個(gè)對(duì)象。

如果你了解過html5的file相關(guān)的api，你對(duì)于blod對(duì)象應(yīng)該不會(huì)是陌生。blod能夠把一個(gè)字節(jié)流封裝為一個(gè)文件，將XMLHttpRequest對(duì)象的responseType值是blob，我們可以把響應(yīng)體當(dāng)做是一個(gè)blob對(duì)象處理。

xhr.onload = function () {
  //對(duì)于重定向的文件不予理會(huì)
  if (this.status >= 200 && this.status < 300) {
    var blob = new Blob([this.response], {type: this.response.type});
  }
}

使用ajax下載文件，再將文件保存為blob對(duì)象，緩存在瀏覽器中。那么如何讓用戶將文件保存到硬盤上呢？

將blob對(duì)象保存在硬盤上

我們可以效仿瀏覽器下載，生成一個(gè)a標(biāo)簽或者iframe，再生成一個(gè)url，這樣就回到了瀏覽器下載了，瀏覽器會(huì)自動(dòng)生成一個(gè)保存附件的窗口。url可以使用URL.createObjectURL(blob)方法獲得，URL.createObjectURL支持Blob對(duì)象和File對(duì)象，能夠生成一個(gè)虛擬的url使當(dāng)前用戶可以訪問到這些對(duì)象，當(dāng)然也包括下載。不同于直接從服務(wù)器下載，這里的下載是客戶端內(nèi)部的，不走網(wǎng)絡(luò)io，所以下載幾乎是瞬時(shí)的。不過生成完這個(gè)url后，還要將其釋放，否則blob資源不會(huì)被垃圾回收，使用URL.revokeObjectURL就可以釋放掉這個(gè)url，讓blob資源釋放。對(duì)于ie瀏覽器，有自己的一套Blob對(duì)象處理策略，就是msSaveOrOpenBlob和msSaveBlob兩個(gè)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);
}

進(jìn)度條和取消下載

然后就是進(jìn)度條和下載取消功能了，其實(shí)XMLHttpRequest對(duì)象是有個(gè)progress事件的，只是我們平時(shí)做ajax請(qǐng)求的時(shí)候都忽略他，畢竟一般請(qǐng)求都是瞬時(shí)的，不需要為其設(shè)置進(jìn)度條。但是ajax下載卻不一樣，下載附件是需要時(shí)間的，因此為其開發(fā)個(gè)進(jìn)度條還是很有必要的，監(jiān)聽progress事件，我們就可以獲取下載進(jìn)度。

使用XMLHttpRequest對(duì)象的abort函數(shù)可以取消下載，此外load事件可以監(jiān)聽到下載完成，error事件可以監(jiān)聽到下載失敗?？傊?，ajax下載和一個(gè)普通的ajax請(qǐng)求的事件和方法是完全一樣的。

性能優(yōu)化和同源策略

ajax下載和長(zhǎng)連接一樣，會(huì)比普通請(qǐng)求占用更多帶寬，尤其下載對(duì)帶寬占用更是嚴(yán)重。因此下載過程中可能會(huì)阻塞其他的ajax請(qǐng)求，所以建議ajax下載的資源和其他請(qǐng)求的資源使用不同的域名，但是這樣又會(huì)帶來新的問題——同源策略問題。

同源策略是瀏覽器安全的基石，如果沒有同源策略隨便一個(gè)網(wǎng)站都可以發(fā)出csrf攻擊。如果不能保證下載的資源的url和當(dāng)前頁面的url同源，就會(huì)觸發(fā)同源策略導(dǎo)致下載失敗，因此需要做ajax跨域處理。相比iframe和新頁簽的下載方法(事實(shí)上iframe也有同源策略，要求iframe里面的頁面和父頁面不能訪問對(duì)方的內(nèi)容，但是下載功能不涉及這種訪問對(duì)方的內(nèi)容操作，所以iframe下載是不受同源策略影響的)，ajax下載本質(zhì)上還是ajax，因此會(huì)受到瀏覽器同源策略的影響。所以如果下載非同源的附件，就需要附件所在的服務(wù)器支持cors，如果服務(wù)器需要訪問cookie，還要將XMLHttpRequest對(duì)象的withCredentials設(shè)置為true。

同時(shí)出于同源策略的原因，我們不能使用ajax的形式去下載第三方資源，因?yàn)橥ǔ５南螺d服務(wù)都不會(huì)做cors處理的，比竟iframe下載或者新頁簽下載的方式是不受同源策略影響的，所以無需做cors處理。這大大限制了ajax下載的適用度。

總結(jié)：

最后我們?cè)倏偨Y(jié)一下ajax下載的使用場(chǎng)景：

1.需求對(duì)下載進(jìn)度的進(jìn)行監(jiān)控的場(chǎng)景，比如發(fā)現(xiàn)用戶下載進(jìn)度過慢，主動(dòng)提供其他解決方案。

2.需要下載完成后觸發(fā)特定事件，例如彈出一個(gè)桌面提示Notification。

3.需要提供一個(gè)后臺(tái)下載。例如我們可以在用戶打開網(wǎng)頁后將附件偷偷地下載下來再緩存起來，等到用戶真的想下載附件時(shí)候直接保存在本地。我們甚至可以借助worker創(chuàng)建一個(gè)后臺(tái)線程，從而還能保證下載過程不會(huì)影響頁面正常渲染。

4.需要下載后不保存在硬盤中，而是webapp直接處理附件。例如pdf.js，就是采用的ajax下載。

最后奉上筆者的一個(gè)ajax下載的demo：ajaxDownloadDemo_jb51.rar

以上是“如何實(shí)現(xiàn)基于Blod的ajax進(jìn)度條”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)站欄目：如何實(shí)現(xiàn)基于Blod的ajax進(jìn)度條-創(chuàng)新互聯(lián)
本文網(wǎng)址：http://muchs.cn/article4/pdsoe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供移動(dòng)網(wǎng)站建設(shè)、動(dòng)態(tài)網(wǎng)站、網(wǎng)站導(dǎo)航、網(wǎng)站營(yíng)銷、做網(wǎng)站、響應(yīng)式網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)