理解DOMString、Document、FormData、Blob、File、ArrayBuffer數(shù)據(jù)類型 ? 張鑫旭

風(fēng)之飛雪 2014-03-14

展開全文

by zhangxinxu from http://www.

本文地址：http://www./wordpress/?p=3725

一、XMLHttpRequest 2.0的家臣們

我大學(xué)那會兒，一個(gè)稱為Ajax的東西對前端行業(yè)造成了深遠(yuǎn)影響，不僅是JS語言，而包括前端地位、職位興起以及工作分工等。拋開IE6瀏覽器不談，其他瀏覽器的Ajax實(shí)際上都是借助XMLHttpRequest實(shí)現(xiàn)的。

然后，好多年過去了，XMLHttpRequest帶著兩位家臣，DOMString和Document數(shù)據(jù)類型攻城略地，幾乎一統(tǒng)天下。

然時(shí)代是發(fā)展的，人們?nèi)罕姷男枨笫峭⒌?，HTML5猶如冉冉升起的新星開始普照大地，恩澤大眾。XMLHttpRequest由于就兩個(gè)家臣DOMString和Document，且并不是100%聽話。因此，其已經(jīng)開始hold不住HTML5的耀眼光芒了。為了順應(yīng)時(shí)代的潮流，XMLHttpRequest凹凸曼變身升級到2.0，變化諸多，其中一個(gè)很重要的變化就是廣招家臣，擴(kuò)張實(shí)力，與HTML5一起完成千秋萬載之大業(yè)。

這些家臣有：DOMString、Document、FormData、Blob、File、ArrayBuffer這些類型。也就是在XMLHttpRequest Level 2背景下，我們Ajax可以發(fā)送任意這些類型的數(shù)據(jù)。有了諸多忠實(shí)可靠的家臣，XMLHttpRequest Level 2猶如織田信長般勢不可擋，前途無量！

織田信長家臣有：羽柴秀吉、柴田勝家、明智光秀、竹中半兵衛(wèi)、黑田官兵衛(wèi)、織田信忠、瀧川一益、丹羽長秀、前田利家、池田恒興、佐久間信盛、森蘭丸、九鬼嘉隆

二、家臣之DOMString

跟著XMLHttpRequest闖南走北很多年，看名字似乎很囂張且高深莫測。實(shí)際上，在JavaScript中，DOMString就是String。規(guī)范解釋說DOMString指的是UTF-16字符串，而JavaScript正是使用了這種編碼的字符串，因此，在Ajax中，DOMString就等同于JS中的普通字符串。

大家應(yīng)該都與XMLHttpRequest中數(shù)據(jù)返回屬性之responseText打過交道吧，按照我的理解，這廝就是與DOMString數(shù)據(jù)類型發(fā)生關(guān)系的，表明返回的數(shù)據(jù)是常規(guī)字符串。

三、家臣之Document數(shù)據(jù)類型

如果單純看Document對象，則解釋很多，在這里，我們只要關(guān)注下圖標(biāo)注的這一個(gè)：

responseXML

可以看到，實(shí)際上就是XMLHttpRequest中數(shù)據(jù)返回屬性之responseXML，也就是可以解析為XML的數(shù)據(jù)。因此，這里的Document數(shù)據(jù)類似你就可以近似看成XML數(shù)據(jù)類型。

DOMString和Document都是XMLHttpRequest時(shí)代就跟隨的數(shù)據(jù)類型，元老級。下面這些數(shù)據(jù)類型都是XMLHttpRequest 2.0新增的，新招的家臣，各懷絕技哦！

四、家臣之FormData對象

XMLHttpRequest Level 2添加了一個(gè)新的接口FormData. 利用FormData對象，我們可以通過JavaScript用一些鍵值對來模擬一系列表單控件，我們還可以使用XMLHttpRequest的send()方法來異步的提交這個(gè)”表單”。比起普通的ajax, 使用FormData的最大優(yōu)點(diǎn)就是我們可以異步上傳一個(gè)二進(jìn)制文件。

以上為官方口吻的解釋，略抽象。我們應(yīng)該都用過jQuery，其中有個(gè)方法叫做serialize(), 作用就是表單序列化，也就是以查詢字符串形式獲得類表單post/get的數(shù)據(jù)給Ajax請求，例如：userid=123&username=zxx.

FormData對象的作用就類似于這里的serialize()方法，不過FormData是瀏覽器原生的，且支持二進(jìn)制文件，是個(gè)一眼就會讓人喜歡的很贊的東西！

兼容性如下：

formData兼容性張鑫旭-鑫空間-鑫生活

IE10+瀏覽器已經(jīng)良好支持了，下面要介紹的其他家臣也都是IE10+支持。

實(shí)際使用是作為構(gòu)造函數(shù)，如下：

new FormData ([可選]HTMLFormElement)

HTMLFormElement這個(gè)參數(shù)可選，可有可無。表示form表單元素，就是我們要序列化，要提交的那個(gè)表單元素。

例如：

var newFormData = new FormData(someFormElement);

newFormData就是someFormElement這個(gè)表單元素中所有鍵值對數(shù)據(jù)了。

您可以狠狠地點(diǎn)擊這里：FormData對象與表單數(shù)據(jù)獲取demo

demo頁面為一個(gè)普通的登錄表單，截圖如下：

demo表單截圖

點(diǎn)擊登錄執(zhí)行Ajax登錄，不過這里是采用FormData格式發(fā)送的。

相關(guān)JS代碼如下：

document.querySelector("#formData").addEventListener("submit", function(event) {
    var myFormData = new FormData(this);
    var xhr = new XMLHttpRequest();
    xhr.open(this.method, this.action);
    xhr.onload = function(e) {
        if (xhr.status == 200 && xhr.responseText) {
            // 顯示：'歡迎你，' + xhr.responseText;
            this.reset();
        }
    }.bind(this);
    // 發(fā)送FormData對象數(shù)據(jù)
    xhr.send(myFormData);
    // 阻止默認(rèn)的表單提交
    event.preventDefault();
}, false);

我們打開工具查看下請求：

firebug查看請求

Chrome開發(fā)者工具查看

以上分別是Firebug和Chrome開發(fā)者工具查看的結(jié)果。

我們再看下傳統(tǒng)Ajax請求：

傳統(tǒng)Ajax POST firebug查看

傳統(tǒng)Ajax post Chrome下查看張鑫旭-鑫空間-鑫生活

差異還是比較大的。

FormData提交格式的每個(gè)數(shù)據(jù)分三部分：

第一部分也就是第一行，表示“分界線(boundary)”，我尚未深入研究這個(gè)分界線，不過，我沒估計(jì)錯(cuò)的話，二進(jìn)制大文件分隔傳輸時(shí)候，就是使用這個(gè)分界線。在webkit核心中，使用“——WebKitFormBoundary”加16位隨機(jī)Base64位編碼的字符串作為分隔邊界。根據(jù)Firebug的顯示，F(xiàn)irefox中，似乎是使用很多個(gè)"-"加時(shí)間戳進(jìn)行邊界分隔的。這里的邊界的作用比較單純，可能就是把表單的這兩個(gè)字段作為兩個(gè)獨(dú)立數(shù)據(jù)流傳輸。

第二部分也就是第二行，表示內(nèi)容配置，這里都是統(tǒng)一的form-data（因?yàn)槭荈ormData對象格式提交的），然后緊跟著name鍵值。

第三部分就是第三行，表示傳輸?shù)闹怠?/li>

雖然前臺傳輸差異較大，但是，后臺的處理是可以一致的，例如，我這里的PHP代碼就非常簡單：

<?php
    $username = $_POST['email'];
    if (isset($username) == true) {
        echo $username;
    } else {
        echo '';    
    }
?>

FormData對象還有一個(gè)方法，為append()方法，可以人為的給當(dāng)前FormData對象添加一個(gè)鍵/值對。

語法如下：

void append(DOMString 鍵, Blob 值, [可選] DOMString 文件名);
void append(DOMString 鍵, DOMString 值);

語法第一行出現(xiàn)了Blob, 這是我們下面要介紹的家臣之一，您可以先記住，這是用來表示二進(jìn)制文件的，后面的文件名可選，據(jù)說，如果缺省，且傳輸?shù)氖荁lob對象，則會使用"blob"代替。

第二行就是比較常規(guī)的用法，DOMString這個(gè)家臣已經(jīng)介紹了，在JavaScript中就是普通字符串的意思。因此，比方說我們要額外提交個(gè)token值，可能就是：

myFormData.append("token", "ce509193050ab9c2b0c518c9cb7d9556");

于是，后臺就可以get token這個(gè)值了。

大家自行補(bǔ)腦，我就不再撐篇幅了。

五、家臣之Blob數(shù)據(jù)對象

一個(gè)Blob對象就是一個(gè)包含有只讀原始數(shù)據(jù)的類文件對象。Blob對象中的數(shù)據(jù)并不一定得是JavaScript中的原生形式。File接口基于Blob, 繼承了Blob的功能，并且擴(kuò)展支持了用戶計(jì)算機(jī)上的本地文件。

創(chuàng)建Blob對象的方法有幾種，可以調(diào)用Blob構(gòu)造函數(shù)，還可以使用一個(gè)已有Blob對象上的slice()方法切出另一個(gè)Blob對象，還可以調(diào)用canvas對象上的toBlob方法。

以上為MDN上官方口吻的解釋。實(shí)際上，Blob是計(jì)算機(jī)界通用術(shù)語之一，全稱寫作：BLOB (binary large object)，表示二進(jìn)制大對象。MySql/Oracle數(shù)據(jù)庫中，就有一種Blob類型，專門存放二進(jìn)制數(shù)據(jù)。

在實(shí)際Web應(yīng)用中，Blob更多是圖片二進(jìn)制形式的上傳與下載，雖然其可以實(shí)現(xiàn)幾乎任意文件的二進(jìn)制傳輸。

舉個(gè)例子，使用Blob從服務(wù)器上GET某mm的圖片（只要關(guān)心標(biāo)紅的部分）：

var xhr = new XMLHttpRequest();    
xhr.open("get", "mm1.jpg", true);
xhr.responseType = "blob";
xhr.onload = function() {
    if (this.status == 200) {
        var blob = this.response;  // this.response也就是請求的返回就是Blob對象
        var img = document.createElement("img");
        img.onload = function(e) {
          window.URL.revokeObjectURL(img.src); // 清除釋放
        };
        img.src = window.URL.createObjectURL(blob);
        eleAppend.appendChild(img);    
    }
}
xhr.send();

您可以狠狠地點(diǎn)擊這里：Blob獲取圖片并二進(jìn)制顯示demo

我們查看demo頁面這個(gè)mm圖片元素，會發(fā)現(xiàn)其URL地址既不是傳統(tǒng)HTTP，也不是Base64 URL，而是Blob形式~如下截圖示意：

圖片blob地址示意

demo頁面圖片的blob格式的URL

這就是Blob在Web開發(fā)中非常重要的一個(gè)功能——?jiǎng)?chuàng)建Blob網(wǎng)址。上述代碼涉及XMLHttpRequest 2一些重要知識點(diǎn)，以及window.URL相關(guān)技術(shù)，都是可以深入挖掘?qū)W習(xí)的部分，但，不是本文重點(diǎn)，以后有機(jī)會會細(xì)致闡述。

但是，并不是所有的圖片都能以Blob形式請求，因?yàn)椋吘故茿jax請求嘛，還是有一定的跨域限制。XMLHttpRequest 2雖然支持跨源資源共享(CORS)，但是，還是需要對Access-Control-Allow-Origin的設(shè)置，允許來自那個(gè)域名的這類請求，例如，允許本人的站點(diǎn)Blob請求你服務(wù)器上的圖片資源，你可以設(shè)置：

Access-Control-Allow-Origin: http://

要允許任何域向您提交請求，可以設(shè)置：

Access-Control-Allow-Origin: *

我們都知道CSS3的font-face屬性，在Firefox瀏覽器下，如果字體文件跨域（包括跨子域），是顯示不出來的，也是通過

Access-Control-Allow-Origin: *

設(shè)置解決。其實(shí)，本質(zhì)是一樣的。

由于權(quán)限原因，我的個(gè)人站點(diǎn)無法配置Access-Control-Allow-Origin，我測試了下，新浪微博的圖片是無法二進(jìn)制請求的，不過我的前東家，的圖片都是可以Ajax請求并Blob顯示的，悄悄告訴大家，是我當(dāng)初動的手腳，(*^__^*) 嘻嘻……

屬性

Blob對象有兩個(gè)屬性，參見下表：

屬性名	類型	描述
size	unsigned long long(表示可以很大的數(shù)值)	Blob對象中所包含數(shù)據(jù)的大小。字節(jié)為單位。只讀。
type	DOMString	一個(gè)字符串，表明該Blob對象所包含數(shù)據(jù)的MIME類型。例如，上demo圖片MIME類似就是”`image/jpeg`“. 如果類型未知，則該值為空字符串。只讀。

今天在微博上看到一個(gè)表單提交之前判斷文件大小并作阻止的tip，實(shí)際上，就是使用的Blob對象的size屬性。

構(gòu)造函數(shù)

與FormData對象類似，Blob也有一個(gè)構(gòu)造函數(shù)用法。語法如下：

Blob Blob(
  [可選] Array parts,
  [可選] BlobPropertyBag properties
);

例如：

var myBlob= new Blob(arrayBuffer);

其中，兩個(gè)參數(shù)的含義是：

parts: 一個(gè)數(shù)組，包含了將要添加到Blob對象中的數(shù)據(jù)。數(shù)組元素可以是任意多個(gè)的ArrayBuffer, ArrayBufferView(typed array), Blob, 或者DOMString對象。
properties: 一個(gè)對象，設(shè)置Blob對象的一些屬性。目前僅支持一個(gè)type屬性，表示Blob的類型。

方法

Blob對象有個(gè)很重要的方法-slice()，作用是，可以實(shí)現(xiàn)文件的分割！

這個(gè)slice()有一段不堪回首的歷史，不過現(xiàn)在大家不要關(guān)心。目前的slice()方法已經(jīng)跟JS中數(shù)組啊，字符串的slice方法用法一致了。如下：

Blob slice(
  [可選] long long start,
  [可選] long long end,
  [可選] DOMString contentType
};

參數(shù)釋義：

start: 開始索引，可以為負(fù)數(shù)，語法類似于數(shù)組的slice方法。默認(rèn)值為0.
end: 結(jié)束索引，可以為負(fù)數(shù)，語法類似于數(shù)組的slice方法。默認(rèn)值為最后一個(gè)索引。
contentType: 新的Blob對象的MIME類型，這個(gè)值將會成為新的Blob對象的type屬性的值，默認(rèn)為一個(gè)空字符串。

本站是提供個(gè)人知識管理的網(wǎng)絡(luò)存儲空間，所有內(nèi)容均由用戶發(fā)布，不代表本站觀點(diǎn)。請注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購買等信息，謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請點(diǎn)擊一鍵舉報(bào)。

轉(zhuǎn)藏 分享

QQ空間 QQ好友新浪微博微信

獻(xiàn)花（0） +1

來自：風(fēng)之飛雪 > 《Ajax》

舉報(bào)/認(rèn)領(lǐng)