Ajax即AsynchronousJavascriptAndXML（异步JavaScript和XML），指的是一种用于创建交互式网络应用程序的网络开发技术。无需重新加载整个网页即可更新部分网页的技术。一般我们使用XMLHTTPRequest、FetchAPI、ActiveXObject（低版本IE）来实现AJAX功能。前言如果你对前后端交互流程不熟悉，可以看一下我之前写的简单的前后端交互流程（AJAX）。如果想了解上传文件之类的，可以看前端文件上传-javascript-ajax。介绍一下上面提到的我们现在用的最多的AJAXAPI（XHR，Fetch）XMLHTTPRequest，基本可以满足你的所有需求。但是我们日常生活中只用到一部分XML（早期），JSON（用得最多），文本（很少，否则也是JSON字符串）。同时支持progress事件监听进度，该事件实现了ProgressEvent接口。2008年2月提出了XMLHttpRequestLevel2草案。可以通过设置XMLHttpRequest对象的responseType属性来更改从服务器返回的响应的数据类型。可用的属性值为空字符串（默认）、"arraybuffer"、"blob"、"document"、"json"和"text".response属性的值将根据responseType属性包含实体主体，这如果请求未完成或失败，则可能是ArrayBuffer、Blob、Document、JSON、字符串或NULL。FetchAPI目前不是W3C规范，而是由whatag开发的。核心在于HTTP接口的抽象，包括Request、Response、Headers、Body。由于这些由JavaScript实现的抽象HTTP模块，其他接口可以轻松地使用这些功能。Fetch还利用了请求的异步特性——它是基于Promise的。默认情况下，fetch不会从服务器发送或接收任何cookie。不支持abort也是槽点。ActiveXObject逻辑上不用理会这个东西，你在IE6中需要什么自行车。特点是可怜。介绍高级类型（Blob、ArrayBuffer、FormData）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中的内容。完成后，结果属性将包含读取文件的原始二进制数据。FileReader.readAsDataURL()开始读取指定blob中的内容。完成后，result属性将包含一个data:URL格式的字符串，表示读取的文件的内容。FileReader.readAsText()开始读取指定blob中的内容。完成后，result属性将包含一个表示所读取文件内容的字符串。File对象可以是用户在元素上选择文件后返回的FileList对象，也可以是拖拽操作生成的DataTransfer对象，也可以是HTMLCanvasElement执行mozGetAsFile()方法后返回的结果。Base64/readAsDataURLBase64是一套类似二进制转文本的编码规则，使得二进制数据在被解释为radix-64表示后可以用ASCII字符串格式来表示。术语Base64来自MIME数据传输编码。ArrayBuffer对象用于表示原始二进制数据的通用固定长度缓冲区。ArrayBuffer不能直接操作，必须通过类型数组对象或DataView对象进行操作，将缓冲区中的数据表示为特定格式，并通过这些格式读写缓冲区的内容。TypedArray描述底层二进制数据缓冲区的类数组视图的数组对象。实际上，不存在名为TypedArray的全局对象，也不存在名为TypedArray的构造函数。相反，有许多不同的全局对象，其用于特定元素类型的类型化数组的构造函数如下所列。在接下来的几页中，您将找到所有类型共有的一些属性和方法。类型大小（字节单位）说明WebIDLtypeC等效类型Int8Array18位二进制有符号整数-2^7~(2^7)-1byteint8_tUint8Array18位无符号整数0~(2^8)-1octetuint8_tInt16Array216位二进制有符号整数-2^15~(2^15)-1shortint16_tUint16Array216位无符号整数0~(2^16)-1unsignedshortuint16_tInt32Array432位二进制有符号整数-2^31~(2^31)-1longint32_tUint32Array432位无符号整数0~(2^32)-1unsignedintuint32_tFloat32Array432位IEEE浮点数unrestrictedfloatfloatFloat64Array864位IEEE浮点数unrestricteddoubledoubleFormData用于将数据编译成键值对，用于用XMLHttpRequest发送数据。它主要用于发送表单数据，但也可用于发送键控数据（keyeddata），独立于表单使用。如果formenctype属性设置为multipart/form-data，则会使用form的submit()方法发送数据，因此发送的数据具有相同的form。骚操作下一步就是在我们骚操作的前端播放amr---test，amr不是原生支持的格式，所以我们拉取它的blob分析，转码成其他格式。事实上，如果你能得到内容，你可以做很多事情。比如解析歌词文件。前端上传文件进度---测试，通过upload.progress监控进度。前端上传图片在线预览图片---测试，读取文件内容显示在页面上。上传前预览文件（音频、视频、图片、文字）：https://www.lilnong.top/static/html/sf-a-1190000022597533-file-preview-input-drop.html上传图片，人脸调用api分析&融合百度ai：https://www.lilnong.top/static/html/img-resize-merge-upload-config.html腾讯aihttps://www.lilnong.top/static/html/71fcaee8aa168ee2107b2eb9125ec293.html前端上传文件主要使用FormData，也有Blob。先这样吧，想到了再补充。微信公众号：前端立农欢迎大家关注我的公众号。有问题也可以加我的微信前端交流群。参考资料发送和接收二进制数据--MDNXMLHttpRequest--MDN使用Fetch--MDNBase64编码解码--MDNFetch基本概念--MDNTypedArrayXMLHttpRequestLevel2使用指南--ruanyifengXMLHttpRequestLevel2标准，CORS传统Ajax已死，Fetch不朽
