Ajax

juejin.im/post/587f8d…

Ajax(Asynchronous JavaScript and XML)不是指一种单一的技术，而是有机地利用了一系列相关的技术。虽然其名称包含XML，但实际上数据格式可以由JSON代替，进一步减少数据量，形成所谓的AJAJ。为了使用JavaScript向服务器发出 HTTP 请求，需要一个提供此功能的类的实例。这就是XMLHttpRequest的由来。

AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

优点	缺点	ajax属性：	方法：
1.无刷新更新数据。2.异步与服务器通信。3.前端和后端负载平衡。4.基于标准被广泛支持。5.界面与应用分离。	1.AjAX干掉了Back和加入收藏书签功能，即对浏览器机制的破坏。2.AJAX的安全问题。3.因为网络延迟需要给用户提供必要提示	onreadystatechangereadyStateresponseTextresponseXMLstatusstatusText	abort()open()send()getAllResponseHeaders()getResponseHeader()setRequestHeader()

document.getElementById("search").onclick = function () {
  var request = newXMLHttpRequest(); //生成XHR对象；
  request.open(
    "GET",
    "server.php?number=" + document.getElementById("keyword").value
  );
  //XHR对象的open方法：请求方法：get；请求地址：server.php，参数为输入的编号；
  request.send(); //发送请求
  //监听request的状态的改变：readyState的改变：
  request.onreadystatechange = function () {
    if (request.readyState == 4) {
      //如果readyState为4即服务器响应已完成；
      if (request.status === 200) {
        //如果request的状态码为200；
        document.getElementById("searchResult").innerHTML =
          request.responseText; //将查询结果显示；
      } else {
        alert("发生错误" + request.status);
      }
    }
  };
};

从ajax到fetch、axios

jquery ajax：

它是对原生XHR的封装，还支持JSONP，非常方便

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

fetch

fetch号称是ajax的替代品，再搭配上async/await将会让我们的异步代码更加优雅：像同步代码一样。

（它的API是基于Promise设计的，旧版本的浏览器不支持Promise，需要使用polyfill es6-promise。）

async function test() {
  let response = await fetch(url);
  let data = await response.json();
  console.log(data);
}

axios

axios是尤雨溪大神推荐使用的，它也是对原生XHR的封装。它有以下几大特性：

• 可以在node.js中使用
• 提供了并发请求的接口
• 支持Promise API

axios({ method: "GET", url: url })
  .then((res) => {
    console.log(res);
  })
  .catch((err) => {
    console.log(err);
  });

并发请求

function getUserAccount() {
  return axios.get("/user/12345");
}
function getUserPermissions() {
  return axios.get("/user/12345/permissions");
}
axios.all([getUserAccount(), getUserPermissions()]).then(
  axios.spread(function (acct, perms) {
    // Both requests are now complete
  })
);