AJAX 的原理

AJAX 就是用 JS 发送请求和接收响应

AJAX 是异步的 JS 和 XML（Asynchronous JavaScript And XML），目前我们一般使用 JSON 代替 XML。AJAX 主要用于在不刷新页面的情况下向浏览器发起请求并接受响应，最后局部更新页面，它最核心的概念是 XMLHttpRequest 对象，该对象可以发起 HTTP 请求，我们可以监听其 readyState 的变化获得响应。

你可以使用AJAX最主要的两个特性做下列事：

在不重新加载页面的情况下发送请求给服务器。

接受并使用从服务器发来的数据。

JS 中发送一个请求到成功得到响应的时间在几百毫秒到一两秒之间。

使用 AJAX 的四个步骤：

创建 XMLHttpRequest 对象
调用对象的 open 方法 .open(method, url)
监听对象的 onreadystatechange 事件（在事件处理函数里操作 CSS / JS / HTML / responseXML / JSON.parse）
调用对象的 send 方法（发送请求）

var request = new XMLHttpRequest()
request.open('GET', '/a/b/c?name=ff', true);
request.onreadystatechange = function() {
  if (request.readyState === 4 && request.status === 200) {
    console.log(request.responseText);
  }
};
request.send();

在设置正确的 Content-Type 的前提下，使用 AJAX 可以轻量级地请求 HTML / CSS / JavaScript / XML / JSON 等内容，只要知道怎么解析这些内容，就可以使用这些内容。解析方法如下：

得到 CSS 之后生成 style 标签
得到 JS 之后生成 script 标签
得到 HTML 之后使用 innerHTML 和 DOM API
得到 XML 之后使用 reponseXML 和 DOM API
得到 JSON 之后使用 JSON.parse
不同类型的数据有不同类型的解析方法

用 AJAX 加载 CSS

getCSS.onclick = () => {
  const request = new XMLHttpRequest();
  request.open("GET", "/style.css"); //readyState = 1
  request.onreadystatechange = () => {
    //下载完成，但不知道是成功(2xx) 还是失败（4xx 5xx）
    if (request.readyState === 4) {
      if (request.status >= 200 && request.status < 300) {
        //创建 style 标签
        const style = document.createElement("style");
        //填写 style 内容
        style.innerHTML = request.response;
        //插入到 head 里面
        document.head.appendChild(style);
      } else {
        alert("加载 CSS 失败");
      }
    }
  };
  request.send(); //readyState = 2
};

用 AJAX 加载 JS

getJS.onclick = () => {
  const request = new XMLHttpRequest();
  request.open("GET", "/2.js");
  request.onreadystatechange = () => {
    if (request.readyState === 4) {
      if (request.status >= 200 && request.status < 300) {
        //创建 script 标签
        const script = document.createElement("script");
        //填写 script 内容
        script.innerHTML = request.response;
        //插入到 body 里面
        document.body.appendChild(script);
      } else {
        alert("加载 JS 失败");
      }
    }
  };
  request.send();
};

用 AJAX 加载 HTML

getHTML.onclick = () => {
  const request = new XMLHttpRequest();
  request.open("GET", "/3.html");
  request.onreadystatechange = () => {
    if (request.readyState === 4) {
      if (request.status >= 200 && request.status < 300) {
        //创建 div 标签
        const div = document.createElement("div");
        //填写 div 内容
        div.innerHTML = request.response;
        //插入到 body 里面
        document.body.appendChild(div);
      } else {
        alert("加载 HTML 失败");
      }
    }
  };
  request.send();
};

用 AJAX 加载 XML

getXML.onclick = () => {
  const request = new XMLHttpRequest();
  request.open("GET", "/4.xml");
  request.onreadystatechange = () => {
    if (
      request.readyState === 4 &&
      request.status >= 200 &&
      request.status < 300
    ) {
      //获取 XML 的 DOM 对象
      const dom = request.responseXML;
      //获取内容
      const text = dom.getElementsByTagName("warning")[0].textContent;
      //消除内容中的'回车'
      console.log(text.trim());
    }
  };
  request.send();
};

用 AJAX 加载 JSON

getJSON.onclick = () => {
  const request = new XMLHttpRequest();
  request.open("GET", "/5.json");
  request.onreadystatechange = () => {
    if (
      request.readyState === 4 &&
      request.status >= 200 &&
      request.status < 300
    ) {
      console.log(request.response);
      const object = JSON.parse(request.response); //字符串转换为对象(反序列化)
      console.log(object);
      myName.textContent = object.name;
    }
  };
  request.send();
};

学习链接

MDN | AJAX