AJAX 的進階使用（Blob、ArrayBuffer、FormData、Document、JSON、Text）

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

前言

若是你對先後端交互流程不熟悉能夠看我以前寫的簡單的先後端交互流程（AJAX）。
若是你是想了解上傳文件之類的，那麼你能夠看前端文件上傳-javascript-ajax。

介紹一下上面提到的 AJAX 的 API（XHR、Fetch）

1. 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(若是請求未完成或失敗)。

2. Fetch API 目前還不是 W3C 規範，是由 whatag 負責研發。核心在於對 HTTP 接口的抽象，包括 Request、Response、Headers、Body。得益於 JavaScript 實現的這些抽象好的 HTTP 模塊，其餘接口可以很方便的使用這些功能。Fetch 還利用到了請求的異步特性——它是基於 Promise 的。默認狀況下，fetch 不會從服務端發送或接收任何 cookies。目前不支持 abort 也是一個槽點。
3. ActiveXObject 按理說不用理會這個東西，IE6 你還要啥自行車。功能少得可憐。

介紹一下進階類型（Blob、ArrayBuffer、FormData）

1. Blob 表示一個不可變、原始數據的文件對象。
2. File 基於 Blob，繼承了 blob 的功能並將其擴展使其支持用戶系統上的文件。從 Blob 中讀取內容的惟一方法是使用 FileReader，同理 File 也是使用 FileReader 讀取（預覽圖片其實能夠URL.createObjectURL(fileInput.files[0]) 生成 Blob 地址直接用，有效下降轉爲 base64 以後解析異常的風險）。

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

   1. FileReader.abort()
      停止讀取操做。在返回時，readyState 屬性爲 DONE。
   2. FileReader.readAsArrayBuffer()
      開始讀取指定的 Blob 中的內容, 一旦完成, result 屬性中保存的將是被讀取文件的 ArrayBuffer 數據對象.
   3. FileReader.readAsBinaryString()
      開始讀取指定的 Blob 中的內容。一旦完成，result 屬性中將包含所讀取文件的原始二進制數據。
   4. FileReader.readAsDataURL()
      開始讀取指定的 Blob 中的內容。一旦完成，result 屬性中將包含一個 data: URL 格式的字符串以表示所讀取文件的內容。
   5. FileReader.readAsText()
      開始讀取指定的 Blob 中的內容。一旦完成，result 屬性中將包含一個字符串以表示所讀取的文件內容。

   File 對象能夠是來自用戶在一個 <input> 元素上選擇文件後返回的 FileList 對象,也能夠來自拖放操做生成的 DataTransfer 對象,還能夠是來自在一個 HTMLCanvasElement 上執行 mozGetAsFile() 方法後返回結果。

4. Base64/readAsDataURL Base64是一組類似的二進制到文本(binary-to-text)的編碼規則，使得二進制數據在解釋成radix-64的表現形式後可以用ASCII字符串的格式表示出來。Base64 這個詞出自一種MIME數據傳輸編碼。
5. ArrayBuffer 對象用來表示通用的、固定長度的原始二進制數據緩衝區。ArrayBuffer 不能直接操做，而是要經過類型數組對象或 DataView 對象來操做，它們會將緩衝區中的數據表示爲特定的格式，並經過這些格式來讀寫緩衝區的內容。

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

   類型	大小（字節單位）	描述	Web IDL type	C語言中的等效類型
   Int8Array	1	8位二進制帶符號整數 -2^7~(2^7) - 1	byte	int8_t
   Uint8Array	1	8位無符號整數 0~(2^8) - 1	octet	uint8_t
   Int16Array	2	16位二進制帶符號整數 -2^15~(2^15)-1	short	int16_t
   Uint16Array	2	16位無符號整數 0~(2^16) - 1 unsigned	short	uint16_t
   Int32Array	4	32位二進制帶符號整數 -2^31~(2^31)-1	long	int32_t
   Uint32Array	4	32位無符號整數 0~(2^32) - 1 unsigned	int	uint32_t
   Float32Array	4	32位IEEE浮點數 unrestricted	float	float
   Float64Array	8	64位IEEE浮點數 unrestricted	double	double

7. FormData 用以將數據編譯成鍵值對，以便用 XMLHttpRequest 來發送數據。其主要用於發送表單數據，但亦可用於發送帶鍵數據(keyed data)，而獨立於表單使用。若是表單 enctype 屬性設爲 multipart/form-data ，則會使用表單的 submit() 方法來發送數據，從而，發送數據具備一樣形式。

騷操做

接下來就是咱們的騷操做

1. 前端播放amr ---測試，amr 不是原生支持的格式，那麼咱們拉到他的 Blob 而後解析，轉碼爲其餘格式。其實能拿到內容就能作好多事情了。好比解析歌詞文件啊。
2. 前端上傳文件進度 ---測試，經過 upload.progress 來監聽進度。
3. 前端上傳圖片在線預覽圖片 ---測試，經過讀取 File 內容，展現在頁面上。
4. 前端上傳文件 主要使用 FormData ，也能夠用 Blob。
5. 先這樣吧，想起來再補充。

參考資料

1. Sending and Receiving Binary Data --MDN
2. XMLHttpRequest --MDN
3. 使用 Fetch --MDN
4. Base64的編碼與解碼 --MDN
5. Fetch 基本概念 --MDN
6. TypedArray
7. XMLHttpRequest Level 2 使用指南 --ruanyifeng
8. XMLHttpRequest Level 2 標準、CORS
9. 傳統 Ajax 已死，Fetch 永生