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能够