by
zhangxinxu from
http://www.zhangxinxu.com本文地址：
http://www.zhangxinxu.com/wordpress/?p=3725一、XMLHttpRequest 2.0的家臣們
我大學那會兒，一個稱為Ajax的東西對前端行業(yè)造成了深遠影響，不僅是JS語言，而包括前端地位、職位興起以及工作分工等。拋開IE6瀏覽器不談，其他瀏覽器的Ajax實際上都是借助XMLHttpRequest實現(xiàn)的。
然后，好多年過去了，XMLHttpRequest帶著兩位家臣，DOMString和Document數(shù)據(jù)類型攻城略地，幾乎一統(tǒng)天下。
然時代是發(fā)展的，人們?nèi)罕姷男枨笫峭⒌?，HTML5猶如冉冉升起的新星開始普照大地，恩澤大眾。XMLHttpRequest由于就兩個家臣DOMString和Document，且并不是100%聽話。因此，其已經(jīng)開始hold不住HTML5的耀眼光芒了。為了順應時代的潮流，XMLHttpRequest凹凸曼變身升級到2.0，變化諸多，其中一個很重要的變化就是廣招家臣，擴張實力，與HTML5一起完成千秋萬載之大業(yè)。
這些家臣有：DOMString、Document、FormData、Blob、File、ArrayBuffer這些類型。也就是在XMLHttpRequest Level 2背景下，我們Ajax可以發(fā)送任意這些類型的數(shù)據(jù)。有了諸多忠實可靠的家臣，XMLHttpRequest Level 2猶如織田信長般勢不可擋，前途無量！
織田信長家臣有：羽柴秀吉、柴田勝家、明智光秀、竹中半兵衛(wèi)、黑田官兵衛(wèi)、織田信忠、瀧川一益、丹羽長秀、前田利家、池田恒興、佐久間信盛、森蘭丸、九鬼嘉隆
二、家臣之DOMString
跟著XMLHttpRequest闖南走北很多年，看名字似乎很囂張且高深莫測。實際上，在JavaScript中，DOMString就是String。規(guī)范解釋說DOMString指的是UTF-16字符串，而JavaScript正是使用了這種編碼的字符串，因此，在Ajax中，DOMString就等同于JS中的普通字符串。
大家應該都與XMLHttpRequest中數(shù)據(jù)返回屬性之responseText打過交道吧，按照我的理解，這廝就是與DOMString數(shù)據(jù)類型發(fā)生關系的，表明返回的數(shù)據(jù)是常規(guī)字符串。
三、家臣之Document數(shù)據(jù)類型
如果單純看Document對象，則解釋很多，在這里，我們只要關注下圖標注的這一個：
可以看到，實際上就是XMLHttpRequest中數(shù)據(jù)返回屬性之responseXML，也就是可以解析為XML的數(shù)據(jù)。因此，這里的Document數(shù)據(jù)類似你就可以近似看成XML數(shù)據(jù)類型。
DOMString和Document都是XMLHttpRequest時代就跟隨的數(shù)據(jù)類型，元老級。下面這些數(shù)據(jù)類型都是XMLHttpRequest 2.0新增的，新招的家臣，各懷絕技哦！
四、家臣之FormData對象
XMLHttpRequest Level 2添加了一個新的接口FormData. 利用FormData對象，我們可以通過JavaScript用一些鍵值對來模擬一系列表單控件，我們還可以使用XMLHttpRequest的send()方法來異步的提交這個”表單”。比起普通的ajax, 使用FormData的最大優(yōu)點就是我們可以異步上傳一個二進制文件。
以上為官方口吻的解釋，略抽象。我們應該都用過jQuery，其中有個方法叫做serialize(), 作用就是表單序列化，也就是以查詢字符串形式獲得類表單post/get的數(shù)據(jù)給Ajax請求，例如：userid=123&username=zxx.
FormData對象的作用就類似于這里的serialize()方法，不過FormData是瀏覽器原生的，且支持二進制文件，是個一眼就會讓人喜歡的很贊的東西！
兼容性如下：
IE10+瀏覽器已經(jīng)良好支持了，下面要介紹的其他家臣也都是IE10+支持。
實際使用是作為構(gòu)造函數(shù)，如下：
new FormData ([可選]HTMLFormElement)
HTMLFormElement這個參數(shù)可選，可有可無。表示form表單元素，就是我們要序列化，要提交的那個表單元素。
例如：
var newFormData = new FormData(someFormElement);
newFormData就是someFormElement這個表單元素中所有鍵值對數(shù)據(jù)了。
您可以狠狠地點擊這里：
FormData對象與表單數(shù)據(jù)獲取demodemo頁面為一個普通的登錄表單，截圖如下：
點擊登錄執(zhí)行Ajax登錄，不過這里是采用FormData格式發(fā)送的。
相關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); // 阻止默認的表單提交 event.preventDefault();}, false);
我們打開工具查看下請求：
以上分別是Firebug和Chrome開發(fā)者工具查看的結(jié)果。
我們再看下傳統(tǒng)Ajax請求：
差異還是比較大的。
FormData提交格式的每個數(shù)據(jù)分三部分：
第一部分也就是第一行，表示“分界線(boundary)”，我尚未深入研究這個分界線，不過，我沒估計錯的話，二進制大文件分隔傳輸時候，就是使用這個分界線。在webkit核心中，使用“——WebKitFormBoundary”加16位隨機Base64位編碼的字符串作為分隔邊界。根據(jù)Firebug的顯示，F(xiàn)irefox中，似乎是使用很多個"-"加時間戳進行邊界分隔的。這里的邊界的作用比較單純，可能就是把表單的這兩個字段作為兩個獨立數(shù)據(jù)流傳輸。
第二部分也就是第二行，表示內(nèi)容配置，這里都是統(tǒng)一的form-data（因為是FormData對象格式提交的），然后緊跟著name鍵值。
第三部分就是第三行，表示傳輸?shù)闹怠?div style="height:15px;">
雖然前臺傳輸差異較大，但是，后臺的處理是可以一致的，例如，我這里的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 值);
語法第一行出現(xiàn)了Blob, 這是我們下面要介紹的家臣之一，您可以先記住，這是用來表示二進制文件的，后面的文件名可選，據(jù)說，如果缺省，且傳輸?shù)氖荁lob對象，則會使用"blob"代替。
第二行就是比較常規(guī)的用法，DOMString這個家臣已經(jīng)介紹了，在JavaScript中就是普通字符串的意思。因此，比方說我們要額外提交個token值，可能就是：
myFormData.append("token", "ce509193050ab9c2b0c518c9cb7d9556");
于是，后臺就可以get token這個值了。
大家自行補腦，我就不再撐篇幅了。
五、家臣之Blob數(shù)據(jù)對象
一個Blob對象就是一個包含有只讀原始數(shù)據(jù)的類文件對象。Blob對象中的數(shù)據(jù)并不一定得是JavaScript中的原生形式。File接口基于Blob, 繼承了Blob的功能，并且擴展支持了用戶計算機上的本地文件。
創(chuàng)建Blob對象的方法有幾種，可以調(diào)用Blob構(gòu)造函數(shù)，還可以使用一個已有Blob對象上的slice()方法切出另一個Blob對象，還可以調(diào)用canvas對象上的toBlob方法。
以上為MDN上官方口吻的解釋。實際上，Blob是計算機界通用術語之一，全稱寫作：BLOB (binary large object)，表示二進制大對象。MySql/Oracle數(shù)據(jù)庫中，就有一種Blob類型，專門存放二進制數(shù)據(jù)。
在實際Web應用中，Blob更多是圖片二進制形式的上傳與下載，雖然其可以實現(xiàn)幾乎任意文件的二進制傳輸。
舉個例子，使用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圖片元素，會發(fā)現(xiàn)其URL地址既不是傳統(tǒng)HTTP，也不是Base64 URL，而是Blob形式~如下截圖示意：
這就是Blob在Web開發(fā)中非常重要的一個功能——創(chuàng)建Blob網(wǎng)址。上述代碼涉及XMLHttpRequest 2一些重要知識點，以及window.URL相關技術，都是可以深入挖掘?qū)W習的部分，但，不是本文重點，以后有機會會細致闡述。
但是，并不是所有的圖片都能以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: *
設置解決。其實，本質(zhì)是一樣的。
由于權限原因，我的個人站點無法配置Access-Control-Allow-Origin，我測試了下，新浪微博的圖片是無法二進制請求的，不過我的前東家，
xiaomishu.com的圖片都是可以Ajax請求并Blob顯示的，悄悄告訴大家，是我當初動的手腳，(*^__^*) 嘻嘻……
屬性
Blob對象有兩個屬性，參見下表：
屬性名
類型
描述
size
unsigned long long(表示可以很大的數(shù)值)
Blob對象中所包含數(shù)據(jù)的大小。字節(jié)為單位。 只讀。
type
DOMString
一個字符串，表明該Blob對象所包含數(shù)據(jù)的MIME類型。例如，上demo圖片MIME類似就是”image/jpeg“. 如果類型未知，則該值為空字符串。 只讀。
今天在微博上看到一個表單提交之前判斷文件大小并作阻止的tip，實際上，就是使用的Blob對象的size屬性。
構(gòu)造函數(shù)
與FormData對象類似，Blob也有一個構(gòu)造函數(shù)用法。語法如下：
Blob Blob( [可選] Array parts, [可選] BlobPropertyBag properties);
例如：
var myBlob= new Blob(arrayBuffer);
其中，兩個參數(shù)的含義是：
parts
一個數(shù)組，包含了將要添加到Blob對象中的數(shù)據(jù)。數(shù)組元素可以是任意多個的ArrayBuffer, ArrayBufferView(typed array), Blob, 或者DOMString對象。
properties
一個對象，設置Blob對象的一些屬性。目前僅支持一個type屬性，表示Blob的類型。
方法
Blob對象有個很重要的方法-slice()，作用是，可以實現(xiàn)文件的分割！
這個slice()有一段不堪回首的歷史，不過現(xiàn)在大家不要關心。目前的slice()方法已經(jīng)跟JS中數(shù)組啊，字符串的slice方法用法一致了。如下：
Blob slice( [可選] long long start, [可選] long long end, [可選] DOMString contentType};
參數(shù)釋義：
start
開始索引，可以為負數(shù)，語法類似于數(shù)組的slice方法。默認值為0.
end
結(jié)束索引，可以為負數(shù)，語法類似于數(shù)組的slice方法。默認值為最后一個索引。
contentType
新的Blob對象的MIME類型，這個值將會成為新的Blob對象的type屬性的值，默認為一個空字符串。
顯然，此方法返回的數(shù)據(jù)格式還是Blob對象，不過是指定范圍復制的新的Blob對象。注意，如果start參數(shù)的值比源Blob對象的size屬性值還大，則返回的Blob對象的size值為0，也就是不包含任何數(shù)據(jù)。
六、家臣之File對象
File顧名思意就是“文件”，通常而言，表示我們使用file控件(<input type="file">)選擇的
FileList對象，或者是使用拖拽操作搞出的
DataTransfer對象。
這里的File對象也是二進制對象，因此，從屬于Blob對象，Blob對象的一些屬性與方法，F(xiàn)ile對象同樣適合，且推薦使用Blob對象的屬性與方法。
File對象自身也有一些屬性與方法，但是，有些已經(jīng)過時——不推薦使用，因此，當前很多HTML5 Ajax文件上傳下載的教程中出現(xiàn)是屬性和方法都是過時的，不要盲目Copy，請大家明辨！
屬性
File.lastModifiedDate[只讀]
文件對象最后修改的日期
File.name[只讀]
文件對象的名稱
File.fileName[只讀] [過時不推薦使用]
文件對象的名稱（請使用File.name代替）
File.fileSize[只讀] [過時不推薦使用]
文件對象的大?。ㄕ埵褂肂lob.size代替）
Blob.size[只讀]
Blob對象包含數(shù)據(jù)的字節(jié)大小
Blob.type[只讀]
一個字符串，表明該Blob對象所包含數(shù)據(jù)的MIME類型
方法
File.getAsBinary()[過時不推薦使用]
二進制形式返回文件數(shù)據(jù)（請使用FileReader對象的FileReader.readAsBinaryString()方法代替）
File.getAsDataURL()[過時不推薦使用]
返回文件data:URL編碼字符串數(shù)據(jù)（請使用FileReader對象的FileReader.readAsDataURL()方法代替）
File.getAsText(string encoding)[過時不推薦使用]
以給定的字符串編碼返回文件數(shù)據(jù)解釋后的文本（請使用FileReader對象的FileReader.readAsText()方法代替）
Blob.size[只讀]
Blob對象包含數(shù)據(jù)的字節(jié)大小
Blob.type[只讀]
一個字符串，表明該Blob對象所包含數(shù)據(jù)的MIME類型。
上面有提到FileReader對象，這貨是相當?shù)挠胸洠坝腥嗽鴨栁?，如何將圖片轉(zhuǎn)換成Data base64 url格式，其中一個方法就是FileReader.readAsDataURL()方法（還有就是canvas元素的toDataURL()和toDataURLHD()方法），然與本文主旨無關，暫不贅述；如您有興趣，頁面底部有其相關知識點鏈接，可自行概覽。
七、家臣之ArrayBuffer對象
//zxx:ArrayBuffer對象牽扯知識點非常多，這里僅接觸肌膚，深入接觸下次會專門再說下。
很術語的解釋有：
ArrayBuffer表示二進制數(shù)據(jù)的原始緩沖區(qū)，該緩沖區(qū)用于存儲各種類型化數(shù)組的數(shù)據(jù)。
ArrayBuffer是二進制數(shù)據(jù)通用的固定長度容器。
所謂術語，就是小白看不懂的解釋語。我再用通俗語解釋下，希望大家可以有點感性的認識：
術語中，提到“二進制”，我們腦中應該會出現(xiàn)01010111之類；提到“緩沖”，會聯(lián)想到在線視頻提前加載一部分視頻的那個緩沖。但是，兩個合起來，“二進制數(shù)據(jù)緩沖區(qū)”，腦補就不連貫了，焦慮產(chǎn)生~~
現(xiàn)在，聽我的，上面概念全部扔掉。所謂ArrayBuffer就是個裝著2進制數(shù)據(jù)的對象?；蛘呦胂蟪蓭Я藗€名叫“緩沖”帽子的二進制數(shù)據(jù)。然后直接關聯(lián)：ArrayBuffer ＝ 2進制。
上面＝表示關聯(lián)，不是相等，諸位。
例如，我們設置Ajax請求的responseType為”arraybuffer“，我們?nèi)フ埱竽砿m圖片，返回的response就是ArrayBuffer，就是個二進制對象。什么緩沖不緩沖的，千萬別補腦這個。
如果還覺得概念抽象，可以看下面的具體認知：
大家可能玩過神器編輯器Sublime Text, 我們隨便找張圖片拖進去，會發(fā)現(xiàn)是類似下面這樣子的代碼：
Sublime Text以16進制的形式顯示圖片資源，ArrayBuffer的差別在于是二進制，因此，我們可以把ArrayBuffer的形體腦補成——上圖的數(shù)字全是的0101 1000 1101之類的。Get it否？
上面提到的Blob對象也是二進制，那Blob和ArrayBuffer有啥區(qū)別呢？
Blob可以append ArrayBuffer數(shù)據(jù)，也就是Blob是個更高一級的大分類，類似領導的感覺。ArrayBuffer則是具有某種惡魔果實的尖兵。
ArrayBuffer存在的意義就是作為數(shù)據(jù)源提前寫入在內(nèi)存中，就是提前釘死在某個區(qū)域，長度也固定，萬年不變。于是，當我們要處理這個ArrayBuffer中的二進制數(shù)據(jù)，例如，分別8位，16位，32位轉(zhuǎn)換一遍，這個數(shù)據(jù)都不會變化，3種轉(zhuǎn)換共享數(shù)據(jù)。
So，ArrayBuffer就是緩沖出來的打死不動的二進制對象。
注意，ArrayBuffer本身是不能讀寫的，需要借助類型化數(shù)組或DataView對象來解釋原始緩沖區(qū)（宰割原始二進制數(shù)據(jù)）。
類型化數(shù)組
類型化數(shù)組(Typed Arrays)是JavaScript中新出現(xiàn)的一個概念，專為訪問原始的二進制數(shù)據(jù)而生。
類型數(shù)組的類型有：
名稱
大小 (以字節(jié)為單位)
說明
Int8Array
1
8位有符號整數(shù)
Uint8Array
1
8位無符號整數(shù)
Int16Array
2
16位有符號整數(shù)
Uint16Array
2
16位無符號整數(shù)
Int32Array
4
32位有符號整數(shù)
Uint32Array
4
32位無符號整數(shù)
Float32Array
4
32位浮點數(shù)
Float64Array
8
64位浮點數(shù)
本質(zhì)上，類型化數(shù)組和ArrayBuffer是一樣的。不過一個可讀寫（脫掉buffer限制），一個當數(shù)據(jù)源的命。
舉一些代碼例子，看看本質(zhì)一致在何處：
// 創(chuàng)建一個8字節(jié)的ArrayBuffer var b = new ArrayBuffer(8); // 創(chuàng)建一個指向b的視圖v1，采用Int32類型，開始于默認的字節(jié)索引0，直到緩沖區(qū)的末尾 var v1 = new Int32Array(b); // 創(chuàng)建一個指向b的視圖v2，采用Uint8類型，開始于字節(jié)索引2，直到緩沖區(qū)的末尾 var v2 = new Uint8Array(b, 2); // 創(chuàng)建一個指向b的視圖v3，采用Int16類型，開始于字節(jié)索引2，長度為2 var v3 = new Int16Array(b, 2, 2);
上面代碼里變量的數(shù)據(jù)結(jié)構(gòu)如下表所示：
變量
索引
字節(jié)（不可索引）
b=
0
1
2
3
4
5
6
7
類型數(shù)組
v1=
0
1
v2=
0
1
2
3
4
5
v3=
0
1
由于類型化數(shù)組直接訪問固定內(nèi)存，因此，速度很贊，比傳統(tǒng)數(shù)組要快！因為普通Javascript數(shù)組使用的是Hash查找方式。同時，類型化數(shù)組天生處理二進制數(shù)據(jù)，這對于XMLHttpRequest 2、canvas、webGL等技術有著先天的優(yōu)勢。
DataView對象
DataView對象在可以在ArrayBuffer中的任何位置讀取和寫入不同類型的二進制數(shù)據(jù)。
用法語法如下：
var dataView = new DataView(DataView(buffer, byteOffset[可選], byteLength[可選]);
其中，buffer表示ArrayBuffer；byteOffset指緩沖區(qū)開始處的偏移量（以字節(jié)為單位）；byteLength指緩沖區(qū)部分的長度（以字節(jié)為單位）。
屬性
buffer
表示ArrayBuffer
byteOffset
指緩沖區(qū)開始處的偏移量
byteLength
指緩沖區(qū)部分的長度
方法有很多，實際上，是有規(guī)律的，篇幅原因，也不是重點，就單純露個臉：
getInt8, getUint8, getInt16, getUint16, getInt32, getUint32, getFloat32, getFloat64, setInt8, setUint8, setInt16, setUint16, setInt32, setUint32, setFloat32, setFloat64.
下面回到ArrayBuffer對象，ArrayBuffer對象自身也可以構(gòu)造，跟上面的FormData, Blob對象類似，例如：
var buf = new ArrayBuffer(32);
語法為：
ArrayBuffer ArrayBuffer(length[可以很大數(shù)值]);
我們在控制臺運行下new ArrayBuffer(32)，看看結(jié)果：
可以看到，其有一個byteLength屬性，表示ArrayBuffer的長度，也可以說是大??；還有一個slice方法，語法如下：
ArrayBuffer slice( begin end[可選]);
begin表示起始，end表示結(jié)束點。據(jù)說，Internet Explorer 10 以及iOS6-是沒有該方法的。
綜上，舉個ArrayBuffer的實例吧，發(fā)送使用XMLhttpRequest發(fā)送ArrayBuffer數(shù)據(jù)：
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);}
使用了類型化數(shù)組，發(fā)送的是類型化數(shù)組(uInt8Array)的buffer屬性，也就是ArrayBuffer對象。
over~
八、結(jié)束語
新技術層出不窮，我覺得吧，以后，行業(yè)的分支可能要更細了。比方說JS開發(fā)吧，可能就有JS UI交互開發(fā)工程師；JS Web開發(fā)工程師。因為，一個人想要完全hold住這么多的知識點，還真不是一般人能做到的。
剛開始寫的時候，還想最后舉個文件分割上傳的例子，只可惜內(nèi)容實在太多，加上去也會被湮沒，于是作罷，決定有機會，專門講下這個。還有FileReader可以獨立講一下，還有類型化數(shù)組也可以專門講一下等。
學路漫漫，任重道遠。文中若有致命的結(jié)論錯誤或疏忽的文字書寫錯誤，都歡迎指正，不甚感謝。歡迎討論，歡迎交流！
參考鏈接
https://developer.mozilla.org/zh-CN/docs/DOM/DOMString
https://developer.mozilla.org/en-US/docs/Web/API/document
https://developer.mozilla.org/zh-CN/docs/DOM/XMLHttpRequest/FormData
https://developer.mozilla.org/zh-CN/docs/DOM/Blob
https://developer.mozilla.org/en-US/docs/Web/API/File
https://developer.mozilla.org/en-US/docs/Web/API/FileReader
http://technet.microsoft.com/zh-cn/ie/br212474
https://developer.mozilla.org/en-US/docs/Web/API/ArrayBuffer
http://blog.csdn.net/hfahe/article/details/7421203
原創(chuàng)文章，轉(zhuǎn)載請注明來自
張鑫旭-鑫空間-鑫生活[
http://www.zhangxinxu.com]
本文地址：
http://www.zhangxinxu.com/wordpress/?p=3725（本篇完）
如果您覺得本文的內(nèi)容對您的學習有所幫助：
相關文章
XMLHttpRequest實現(xiàn)HTTP協(xié)議下文件上傳斷點續(xù)傳 (1.000)
分享到：
標簽：
ArrayBuffer,
Blob,
Document,
DOMString,
File,
FormData,
XMLHttpRequest這篇文章發(fā)布于 2013年10月14日，星期一，00:37，歸類于
js相關。 閱讀 8790 次, 今日 35 次
