1. Ajax

文档：developer.mozilla.org/zh-CN/docs/…

AJAX 是一种用于创建快速动态网页的技术。
通过 XmlHttpRequest 对象来向服务器发异步请求，从服务器获得数据

var xmlhttp;

function loadXMLDoc(url) {
    xmlhttp = null;
    if (window.XMLHttpRequest) { // code for all new browsers
        xmlhttp = new XMLHttpRequest();
    } else if (window.ActiveXObject) { // code for IE5 and IE6
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    if (xmlhttp != null) {
        xmlhttp.onreadystatechange = state_Change;
        xmlhttp.open("GET", url, true);
        xmlhttp.send(null);
    } else {
        alert("Your browser does not support XMLHTTP.");
    }
}

function stateChange() {
    if (xmlhttp.readyState == 4) { // 4 = "loaded"
        if (xmlhttp.status == 200) { // 200 = OK
            // ...our code here...
        } else {
            alert("Problem retrieving XML data");
        }
    }
}

优缺点：

基于标准被广泛支持
XMLHttpRequest 是一个设计粗糙的 API，不符合关注分离（Separation of Concerns）的原则，配置和调用方式非常混乱，而且基于事件的异步模型写起来也没有现代的 Promise，generator/yield，async/await 友好。

2. jQuery Ajax

文档：api.jquery.com/jQuery.Ajax…

$.ajax({
   type: 'POST',
   url: url,
   data: data,
   dataType: dataType,
   success: function () {},
   error: function () {}
});

优缺点：

本身是针对 MVC 的编程，不符合现在前端 MVVM 的浪潮
基于原生的 XHR 开发，XHR 本身的架构不清晰，已经有了 fetch 的替代方案
JQuery 整个项目太大，单纯使用 ajax 却要引入整个 JQuery 非常的不合理（采取个性化打包的方案又不能享受 CDN 服务）

3. Axios

文档：github.com/axios/axios

axios({
    method: 'post',
    url: '/user/12345',
    data: {
        firstName: 'Fred',
        lastName: 'Flintstone'
    }
})
.then(function (response) {
    console.log(response);
})
.catch(function (error) {
    console.log(error);
});

优缺点：

从 node.js 创建 http 请求
支持 Promise API
客户端支持防止CSRF
提供了一些并发请求的接口（重要，方便了很多的操作）

4. Fetch

文档：developer.mozilla.org/zh-CN/docs/…

try {
  let response = await fetch(url);
  let data = response.json();
  console.log(data);
} catch(e) {
  console.log("Oops, error", e);
}

优缺点：

符合关注分离，没有将输入、输出和用事件来跟踪的状态混杂在一个对象里
更好更方便的写法
更加底层，提供的 API 丰富（request, response）
脱离了 XHR，是 ES 规范里新的实现方式
- 1）fetch 只对网络请求报错，对400，500都当做成功的请求，需要封装去处理
- 2）fetch 默认不会带 cookie，需要添加配置项
- 3）fetch 不支持 abort，不支持超时控制，使用 setTimeout 及 Promise.reject 的实现的超时控制并不能阻止请求过程继续在后台运行，造成了量的浪费
- 4）fetch 没有办法原生监测请求的进度，而 XHR 可以

5. Ajax，jQuery ajax，Axios 和 Fetch 的区别

Ajax：

ajax 最早出现的发送后端请求技术，隶属于原始 js 中，核心使用 XMLHttpRequest 对象，多个请求之间如果有先后关系的话，就会出现回调地狱。

Jquery Ajax：

是 jQuery 框架中的发送后端请求技术，由于 jQuery 是基于原始的基础上做的封装，所以，jquery Ajax 自然也是对原始 ajax 的封装

Fetch：

Fetch 号称是 AJAX 的替代品，是在 ES6 出现的，使用了 ES6 中的 promise 对象。Fetch 是基于 promise 设计的。Fetch 的代码结构比起 ajax 简单多了，参数有点像 jQuery ajax。但是，一定记住fetch 不是 ajax 的进一步封装，而是原生 js。Fetch 函数就是原生 js，没有使用 XMLHttpRequest 对象。

axios：

axios 不是原生 JS 的，需要进行安装，它不但可以在客户端使用，而且可以在 nodejs 端使用。Axios 也可以在请求和响应阶段进行拦截。同样也是基于 promise 对象的。

Ajax、Jquery ajax、Axios、Fetch 之间的区别以及优缺点

1. Ajax

2. jQuery Ajax

3. Axios

4. Fetch

5. Ajax，jQuery ajax，Axios 和 Fetch 的区别

Ajax：

Jquery Ajax：

Fetch：

axios：