理解DOMSTRING、DOCUMENT、FORMDATA、BLOB、FILE、ARRAYBUFFER數據類型

時間 2019-11-12

標籤理解 domstring document formdata blob file arraybuffer 數據類型简体版

原文原文鏈接

1、XMLHttpRequest 2.0的家臣們php

我大學那會兒，一個稱爲Ajax的東西對前端行業形成了深遠影響，不只是JS語言，而包括前端地位、職位興起以及工做分工等。拋開IE6瀏覽器不談，其餘瀏覽器的Ajax實際上都是藉助XMLHttpRequest實現的。html

而後，好多年過去了，XMLHttpRequest帶着兩位家臣，DOMString和Document數據類型攻城略地，幾乎一統天下。前端

然時代是發展的，人們羣衆的需求是旺盛的，HTML5猶如冉冉升起的新星開始普照大地，恩澤大衆。XMLHttpRequest因爲就兩個家臣DOMString和Document，且並非100%聽話。所以，其已經開始hold不住HTML5的耀眼光芒了。爲了順應時代的潮流，XMLHttpRequest凹凸曼變身升級到2.0，變化諸多，其中一個很重要的變化就是廣招家臣，擴張實力，與HTML5一塊兒完成千秋萬載之大業。web

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

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

2、家臣之DOMString

跟着XMLHttpRequest闖南走北不少年，看名字彷佛很囂張且高深莫測。實際上，在JavaScript中，DOMString就是String。規範解釋說DOMString指的是UTF-16字符串，而JavaScript正是使用了這種編碼的字符串，所以，在Ajax中，DOMString就等同於JS中的普通字符串。canvas

你們應該都與XMLHttpRequest中數據返回屬性之responseText打過交道吧，按照個人理解，這廝就是與DOMString數據類型發生關係的，代表返回的數據是常規字符串。跨域

3、家臣之Document數據類型

若是單純看Document對象，則解釋不少，在這裏，咱們只要關注下圖標註的這一個：
數組

能夠看到，實際上就是XMLHttpRequest中數據返回屬性之responseXML，也就是能夠解析爲XML的數據。所以，這裏的Document數據相似你就能夠近似當作XML數據類型。瀏覽器

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

4、家臣之FormData對象

XMLHttpRequest Level 2添加了一個新的接口FormData. 利用FormData對象，咱們能夠經過JavaScript用一些鍵值對來模擬一系列表單控件，咱們還可使用XMLHttpRequest的send()方法來異步的提交這個」表單」。比起普通的ajax, 使用FormData的最大優勢就是咱們能夠異步上傳一個二進制文件。

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

FormData對象的做用就相似於這裏的serialize()方法，不過FormData是瀏覽器原生的，且支持二進制文件，是個一眼就會讓人喜歡的很讚的東西！

兼容性以下：

IE10+瀏覽器已經良好支持了，下面要介紹的其餘家臣也都是IE10+支持。

實際使用是做爲構造函數，以下：

new FormData ([可選]HTMLFormElement)

HTMLFormElement這個參數可選，無關緊要。表示form表單元素，就是咱們要序列化，要提交的那個表單元素。

例如：

var newFormData = new FormData(someFormElement);

newFormData就是someFormElement這個表單元素中全部鍵值對數據了。

您能夠狠狠地點擊這裏：FormData對象與表單數據獲取demo

demo頁面爲一個普通的登陸表單，截圖以下：

點擊登陸執行Ajax登陸，不過這裏是採用FormData格式發送的。

相關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);     // 發送FormData對象數據     xhr.send(myFormData);     // 阻止默認的表單提交     event.preventDefault(); }, false);

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

以上分別是Firebug和Chrome開發者工具查看的結果。

咱們再看下傳統Ajax請求：

差別仍是比較大的。
FormData提交格式的每一個數據分三部分：

第一部分也就是第一行，表示「分界線(boundary)」，我還沒有深刻研究這個分界線，不過，我沒估計錯的話，二進制大文件分隔傳輸時候，就是使用這個分界線。在webkit核心中，使用「——WebKitFormBoundary」加16位隨機Base64位編碼的字符串做爲分隔邊界。根據Firebug的顯示，Firefox中，彷佛是使用不少個"-"加時間戳進行邊界分隔的。這裏的邊界的做用比較單純，可能就是把表單的這兩個字段做爲兩個獨立數據流傳輸。
第二部分也就是第二行，表示內容配置，這裏都是統一的form-data（由於是FormData對象格式提交的），而後緊跟着name鍵值。
第三部分就是第三行，表示傳輸的值。

雖然前臺傳輸差別較大，可是，後臺的處理是能夠一致的，例如，我這裏的PHP代碼就很是簡單：

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

FormData對象還有一個方法，爲append()方法，能夠人爲的給當前FormData對象添加一個鍵/值對。

語法以下：

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

語法第一行出現了Blob, 這是咱們下面要介紹的家臣之一，您能夠先記住，這是用來表示二進制文件的，後面的文件名可選，聽說，若是缺省，且傳輸的是Blob對象，則會使用"blob"代替。
第二行就是比較常規的用法，DOMString這個家臣已經介紹了，在JavaScript中就是普通字符串的意思。所以，比方說咱們要額外提交個token值，可能就是：

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

因而，後臺就能夠get token這個值了。

你們自行補腦，我就再也不撐篇幅了。

5、家臣之Blob數據對象

一個Blob對象就是一個包含有隻讀原始數據的類文件對象。Blob對象中的數據並不必定得是JavaScript中的原生形式。File接口基於Blob, 繼承了Blob的功能，而且擴展支持了用戶計算機上的本地文件。

建立Blob對象的方法有幾種，能夠調用Blob構造函數，還可使用一個已有Blob對象上的slice()方法切出另外一個Blob對象，還能夠調用canvas對象上的toBlob方法。

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

在實際Web應用中，Blob更可能是圖片二進制形式的上傳與下載，雖然其能夠實現幾乎任意文件的二進制傳輸。

舉個例子，使用Blob從服務器上GET某mm的圖片（只要關心標紅的部分）：

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();

您能夠狠狠地點擊這裏：Blob獲取圖片並二進制顯示demo

咱們查看demo頁面這個mm圖片元素，會發現其URL地址既不是傳統HTTP，也不是Base64 URL，而是Blob形式~以下截圖示意：

這就是Blob在Web開發中很是重要的一個功能——建立Blob網址。上述代碼涉及XMLHttpRequest 2一些重要知識點，以及window.URL相關技術，都是能夠深刻挖掘學習的部分，但，不是本文重點，之後有機會會細緻闡述。

可是，並非全部的圖片都能以Blob形式請求，由於，畢竟是Ajax請求嘛，仍是有必定的跨域限制。XMLHttpRequest 2雖然支持跨源資源共享(CORS)，可是，仍是須要對Access-Control-Allow-Origin的設置，容許來自那個域名的這類請求，例如，容許本人的站點Blob請求你服務器上的圖片資源，你能夠設置：

Access-Control-Allow-Origin: http://zhangxinxu.com

要容許任何域向您提交請求，能夠設置：

Access-Control-Allow-Origin: *

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

Access-Control-Allow-Origin: *

設置解決。其實，本質是同樣的。

因爲權限緣由，個人我的站點沒法配置Access-Control-Allow-Origin，我測試了下，新浪微博的圖片是沒法二進制請求的，不過個人前東家，xiaomishu.com的圖片都是能夠Ajax請求並Blob顯示的，悄悄告訴你們，是我當初動的手腳，(*^__^*) 嘻嘻……

屬性
Blob對象有兩個屬性，參見下表：

屬性名	類型	描述
size	unsigned long long(表示能夠很大的數值)	Blob對象中所包含數據的大小。字節爲單位。只讀。
type	DOMString	一個字符串，代表該Blob對象所包含數據的MIME類型。例如，上demo圖片MIME相似就是」`image/jpeg`「. 若是類型未知，則該值爲空字符串。只讀。

今天在微博上看到一個表單提交以前判斷文件大小並做阻止的tip，實際上，就是使用的Blob對象的size屬性。

構造函數
與FormData對象相似，Blob也有一個構造函數用法。語法以下：

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

例如：

var myBlob= new Blob(arrayBuffer);

其中，兩個參數的含義是：

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

方法
Blob對象有個很重要的方法-slice()，做用是，能夠實現文件的分割！

這個slice()有一段不堪回首的歷史，不過如今你們不要關心。目前的slice()方法已經跟JS中數組啊，字符串的slice方法用法一致了。以下：

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

參數釋義：

start: 開始索引，能夠爲負數，語法相似於數組的 slice方法。默認值爲0.
end: 結束索引，能夠爲負數，語法相似於數組的 slice方法。默認值爲最後一個索引。
contentType: 新的Blob對象的MIME類型，這個值將會成爲新的Blob對象的type屬性的值，默認爲一個空字符串。

顯然，此方法返回的數據格式仍是Blob對象，不過是指定範圍複製的新的Blob對象。注意，若是start參數的值比源Blob對象的size屬性值還大，則返回的Blob對象的size值爲0，也就是不包含任何數據。

6、家臣之File對象

File顧名思意就是「文件」，一般而言，表示咱們使用file控件(<input type="file">)選擇的FileList對象，或者是使用拖拽操做搞出的DataTransfer對象。

這裏的File對象也是二進制對象，所以，從屬於Blob對象，Blob對象的一些屬性與方法，File對象一樣適合，且推薦使用Blob對象的屬性與方法。

File對象自身也有一些屬性與方法，可是，有些已通過時——不推薦使用，所以，當前不少HTML5 Ajax文件上傳下載的教程中出現是屬性和方法都是過期的，不要盲目Copy，請你們明辨！

屬性

File.lastModifiedDate[只讀]: 文件對象最後修改的日期

File.name[只讀]: 文件對象的名稱

File.fileName[只讀] [過期不推薦使用]: 文件對象的名稱（請使用 File.name代替）

File.fileSize[只讀] [過期不推薦使用]: 文件對象的大小（請使用 Blob.size代替）

Blob.size[只讀]: Blob對象包含數據的字節大小

Blob.type[只讀]: 一個字符串，代表該Blob對象所包含數據的MIME類型

方法

File.getAsBinary()[過期不推薦使用]: 二進制形式返回文件數據（請使用FileReader對象的 FileReader.readAsBinaryString()方法代替）

File.getAsDataURL()[過期不推薦使用]: 返回文件 data:URL編碼字符串數據（請使用FileReader對象的 FileReader.readAsDataURL()方法代替）

File.getAsText(string encoding)[過期不推薦使用]: 以給定的字符串編碼返回文件數據解釋後的文本（請使用FileReader對象的 FileReader.readAsText()方法代替）

Blob.size[只讀]: Blob對象包含數據的字節大小

Blob.type[只讀]: 一個字符串，代表該Blob對象所包含數據的MIME類型。

上面有提到FileReader對象，這貨是至關的有貨，以前有人曾問我，如何將圖片轉換成Data base64 url格式，其中一個方法就是FileReader.readAsDataURL()方法（還有就是canvas元素的toDataURL()和toDataURLHD()方法），然與本文主旨無關，暫不贅述；如您有興趣，頁面底部有其相關知識點連接，可自行概覽。

7、家臣之ArrayBuffer對象

//zxx:ArrayBuffer對象牽扯知識點很是多，這裏僅接觸肌膚，深刻接觸下次會專門再說下。

很術語的解釋有：

ArrayBuffer表示二進制數據的原始緩衝區，該緩衝區用於存儲各類類型化數組的數據。

ArrayBuffer是二進制數據通用的固定長度容器。

所謂術語，就是小白看不懂的解釋語。我再用通俗語解釋下，但願你們能夠有點感性的認識：

術語中，提到「二進制」，咱們腦中應該會出現01010111之類；提到「緩衝」，會聯想到在線視頻提早加載一部分視頻的那個緩衝。可是，兩個合起來，「二進制數據緩衝區」，腦補就不連貫了，焦慮產生~~

如今，聽個人，上面概念所有扔掉。所謂ArrayBuffer就是個裝着2進制數據的對象。或者想象成帶了個名叫「緩衝」帽子的二進制數據。而後直接關聯：ArrayBuffer ＝ 2進制。

上面＝表示關聯，不是相等，諸位。

例如，咱們設置Ajax請求的responseType爲」arraybuffer「，咱們去請求某mm圖片，返回的response就是ArrayBuffer，就是個二進制對象。什麼緩衝不緩衝的，千萬別補腦這個。

若是還以爲概念抽象，能夠看下面的具體認知：
你們可能玩過神器編輯器Sublime Text, 咱們隨便找張圖片拖進去，會發現是相似下面這樣子的代碼：

Sublime Text以16進制的形式顯示圖片資源，ArrayBuffer的差異在因而二進制，所以，咱們能夠把ArrayBuffer的形體腦補成——上圖的數字全是的0101 1000 1101之類的。Get it否？

上面提到的Blob對象也是二進制，那Blob和ArrayBuffer有啥區別呢？

Blob能夠append ArrayBuffer數據，也就是Blob是個更高一級的大分類，相似領導的感受。ArrayBuffer則是具備某種惡魔果實的尖兵。

ArrayBuffer存在的意義就是做爲數據源提早寫入在內存中，就是提早釘死在某個區域，長度也固定，萬年不變。因而，當咱們要處理這個ArrayBuffer中的二進制數據，例如，分別8位，16位，32位轉換一遍，這個數據都不會變化，3種轉換共享數據。

So，ArrayBuffer就是緩衝出來的打死不動的二進制對象。

注意，ArrayBuffer自己是不能讀寫的，須要藉助類型化數組或DataView對象來解釋原始緩衝區（宰割原始二進制數據）。

類型化數組
類型化數組(Typed Arrays)是JavaScript中新出現的一個概念，專爲訪問原始的二進制數據而生。

類型數組的類型有：

名稱	大小 (以字節爲單位)	說明
Int8Array	1	8位有符號整數
Uint8Array	1	8位無符號整數
Int16Array	2	16位有符號整數
Uint16Array	2	16位無符號整數
Int32Array	4	32位有符號整數
Uint32Array	4	32位無符號整數
Float32Array	4	32位浮點數
Float64Array	8	64位浮點數

本質上，類型化數組和ArrayBuffer是同樣的。不過一個可讀寫（脫掉buffer限制），一個當數據源的命。

舉一些代碼例子，看看本質一致在何處：

// 建立一個8字節的ArrayBuffer   var b = new ArrayBuffer(8);      // 建立一個指向b的視圖v1，採用Int32類型，開始於默認的字節索引0，直到緩衝區的末尾   var v1 = new Int32Array(b);      // 建立一個指向b的視圖v2，採用Uint8類型，開始於字節索引2，直到緩衝區的末尾   var v2 = new Uint8Array(b, 2);      // 建立一個指向b的視圖v3，採用Int16類型，開始於字節索引2，長度爲2   var v3 = new Int16Array(b, 2, 2);

上面代碼裏變量的數據結構以下表所示：

變量	索引
	字節（不可索引）
b=	0	1	2	3	4	5	6	7
	類型數組
v1=	0				1
v2=			0	1	2	3	4	5
v3=			0		1

因爲類型化數組直接訪問固定內存，所以，速度很贊，比傳統數組要快！由於普通Javascript數組使用的是Hash查找方式。同時，類型化數組天生處理二進制數據，這對於XMLHttpRequest 二、canvas、webGL等技術有着先天的優點。

DataView對象
DataView對象在能夠在ArrayBuffer中的任何位置讀取和寫入不一樣類型的二進制數據。

用法語法以下：

var dataView = new DataView(DataView(buffer, byteOffset[可選], byteLength[可選]);

其中，buffer表示ArrayBuffer；byteOffset指緩衝區開始處的偏移量（以字節爲單位）；byteLength指緩衝區部分的長度（以字節爲單位）。

屬性

buffer: 表示ArrayBuffer

byteOffset: 指緩衝區開始處的偏移量

byteLength: 指緩衝區部分的長度

方法有不少，實際上，是有規律的，篇幅緣由，也不是重點，就單純露個臉：
getInt8, getUint8, getInt16, getUint16, getInt32, getUint32, getFloat32, getFloat64, setInt8, setUint8, setInt16,setUint16, setInt32, setUint32, setFloat32, setFloat64.

下面回到ArrayBuffer對象，ArrayBuffer對象自身也能夠構造，跟上面的FormData, Blob對象相似，例如：

var buf = new ArrayBuffer(32);

語法爲：

ArrayBuffer ArrayBuffer(length[能夠很大數值]);

咱們在控制檯運行下new ArrayBuffer(32)，看看結果：

能夠看到，其有一個byteLength屬性，表示ArrayBuffer的長度，也能夠說是大小；還有一個slice方法，語法以下：

ArrayBuffer slice(   begin   end[可選] );

begin表示起始，end表示結束點。聽說，Internet Explorer 10 以及iOS6-是沒有該方法的。

綜上，舉個ArrayBuffer的實例吧，發送使用XMLhttpRequest發送ArrayBuffer數據：

function sendArrayBuffer() {   var xhr = new XMLHttpRequest();   xhr.open('POST', '/server', true);   xhr.onload = function(e) { ... };    var uInt8Array = new Uint8Array([1, 2, 3]);    xhr.send(uInt8Array.buffer); }

使用了類型化數組，發送的是類型化數組(uInt8Array)的buffer屬性，也就是ArrayBuffer對象。

over~