概念

一、Ajax是什么？

英文全称为 Asynchronous JavaScript + XML ，翻译过来就是异步JavaScript和XML（被设计用来传输和存储数据）。

Ajax是一种技术方案，但并不是一种新技术。

它是用来描述一种使用现有技术集合的“新”方法的，这里的“新”方法主要涉及到: HTML 或 XHTML、CSS、 JavaScript、DOM、XML、XSLT，以及最重要的 XMLHttpRequest。

当使用结合了这些技术的 AJAX 模型以后， 网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面。这使得程序能够更快地回应用户的操作。

Ajax 最重要的特性就是可以局部刷新页面。

二、Fetch是什么？

Fetch 提供了一个获取资源的接口（包括跨域请求）。

Fetch 是一个现代的概念，等同于 XMLHttpRequest，脱离了 XHR，是 ES 规范中新的实现方式。它提供了许多与 XMLHttpRequest 相同的功能，但被设计成更具可扩展性和高效性。

Fetch 的核心在于对 HTTP 接口的抽象，包括 Request、Response、Headers 和 Body，以及用于初始化异步请求的 global fetch。得益于 JavaScript 实现的这些抽象好的 HTTP 模块，其他接口能够很方便的使用这些功能。

除此之外，Fetch 还利用到了请求的异步特性——它是基于 Promise 的。

fetch() 方法必须接受一个参数——资源的路径。无论请求成功与否，它都返回一个 Promise 对象，resolve 对应请求的 Response。

三、Axios是什么？

Axios 是一个基于 Promise 网络请求库，作用于 Node.js 和浏览器中。 它是 isomorphic 的(即同一套代码可以运行在浏览器和 Node.js中)。在服务端它使用原生 Node.js http 模块，而在客户端则使用 XMLHttpRequest。

这里我们只关注客户端的 Axios，它是基于 XMLHttpRequest 进行二次封装形成的工具库。

客户端 Axios 的主要特性有：

• 从浏览器创建 XMLHttpRequests
• 支持 Promise API
• 拦截请求和响应
• 转换请求和响应数据
• 取消请求
• 自动转换JSON数据
• 客户端支持防御XSRF

四、什么是 XMLHttpRequest 对象？

XMLHttpRequest 对象用于在后台与服务器交换数据。

XMLHttpRequest 对象是开发者的梦想，因为它能够：

• 在不重新加载页面的情况下更新网页
• 在页面已加载后从服务器请求数据
• 在页面已加载后从服务器接收数据
• 在后台向服务器发送数据

所有现代的浏览器都支持 XMLHttpRequest 对象。

ajax最核心的依赖是浏览器提供的XMLHttpRequest对象

四者之间的关系

对于上图进行解释：

• Ajax 是一种代表异步 JavaScript + XML 的模型（技术合集），所以 Fetch 也是 Ajax 的一个子集

• 在之前，我们常说的 Ajax 默认是指以 XHR 为核心的技术合集，而在有了 Fetch 之后，Ajax 不再单单指 XHR 了，我们将以XHR 为核心的 Ajax 技术称作传统 Ajax。

• Axios 属于传统 Ajax（XHR）的子集，因为它是基于 XHR 进行的二次封装。