1.Ajax

_Ajax_即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创立交互式网页利用的网页开发技术。

用法：

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

长处：

• 进步了性能和速度 ： 缩小了客户端和服务器之间的流量传输，同时缩小了单方响应的工夫，响应更快，因而进步了性能和速度
• 交互性好：应用 ajax，能够开发更快，更具交互性的 Web 应用程序
• 异步调用 ：Ajax 对 Web 服务器 进行异步调用 。这意味着 客户端浏览器在开始渲染之前防止期待所有数据达到。
• 节俭带宽 ：基于 Ajax 的应用程序 应用较少的服务器带宽，因为无需从新加载残缺的页面
• 底层应用 XMLHttpRequest

• 领有开源 JavaScript 库：JQuery，Prototype，Scriptaculous 等。
• AJAX 通过 HTTP 协定进行通信。

毛病：

• 减少了设计和开发的工夫
• 比构建经典 Web 应用程序更简单
• Ajax 应用程序中的安全性较低（容易收到 CSRF 和 XSS 攻打)，因为所有文件都是在客户端下载的
• 可能呈现网络提早的问题
• 禁用 javascript 的浏览器无奈应用该应用程序
• 因为平安限度，只能应用它来拜访服务于初始页面的主机的信息。如果须要显示来自其余服务器的信息，则无奈在 AJAX 中显示。

2.axios

axios 基于 promise 用于浏览器和 node.js 的 http 客户端。

用法：

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 申请
• 在浏览器中创立 XMLHttpRequest
• 反对 Promise API
• 提供了一些 并发申请的接口
• 反对拦挡申请和响应
• 转换申请和响应数据
• 勾销申请
• 主动转换 JSON 数据
• 客户端反对进攻 CSRF/XSRF

3.fetch

fetch 号称是 AJAX 的替代品，是在 ES6 呈现的，应用了 ES6 中的 promise 对象。Fetch 是基于 promise 设计的。Fetch 的代码构造比起 ajax 简略多了，参数有点像 jQuery ajax。然而，肯定记住fetch 不是 ajax 的进一步封装，而是原生 js，没有应用 XMLHttpRequest 对象。（然而问题还是有很多）

用法：

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 标准里新的实现形式

毛病：

• fetch 只对网络申请报错，对 400，500 都当做胜利的申请，须要封装去解决
• fetch 默认不会带 cookie，须要增加配置项
• fetch 不反对 abort, 不反对超时管制 ，应用setTimeout 及Promise.reject和 Promise.race 联合 setTimeout 实现的超时管制 并不能阻止申请过程持续在后盾执行，造成了量的节约
• fetch 没有方法原生监测申请的进度，而 XHR 能够