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 永生