摘要：讓?xiě)?yīng)用程序擁有異步讀取存儲(chǔ)在用戶計(jì)算機(jī)上文件或原始數(shù)據(jù)緩沖區(qū)的能力，使用或?qū)ο笾付ㄒx取的文件或數(shù)據(jù)。對(duì)象用來(lái)表示通用的固定長(zhǎng)度的原始二進(jìn)制數(shù)據(jù)緩沖區(qū)。事實(shí)上，沒(méi)有名為的全局對(duì)象，也沒(méi)有一個(gè)名為的構(gòu)造函數(shù)。

Ajax 即 Asynchronous Javascript And XML （異步 JavaScript 和 XML），是指一種創(chuàng)建交互式網(wǎng)頁(yè)應(yīng)用的網(wǎng)頁(yè)開(kāi)發(fā)技術(shù)。在無(wú)需重新加載整個(gè)網(wǎng)頁(yè)的情況下，能夠更新部分網(wǎng)頁(yè)的技術(shù)。一般我們使用 XMLHTTPRequest、Fetch API、ActiveXObject（低版本 IE） ，來(lái)現(xiàn)實(shí) AJAX 功能。

如果你對(duì)前后端交互流程不熟悉可以看我之前寫(xiě)的簡(jiǎn)單的前后端交互流程（AJAX）。
如果你是想了解上傳文件之類的，那么你可以看前端文件上傳-javascript-ajax。

XMLHTTPRequest 我們現(xiàn)在用的最多的，基本能滿足你的所有要求。但是我們?nèi)粘Ｖ挥昧艘徊糠?XML（早期），JSON（用的最多），text（比較少，要不然也是JSON串）。同時(shí)支持 progress 事件監(jiān)視進(jìn)度，事件實(shí)現(xiàn) ProgressEvent 接口。2008年2月提出了XMLHttpRequest Level 2 草案。

可以通過(guò)設(shè)置一個(gè) XMLHttpRequest 對(duì)象的 responseType 屬性來(lái)改變一個(gè)從服務(wù)器上返回的響應(yīng)的數(shù)據(jù)類型.可用的屬性值為空字符串 (默認(rèn)), "arraybuffer", "blob", "document", "json" 和 "text". response 屬性的值會(huì)根據(jù) responseType 屬性包含實(shí)體主體（entity body）, 它可能會(huì)是一個(gè) ArrayBuffer, Blob, Document, JSON, string, 或者為NULL(如果請(qǐng)求未完成或失敗)。

Fetch API 目前還不是 W3C 規(guī)范，是由 whatag 負(fù)責(zé)研發(fā)。核心在于對(duì) HTTP 接口的抽象，包括 Request、Response、Headers、Body。得益于 JavaScript 實(shí)現(xiàn)的這些抽象好的 HTTP 模塊，其他接口能夠很方便的使用這些功能。Fetch 還利用到了請(qǐng)求的異步特性——它是基于 Promise 的。默認(rèn)情況下，fetch 不會(huì)從服務(wù)端發(fā)送或接收任何 cookies。目前不支持 abort 也是一個(gè)槽點(diǎn)。

ActiveXObject 按理說(shuō)不用理會(huì)這個(gè)東西，IE6 你還要啥自行車(chē)。功能少得可憐。

Blob 表示一個(gè)不可變、原始數(shù)據(jù)的文件對(duì)象。

File 基于 Blob，繼承了 blob 的功能并將其擴(kuò)展使其支持用戶系統(tǒng)上的文件。從 Blob 中讀取內(nèi)容的唯一方法是使用 FileReader，同理 File 也是使用 FileReader 讀取（預(yù)覽圖片其實(shí)可以URL.createObjectURL(fileInput.files[0]) 生成 Blob 地址直接用，有效降低轉(zhuǎn)為 base64 之后解析異常的風(fēng)險(xiǎn)）。

FileReader 讓 Web應(yīng)用程序擁有異步讀取存儲(chǔ)在用戶計(jì)算機(jī)上文件（或原始數(shù)據(jù)緩沖區(qū)）的能力，使用 File 或 Blob 對(duì)象指定要讀取的文件或數(shù)據(jù)。

FileReader.abort()
中止讀取操作。在返回時(shí)，readyState 屬性為 DONE。

FileReader.readAsArrayBuffer()
開(kāi)始讀取指定的 Blob 中的內(nèi)容, 一旦完成, result 屬性中保存的將是被讀取文件的 ArrayBuffer 數(shù)據(jù)對(duì)象.

FileReader.readAsBinaryString()
開(kāi)始讀取指定的 Blob 中的內(nèi)容。一旦完成，result 屬性中將包含所讀取文件的原始二進(jìn)制數(shù)據(jù)。

FileReader.readAsDataURL()
開(kāi)始讀取指定的 Blob 中的內(nèi)容。一旦完成，result 屬性中將包含一個(gè) data: URL 格式的字符串以表示所讀取文件的內(nèi)容。

FileReader.readAsText()
開(kāi)始讀取指定的 Blob 中的內(nèi)容。一旦完成，result 屬性中將包含一個(gè)字符串以表示所讀取的文件內(nèi)容。

File 對(duì)象可以是來(lái)自用戶在一個(gè)  元素上選擇文件后返回的 FileList 對(duì)象,也可以來(lái)自拖放操作生成的 DataTransfer 對(duì)象,還可以是來(lái)自在一個(gè) HTMLCanvasElement 上執(zhí)行 mozGetAsFile() 方法后返回結(jié)果。

Base64/readAsDataURL Base64是一組相似的二進(jìn)制到文本(binary-to-text)的編碼規(guī)則，使得二進(jìn)制數(shù)據(jù)在解釋成radix-64的表現(xiàn)形式后能夠用ASCII字符串的格式表示出來(lái)。Base64 這個(gè)詞出自一種MIME數(shù)據(jù)傳輸編碼。

ArrayBuffer 對(duì)象用來(lái)表示通用的、固定長(zhǎng)度的原始二進(jìn)制數(shù)據(jù)緩沖區(qū)。ArrayBuffer 不能直接操作，而是要通過(guò)類型數(shù)組對(duì)象或 DataView 對(duì)象來(lái)操作，它們會(huì)將緩沖區(qū)中的數(shù)據(jù)表示為特定的格式，并通過(guò)這些格式來(lái)讀寫(xiě)緩沖區(qū)的內(nèi)容。

TypedArray 類型數(shù)組對(duì)象，描述一個(gè)底層的二進(jìn)制數(shù)據(jù)緩存區(qū)的一個(gè)類似數(shù)組(array-like)視圖。事實(shí)上，沒(méi)有名為 TypedArray的全局對(duì)象，也沒(méi)有一個(gè)名為的 TypedArray構(gòu)造函數(shù)。相反，有許多不同的全局對(duì)象，下面會(huì)列出這些針對(duì)特定元素類型的類型化數(shù)組的構(gòu)造函數(shù)。在下面的頁(yè)面中，你會(huì)找到一些不管什么類型都公用的屬性和方法。

FormData 用以將數(shù)據(jù)編譯成鍵值對(duì)，以便用 XMLHttpRequest 來(lái)發(fā)送數(shù)據(jù)。其主要用于發(fā)送表單數(shù)據(jù)，但亦可用于發(fā)送帶鍵數(shù)據(jù)(keyed data)，而獨(dú)立于表單使用。如果表單 enctype 屬性設(shè)為 multipart/form-data ，則會(huì)使用表單的 submit() 方法來(lái)發(fā)送數(shù)據(jù)，從而，發(fā)送數(shù)據(jù)具有同樣形式。

接下來(lái)就是我們的騷操作

前端播放amr ---測(cè)試，amr 不是原生支持的格式，那么我們拉到他的 Blob 然后解析，轉(zhuǎn)碼為其他格式。其實(shí)能拿到內(nèi)容就能做好多事情了。比如解析歌詞文件啊。

前端上傳文件進(jìn)度 ---測(cè)試，通過(guò) upload.progress 來(lái)監(jiān)聽(tīng)進(jìn)度。

前端上傳圖片在線預(yù)覽圖片 ---測(cè)試，通過(guò)讀取 File 內(nèi)容，展示在頁(yè)面上。

前端上傳文件 主要使用 FormData ，也可以用 Blob。

先這樣吧，想起來(lái)再補(bǔ)充。

Sending and Receiving Binary Data --MDN

XMLHttpRequest --MDN

使用 Fetch --MDN

Base64的編碼與解碼 --MDN

Fetch 基本概念 --MDN

TypedArray

XMLHttpRequest Level 2 使用指南 --ruanyifeng

XMLHttpRequest Level 2 標(biāo)準(zhǔn)、CORS

傳統(tǒng) Ajax 已死，F(xiàn)etch 永生