摘要：讓應用程序擁有異步讀取存儲在用戶計算機上文件或原始數據緩沖區的能力，使用或對象指定要讀取的文件或數據。對象用來表示通用的固定長度的原始二進制數據緩沖區。事實上，沒有名為的全局對象，也沒有一個名為的構造函數。

Ajax 即 Asynchronous Javascript And XML （異步 JavaScript 和 XML），是指一種創建交互式網頁應用的網頁開發技術。在無需重新加載整個網頁的情況下，能夠更新部分網頁的技術。一般我們使用 XMLHTTPRequest、Fetch API、ActiveXObject（低版本 IE） ，來現實 AJAX 功能。

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

XMLHTTPRequest 我們現在用的最多的，基本能滿足你的所有要求。但是我們日常只用了一部分 XML（早期），JSON（用的最多），text（比較少，要不然也是JSON串）。同時支持 progress 事件監視進度，事件實現 ProgressEvent 接口。2008年2月提出了XMLHttpRequest Level 2 草案。

可以通過設置一個 XMLHttpRequest 對象的 responseType 屬性來改變一個從服務器上返回的響應的數據類型.可用的屬性值為空字符串 (默認), "arraybuffer", "blob", "document", "json" 和 "text". response 屬性的值會根據 responseType 屬性包含實體主體（entity body）, 它可能會是一個 ArrayBuffer, Blob, Document, JSON, string, 或者為NULL(如果請求未完成或失敗)。

Fetch API 目前還不是 W3C 規范，是由 whatag 負責研發。核心在于對 HTTP 接口的抽象，包括 Request、Response、Headers、Body。得益于 JavaScript 實現的這些抽象好的 HTTP 模塊，其他接口能夠很方便的使用這些功能。Fetch 還利用到了請求的異步特性——它是基于 Promise 的。默認情況下，fetch 不會從服務端發送或接收任何 cookies。目前不支持 abort 也是一個槽點。

ActiveXObject 按理說不用理會這個東西，IE6 你還要啥自行車。功能少得可憐。

Blob 表示一個不可變、原始數據的文件對象。

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

FileReader 讓 Web應用程序擁有異步讀取存儲在用戶計算機上文件（或原始數據緩沖區）的能力，使用 File 或 Blob 對象指定要讀取的文件或數據。

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

FileReader.readAsArrayBuffer()
開始讀取指定的 Blob 中的內容, 一旦完成, result 屬性中保存的將是被讀取文件的 ArrayBuffer 數據對象.

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

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

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

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

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

ArrayBuffer 對象用來表示通用的、固定長度的原始二進制數據緩沖區。ArrayBuffer 不能直接操作，而是要通過類型數組對象或 DataView 對象來操作，它們會將緩沖區中的數據表示為特定的格式，并通過這些格式來讀寫緩沖區的內容。

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

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

接下來就是我們的騷操作

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

前端上傳文件進度 ---測試，通過 upload.progress 來監聽進度。

前端上傳圖片在線預覽圖片 ---測試，通過讀取 File 內容，展示在頁面上。

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

先這樣吧，想起來再補充。

Sending and Receiving Binary Data --MDN

XMLHttpRequest --MDN

使用 Fetch --MDN

Base64的編碼與解碼 --MDN

Fetch 基本概念 --MDN

TypedArray

XMLHttpRequest Level 2 使用指南 --ruanyifeng

XMLHttpRequest Level 2 標準、CORS

傳統 Ajax 已死，Fetch 永生