AJAX：异步JavaScript和XML深入解析

什么是AJAX

AJAX（Asynchronous JavaScript and XML）是一种用于创建快速动态网页的技术，它允许网页应用快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面。它通过将一些原本由服务器执行的工作转移到客户端，从而减轻了服务器和带宽的负担，同时提升了用户体验。

AJAX的基本原理

AJAX基于Web标准，其核心是XMLHttpRequest对象。AJAX的工作流程如下：

创建XMLHttpRequest对象：首先，我们需要创建一个XMLHttpRequest对象。这个对象用于在浏览器和服务器之间发送HTTP请求。
设置请求和响应的处理函数：通过XMLHttpRequest对象的onreadystatechange事件处理器，我们可以指定当请求状态改变时应该执行的操作。此外，我们还可以设置onload、onerror等事件处理器来处理请求成功或失败的情况。
发送请求：使用XMLHttpRequest对象的open()和send()方法发送请求。open()方法用于指定HTTP请求的方法（GET、POST等）、请求的URL以及是否异步发送请求。send()方法用于发送请求。
接收响应：当服务器响应请求后，XMLHttpRequest对象会自动填充其responseText或responseXML属性，具体取决于响应的内容类型。此外，我们还可以通过status和statusText属性获取HTTP状态码和状态文本。

AJAX状态（readyState）

未初始化（0） ：XMLHttpRequest对象已创建，但尚未调用open()方法。在这个阶段，我们可以通过调用open()方法设置请求的方法和URL。
已打开（1） ：已经调用open()方法，但尚未调用send()方法。在这个阶段，我们可以通过调用send()方法发送请求。
已发送（2） ：已经调用send()方法，但尚未收到响应。在这个阶段，我们可以通过检查status属性来获取服务器响应的HTTP状态码。
正在接收（3） ：已经接收到部分响应数据。在这个阶段，我们可以通过检查responseText或responseXML属性来获取部分响应数据。
已完成（4） ：已经接收到全部响应数据，而且可以在客户端使用了。在这个阶段，我们可以处理完整的响应数据。

HTTP状态码（status）

200 OK：请求成功。服务器成功处理了请求。
404 Not Found：服务器无法找到请求的资源。这可能是由于输入的URL不正确或服务器上没有对应资源。
500 Internal Server Error：服务器内部错误。这可能是由于服务器端的代码错误或配置问题引起的。

AJAX 使用方式和代码示例

下面用获取电影列表作为示例

使用XMLHttpRequest

XMLHttpRequest对象是AJAX最原始和最基础的使用方式，可以通过它向服务器发送请求并接收响应。以下是一个使用XMLHttpRequest对象的AJAX请求示例：

js 复制代码

    let btn = document.getElementById("btn");
    btn.addEventListener('click', () => {
      //朝一个接口发请求，获取数据展示在页面上
      let xhr = new XMLHttpRequest();  //创建一个ajax实例
      xhr.open('GET', 'https://mock.mengxuegu.com/mock/65a91543c4cd67421b34c898/movie/movieList#!method=get', true)//配置发送的参数
      xhr.send();
      // 监听请求的过程
      xhr.onreadystatechange = () => {
        // console.log(xhr.readyState);
        if (xhr.readyState === 4 && xhr.status === 200) {//拿到了后端返回的数据
          // console.log(xhr.responseText);
          let movieList = JSON.parse(xhr.responseText).movieList;
          console.log(movieList);
          let list = document.getElementById("list");
          for (let i = 0; i < movieList.length; i++) {
            let li = document.createElement("li");
            li.innerHTML =``;
            list.appendChild(li);
          }
        }
      }
    })

使用jQuery

jQuery是一个流行的JavaScript库，它在AJAX方面提供了很多便利的方法。需要先引入这个库

js 复制代码

    let btn = document.getElementById("btn");
    let list = document.getElementById("list");
    btn.addEventListener('click', () => {
      $.ajax({
        url: 'https://mock.mengxuegu.com/mock/65a91543c4cd67421b34c898/movie/movieList#!method=get',
        method: 'get',
        data: {
          userName: 'xxx',
          age: 18
        },
        success: function (res) {
          let movieList = res.movieList;
          for (let i = 0; i < movieList.length; i++) {
            let li = document.createElement("li");
            li.innerHTML = ``;
            list.appendChild(li);
          }
        }
      })
    })

使用fetch

fetch是ES6中新增的API，可以向服务器发送请求并接收响应。

js 复制代码

    let btn = document.getElementById("btn");
    let list = document.getElementById("list");
    btn.addEventListener('click', () => {
      fetch('https://mock.mengxuegu.com/mock/65a91543c4cd67421b34c898/movie/movieList?userName=xxx&age=18')
        .then((res) => {
          // console.log(res); //整个响应对象
          return res.json();
        })
        .then((data) => {
          let movieList = data.movieList;
          for (let i = 0; i < movieList.length; i++) {
            let li = document.createElement("li");
            li.innerHTML = ``;
            list.appendChild(li);
          }
        })
    })

使用axios

axios是一个流行的JavaScript库，它基于Promise实现了对AJAX的封装。

js 复制代码

let btn = document.getElementById("btn");
let list = document.getElementById("list");
btn.addEventListener('click', () => {
  axios.get('https://mock.mengxuegu.com/mock/65a91543c4cd67421b34c898/movie/movieList?userName=xxx&age=18')
    .then((res) => {
      let movieList = res.data.movieList;
      for (let i = 0; i < movieList.length; i++) {
        let li = document.createElement("li");
        li.innerHTML = ``;
        list.appendChild(li);
      }
    })
})

分析与比较

XMLHttpRequest：原生 API，功能强大，但使用起来相对繁琐。
jQuery：简化了 AJAX 请求，语法简单易懂，适合小型项目。
Fetch API：是一种现代的替代方案，基于 Promise，语法简洁，但兼容性需要考虑。
Axios：基于 Promise，提供了更多的功能，如请求取消、拦截器等，广泛应用于大型项目中。

结果

最后获取的数据打印在控制台上是这样的

最后

学好AJAX，天天向上！