AJAX

什么是 AJAX

AJAX 是异步的 JavaScript 和 XML（Asynchronous JavaScript And XML）。简单点说，就是使用 XMLHttpRequest 对象与服务器通信。它可以使用 JSON，XML，HTML 和 text 文本等格式发送和接收数据。AJAX 最吸引人的就是它的“异步”特性，也就是说它可以在不重新刷新页面的情况下与服务器通信，交换数据，或更新页面。

怎么做

代码链接

四大步骤

1. 创建 HttpRequest 对象（全称是 XMLHttpRequest）

2. 调用对象的 open 方法

3. 监听对象的 onload & onerror 事件

   ——专业前端会改用 onreadystatechange 事件

   ——在事件处理函数里操作 CSS 文件内容

4. 调用对象的 send 方法（发送请求）

onreadystatechange 事件

XMLHttpRequest.onreadystatechange 会在 XMLHttpRequest 的 readyState 属性发生改变时触发 readystatechange 事件的时候被调用。

例子

• 请求 style.css

const request = new XMLHttpRequest();
  request.open("GET", "/style.css");
  request.onload = () => {
    console.log(request.response);
    // 创建 style 标签
    const style = document.createElement("style");
    // 写入 style 内容
    style.innerHTML = request.response;
    // 将 style 插入 head 中
    document.head.appendChild(style);
  };
  request.onerror = () => {
    console.log("失败了");
  };
  request.send();

• 请求 2.js

const request = new XMLHttpRequest();
  request.open("GET", "/2.js");
  request.onload = () => {
    console.log(request.response);
    const script = document.createElement("script");
    script.innerHTML = request.response;
    document.body.appendChild(script);
  };
  request.onerror = () => {};
  request.send();

• 请求 3.html

const request = new XMLHttpRequest();
  request.open("GET", "/3.html"); // readyState = 1
  request.onreadystatechange = () => {
    if (request.readyState === 4) {
      // 下载完成 但不知道是 成功 2xx 还是 失败 4xx 或 5xx
      if (request.status >= 200 && request.status < 300) {
        const div = document.createElement("div");
        div.innerHTML = request.response;
        document.body.appendChild(div);
      } else {
        alert("HTML 加载失败");
      }
    }
  };
  request.send(); // readyState = 2

• 请求 4.xml

const request = new XMLHttpRequest();
  request.open("GET", "/4.xml"); // readyState = 1
  request.onreadystatechange = () => {
    if (request.readyState === 4) {
      // 下载完成 但不知道是 成功 2xx 还是 失败 4xx 或 5xx
      if (request.status >= 200 && request.status < 300) {
        const dom = request.responseXML;
        const text = dom.getElementsByTagName("warning")[0].textContent;
        console.log(text.trim());
      } else {
        alert("HTML 加载失败");
      }
    }
  };
  request.send(); // readyState = 2

• 请求 5.json

 const request = new XMLHttpRequest();
  request.open("GET", "/5.json");
  request.onreadystatechange = () => {
    if (request.readyState === 4) {
      if (request.status >= 200 && request.status < 300) {
        console.log(request.response);
        const object = JSON.parse(request.response);
        myName.textContent = object.name;
      }
    }
  };
  request.send();

• 请求 分页

const request = new XMLHttpRequest();
  request.open("GET", `/page${n + 1}`);
  request.onreadystatechange = () => {
    if (request.readyState === 4) {
      if (request.status >= 200 && request.status < 300) {
        const array = JSON.parse(request.response);
        array.forEach((item) => {
          const li = document.createElement("li");
          li.textContent = item.id;
          xxx.appendChild(li);
        });
        n += 1;
      }
    }
  };
  request.send();