欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

基于Blod的ajax進(jìn)度條下載實現(xiàn)示例代碼

 更新時間:2017年02月27日 08:52:33   作者:laden666666  
本篇文章主要介紹了基于Blod的ajax進(jìn)度條下載實現(xiàn)示例代碼,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧

普通的瀏覽器下載

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

<a target="_blank" href="download.zip" rel="external nofollow" >點擊下載</a>
//或者
<iframe style="display:none" src="download.zip"></iframe>

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

ajax下載

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

ajax下載附件和ajax上傳附件一樣,需要瀏覽器支持ajax2.0。其實所謂下載和和普通的ajax請求沒什么區(qū)別,都是對一個url地址做請求,但是下載一般都是二進(jìn)制文件,不是文本對象或者json對象,需要JavaScript提供一個對夠封裝這個二進(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對象的responseType字段值是blob。那么blod對象又是什么?

blod對象

MDN對其描述為:

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

如果你了解過html5的file相關(guān)的api,你對于blod對象應(yīng)該不會是陌生。blod能夠把一個字節(jié)流封裝為一個文件,將XMLHttpRequest對象的responseType值是blob,我們可以把響應(yīng)體當(dāng)做是一個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標(biāo)簽或者iframe,再生成一個url,這樣就回到了瀏覽器下載了,瀏覽器會自動生成一個保存附件的窗口。url可以使用URL.createObjectURL(blob)方法獲得,URL.createObjectURL支持Blob對象和File對象,能夠生成一個虛擬的url使當(dāng)前用戶可以訪問到這些對象,當(dāng)然也包括下載。不同于直接從服務(wù)器下載,這里的下載是客戶端內(nèi)部的,不走網(wǎng)絡(luò)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);
}

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

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

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

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

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

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

同時出于同源策略的原因,我們不能使用ajax的形式去下載第三方資源,因為通常的下載服務(wù)都不會做cors處理的,比竟iframe下載或者新頁簽下載的方式是不受同源策略影響的,所以無需做cors處理。這大大限制了ajax下載的適用度。

總結(jié):

最后我們再總結(jié)一下ajax下載的使用場景:

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

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

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

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

最后奉上筆者的一個ajax下載的demo:ajaxDownloadDemo_jb51.rar

以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • AJAX和WebService實現(xiàn)郵箱驗證(無刷新驗證郵件地址是否合法)

    AJAX和WebService實現(xiàn)郵箱驗證(無刷新驗證郵件地址是否合法)

    首先在項目里面添加服務(wù)引用,驗證 Email 地址是否正確(郵件地址合法、只是域名正確、郵件服務(wù)器沒有找到等等)感興趣的朋友可以參考下哈
    2013-05-05
  • 全面解析Ajax綜合應(yīng)用(全)

    全面解析Ajax綜合應(yīng)用(全)

    AJAX = 異步 JavaScript 和 XML,AJAX 是一種用于創(chuàng)建快速動態(tài)網(wǎng)頁的技術(shù)。本文給大家?guī)砹巳娼馕鯝jax綜合應(yīng)用大全,非常不錯具有參考借鑒價值,感興趣的朋友一起看下吧
    2016-06-06
  • AJAX請求隊列實現(xiàn)

    AJAX請求隊列實現(xiàn)

    這篇文章主要為大家詳細(xì)介紹了AJAX請求隊列的實現(xiàn)代碼,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2016-11-11
  • Ajax讀取數(shù)據(jù)到表格的實現(xiàn)代碼

    Ajax讀取數(shù)據(jù)到表格的實現(xiàn)代碼

    前兩篇我們講了 ajax開始的準(zhǔn)備 與及如何使用ajax技術(shù)進(jìn)行簡單的數(shù)據(jù)讀?。?/div> 2010-10-10
  • Ajax post請求跳轉(zhuǎn)頁面

    Ajax post請求跳轉(zhuǎn)頁面

    這篇文章主要介紹了Ajax post請求跳轉(zhuǎn)頁面的相關(guān)資料,非常不錯,具有參考借鑒價值,需要的朋友可以參考下
    2016-12-12
  • ajax實現(xiàn)select三級聯(lián)動效果

    ajax實現(xiàn)select三級聯(lián)動效果

    這篇文章主要為大家詳細(xì)介紹了ajax動態(tài)實現(xiàn)select三級聯(lián)動,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2018-01-01
  • Ajax.基礎(chǔ)教程 電子書版 提供下載

    Ajax.基礎(chǔ)教程 電子書版 提供下載

    Ajax.基礎(chǔ)教程 電子書版 提供下載...
    2007-02-02
  • Ajax通用模板實現(xiàn)代碼

    Ajax通用模板實現(xiàn)代碼

    Ajax通用模板實現(xiàn)代碼,需要的朋友可以參考下。
    2011-12-12
  • AJAX跨域問題解決方案詳解

    AJAX跨域問題解決方案詳解

    從剛接觸前端開發(fā)起,跨域這個詞就一直以很高的頻率在身邊重復(fù)出現(xiàn),一直到現(xiàn)在,已經(jīng)調(diào)試過N個跨域相關(guān)的問題了,這篇文章主要介紹了AJAX跨域問題的解決方案
    2022-08-08
  • Ajax request response 亂碼解決方法

    Ajax request response 亂碼解決方法

    今天最早遇到一個脫離平臺,單獨給用戶定制開發(fā)的關(guān)于狀態(tài)管理的功能局部刷新出現(xiàn)亂碼的情況,仔細(xì)查了下代碼發(fā)現(xiàn)并無特殊之處,charset統(tǒng)一使用GB18030,ajax傳遞參數(shù)使用默認(rèn)UTF-8,對傳遞的中文信息手動轉(zhuǎn)碼。
    2009-05-05

最新評論