Ajax 即 Asynchronous Javascript And XML （异步 JavaScript 和 XML），是指一种建立交互式网页运用的网页开辟手艺。在无需从新加载全部网页的情况下，能够更新部份网页的手艺。平常我们运用 XMLHTTPRequest、Fetch API、ActiveXObject（低版本 IE） ，来实际 AJAX 功用。
媒介
假如你对前后端交互流程不熟悉能够看我之前写的简朴的前后端交互流程（AJAX）。
假如你是想相识上传文件之类的，那末你能够看前端文件上传-javascript-ajax。
引见一下上面提到的 AJAX 的 API（XHR、Fetch）
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、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 中的内容。一旦完成，result 属性中将包含所读取文件的原始二进制数据。 -
FileReader.readAsDataURL()
最先读取指定的 Blob 中的内容。一旦完成，result 属性中将包含一个data: URL花样的字符串以示意所读取文件的内容。 -
FileReader.readAsText()
最先读取指定的 Blob 中的内容。一旦完成，result 属性中将包含一个字符串以示意所读取的文件内容。
File 对象能够是来自用户在一个 <input> 元素上挑选文件后返回的 FileList 对象,也能够来自拖放操纵天生的 DataTransfer 对象,还能够是来自由一个 HTMLCanvasElement 上实行 mozGetAsFile() 要领后返回效果。
-
- Base64/readAsDataURL Base64是一组相似的二进制到文本(binary-to-text)的编码划定规矩，使得二进制数据在诠释成radix-64的表现情势后能够用ASCII字符串的花样示意出来。Base64 这个词出自一种MIME数据传输编码。
- ArrayBuffer 对象用来示意通用的、牢固长度的原始二进制数据缓冲区。ArrayBuffer 不能直接操纵，而是要经由过程范例数组对象或 DataView 对象来操纵，它们会将缓冲区中的数据示意为特定的花样，并经由过程这些花样来读写缓冲区的内容。
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 - FormData 用以将数据编译成键值对，以便用 XMLHttpRequest 来发送数据。其重要用于发送表单数据，但亦可用于发送带键数据(keyed data)，而独立于表单运用。假如表单 enctype 属性设为 multipart/form-data ，则会运用表单的 submit() 要领来发送数据，从而，发送数据具有一样情势。
骚操纵
接下来就是我们的骚操纵
- 前端播放amr —测试，amr 不是原生支撑的花样，那末我们拉到他的 Blob 然后剖析，转码为其他花样。实在能拿到内容就可以做好多事变了。比方剖析歌词文件啊。
- 前端上传文件进度 —测试，经由过程 upload.progress 来监听进度。
- 前端上传图片在线预览图片 —测试，经由过程读取 File 内容，展现在页面上。
- 前端上传文件 重要运用 FormData ，也能够用 Blob。
- 先如许吧，想起来再补充。
