基于Blod的ajax進(jìn)度條下載實(shí)現(xiàn)示例代碼
普通的瀏覽器下載
在web開發(fā)中,如果要實(shí)現(xiàn)下載功能,往往都是使用新開web頁(yè)面或者是使用iframe的形式。實(shí)現(xiàn)起來(lái)其實(shí)很簡(jiǎn)單:
<a target="_blank" href="download.zip" rel="external nofollow" >點(diǎn)擊下載</a> //或者 <iframe style="display:none" src="download.zip"></iframe>
用戶點(diǎn)擊a標(biāo)簽彈出一個(gè)新頁(yè)簽后,或者是打開了iframe后,瀏覽器就會(huì)接受一個(gè)下載響應(yīng),并下載附件。其實(shí)所謂附件下載,就是在瀏覽器讀到響應(yīng)報(bào)文的頭之后,瀏覽器生成一個(gè)下載提示框,在用戶確定后會(huì)繼續(xù)下載文件。文件其實(shí)就是個(gè)流,所謂流就是一個(gè)傳輸?shù)倪^(guò)程,瀏覽器會(huì)自動(dòng)管理這個(gè)傳輸過(guò)程,會(huì)自動(dòng)生成進(jìn)度條、停止下載按鈕、繼續(xù)繼續(xù)按鈕、取消下載按、顯示更新下載的字節(jié)數(shù)鈕等。這些都是瀏覽器自動(dòng)為我們做的,整個(gè)過(guò)程不受我們控制。
ajax下載
瀏覽器對(duì)下載的支持基本上已經(jīng)能滿足我們的需求,一般場(chǎng)景下再探索其他下載方式意義不大。但是還是有些場(chǎng)景是瀏覽器下載不能滿足的,比如要求我們的web應(yīng)用對(duì)下載進(jìn)度的進(jìn)行監(jiān)控,或者下載完成后觸發(fā)特定事件,或者web應(yīng)用可以自動(dòng)取消下載過(guò)程,或者使用worker創(chuàng)建一個(gè)后臺(tái)運(yùn)行的下載等等。對(duì)于以上情況我們都可以采用基于Blod對(duì)象的ajax下載。
ajax下載附件和ajax上傳附件一樣,需要瀏覽器支持ajax2.0。其實(shí)所謂下載和和普通的ajax請(qǐng)求沒(méi)什么區(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ī)上的本地文件。通過(guò)Blob對(duì)象我們可以將一個(gè)二進(jìn)制流封裝為一個(gè)對(duì)象。
如果你了解過(guò)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)前用戶可以訪問(wèn)到這些對(duì)象,當(dāng)然也包括下載。不同于直接從服務(wù)器下載,這里的下載是客戶端內(nèi)部的,不走網(wǎng)絡(luò)io,所以下載幾乎是瞬時(shí)的。不過(guò)生成完這個(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)聽(tīng)progress事件,我們就可以獲取下載進(jìn)度。
使用XMLHttpRequest對(duì)象的abort函數(shù)可以取消下載,此外load事件可以監(jiān)聽(tīng)到下載完成,error事件可以監(jiān)聽(tīng)到下載失敗??傊?,ajax下載和一個(gè)普通的ajax請(qǐng)求的事件和方法是完全一樣的。
性能優(yōu)化和同源策略
ajax下載和長(zhǎng)連接一樣,會(huì)比普通請(qǐng)求占用更多帶寬,尤其下載對(duì)帶寬占用更是嚴(yán)重。因此下載過(guò)程中可能會(huì)阻塞其他的ajax請(qǐng)求,所以建議ajax下載的資源和其他請(qǐng)求的資源使用不同的域名,但是這樣又會(huì)帶來(lái)新的問(wèn)題——同源策略問(wèn)題。
同源策略是瀏覽器安全的基石,如果沒(méi)有同源策略隨便一個(gè)網(wǎng)站都可以發(fā)出csrf攻擊。如果不能保證下載的資源的url和當(dāng)前頁(yè)面的url同源,就會(huì)觸發(fā)同源策略導(dǎo)致下載失敗,因此需要做ajax跨域處理。相比iframe和新頁(yè)簽的下載方法(事實(shí)上iframe也有同源策略,要求iframe里面的頁(yè)面和父頁(yè)面不能訪問(wèn)對(duì)方的內(nèi)容,但是下載功能不涉及這種訪問(wèn)對(duì)方的內(nèi)容操作,所以iframe下載是不受同源策略影響的),ajax下載本質(zhì)上還是ajax,因此會(huì)受到瀏覽器同源策略的影響。所以如果下載非同源的附件,就需要附件所在的服務(wù)器支持cors,如果服務(wù)器需要訪問(wèn)cookie,還要將XMLHttpRequest對(duì)象的withCredentials設(shè)置為true。
同時(shí)出于同源策略的原因,我們不能使用ajax的形式去下載第三方資源,因?yàn)橥ǔ5南螺d服務(wù)都不會(huì)做cors處理的,比竟iframe下載或者新頁(yè)簽下載的方式是不受同源策略影響的,所以無(wú)需做cors處理。這大大限制了ajax下載的適用度。
總結(jié):
最后我們?cè)倏偨Y(jié)一下ajax下載的使用場(chǎng)景:
1.需求對(duì)下載進(jìn)度的進(jìn)行監(jiān)控的場(chǎng)景,比如發(fā)現(xiàn)用戶下載進(jìn)度過(guò)慢,主動(dòng)提供其他解決方案。
2.需要下載完成后觸發(fā)特定事件,例如彈出一個(gè)桌面提示Notification。
3.需要提供一個(gè)后臺(tái)下載。例如我們可以在用戶打開網(wǎng)頁(yè)后將附件偷偷地下載下來(lái)再緩存起來(lái),等到用戶真的想下載附件時(shí)候直接保存在本地。我們甚至可以借助worker創(chuàng)建一個(gè)后臺(tái)線程,從而還能保證下載過(guò)程不會(huì)影響頁(yè)面正常渲染。
4.需要下載后不保存在硬盤中,而是webapp直接處理附件。例如pdf.js,就是采用的ajax下載。
最后奉上筆者的一個(gè)ajax下載的demo:ajaxDownloadDemo_jb51.rar
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- ajax post下載flask文件流以及中文文件名問(wèn)題
- javascript寫一個(gè)ajax自動(dòng)攔截并下載數(shù)據(jù)代碼實(shí)例
- SpringMVC+Ajax實(shí)現(xiàn)文件批量上傳和下載功能實(shí)例代碼
- Ajax請(qǐng)求二進(jìn)制流進(jìn)行處理(ajax異步下載文件)的簡(jiǎn)單方法
- 利用 FormData 對(duì)象和 Spring MVC 配合實(shí)現(xiàn)Ajax文件下載功能
- PHP中ajax無(wú)刷新上傳圖片與圖片下載功能
- 使用Ajax生成的Excel文件并下載的實(shí)例
- jQuery的ajax下載blob文件
- jQuery+Ajax+PHP彈出層異步登錄效果(附源碼下載)
- PHP+Ajax實(shí)現(xiàn)無(wú)刷新分頁(yè)實(shí)例詳解(附demo源碼下載)
- 前端ajax請(qǐng)求+后端java實(shí)現(xiàn)的下載zip壓縮包功能示例
相關(guān)文章
AJAX和WebService實(shí)現(xiàn)郵箱驗(yàn)證(無(wú)刷新驗(yàn)證郵件地址是否合法)
首先在項(xiàng)目里面添加服務(wù)引用,驗(yàn)證 Email 地址是否正確(郵件地址合法、只是域名正確、郵件服務(wù)器沒(méi)有找到等等)感興趣的朋友可以參考下哈2013-05-05AJAX請(qǐng)求隊(duì)列實(shí)現(xiàn)
這篇文章主要為大家詳細(xì)介紹了AJAX請(qǐng)求隊(duì)列的實(shí)現(xiàn)代碼,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-11-11Ajax讀取數(shù)據(jù)到表格的實(shí)現(xiàn)代碼
前兩篇我們講了 ajax開始的準(zhǔn)備 與及如何使用ajax技術(shù)進(jìn)行簡(jiǎn)單的數(shù)據(jù)讀?。?/div> 2010-10-10Ajax post請(qǐng)求跳轉(zhuǎn)頁(yè)面
這篇文章主要介紹了Ajax post請(qǐng)求跳轉(zhuǎn)頁(yè)面的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-12-12ajax實(shí)現(xiàn)select三級(jí)聯(lián)動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了ajax動(dòng)態(tài)實(shí)現(xiàn)select三級(jí)聯(lián)動(dòng),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-01-01最新評(píng)論