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 对象可以是来自用户在一个 元素上选择文件后返回的 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. 上传前预览文件（音视频、图片、文本）：https://www.lilnong.top/static/html/sf-a-1190000022597533-file-preview-input-drop.html

5.  上传图片，调用api做人脸分析&融合

   1. 百度ai : https://www.lilnong.top/static/html/img-resize-merge-upload-config.html
   2. 腾讯 ai https://www.lilnong.top/static/html/71fcaee8aa168ee2107b2eb9125ec293.html
6. 前端上传文件 主要使用 FormData ，也可以用 Blob。
7. 先这样吧，想起来再补充。

微信公众号：前端linong

欢迎大家关注我的公众号。有疑问也可以加我的微信前端交流群。

参考资料

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