一个手操API讲清楚什么是ajax

ajax是什么？

ajax，全名 async javaScript and xml 是一种用于创建快速动态网页的技术。它通过在后台与服务器进行少量数据交换，使网页可以异步更新，而不会重新加载整个页面。

简单来说 ajax 就是一种异步的手段来让页面和JS进行交互的。

ajax 的实现通常包含以下几个步骤

用户与网页交互（比如点击按钮）。

创建一个XMLHttpRequest对象。

配置请求，设置请求方法、URL以及回调函数。

发送请求。

服务器响应请求，返回数据。

如果设置了回调函数，这个函数会被调用，并接收到服务器返回的数据。

在回调函数中，可以更新网页的部分内容。

实现 ajax的手段通常包括XMLHttpRequest、jQuery、Fetch API、Axios四种，第一种为原生方法，后三种都是由它原有的代码封装而来。

下面我们就通过一个XMLHttpRequest实例一步步的讲解这个最经典的 API 过程演示。

XMLHttpRequest 的 AJAX 实例：

首先我们要明确的是：我们希望实现朝一个接口发请求，获取到数据展示在页面上的功能。

于是我们先设置一个button按钮，再通过btn.addEventListener为button的点击订阅一个点击事件

然后再创建一个ajax实例，驱使浏览器向后端发送网络请求（let xhr = new XMLHttpRequest()）

然后我们要通过xhr.open配置发送的参数。再通过xhr.send()来发动请求。

其中open是位于XMLHttpRequest()原型上的方法，内部三个参数从左到右分别设置了：( 1.请求方式 2.请求网址 3.是否开启异步 )

<body>
    <button id="btn">获取电影列表</button>
    <ul id = "list">
    
    </ul>
    <script>
    let btn = document.getElementById("btn");
    btn.addEventListener('click', () => {
      let xhr = new XMLHttpRequest();
      xhr.open('GET', 'https://mock.mengxuegu.com/mock/65a91543c4cd67421b34c898/movie/movieList#!method=get', true)
      xhr.send();
    })

    </script>
</body>

现在我们回到页面，点击获取电影列表的按钮，可以看到控制台的网络一栏出现了我们发送的这个请求，点击它，就能看到右侧关于它的各方面信息，比如响应得到的数据等等。

好了，初步工程已经完成，我们发出了请求得到了数据，接下来就该拿到这份数据并在网页上呈现出来，于是，我们添加上xhr.onreadystatechange这个函数去监听请求的过程。

 xhr.onreadystatechange = () => {   // 监听请求的过程
   console.log(xhr.readyState);
 }

同样的，我们在页面点击获取电影列表的按钮，可以在控制台看到输出了几行数字，这些数字就是状态码readystate，代表了 ajax 的状态。

readyState

0 -- xhr刚创建

1 -- open执行

2 -- 请求发送出去，响应头被接受

3 -- 响应体正在解析

4 -- 解析完成

这里 ajax 的状态码出现4，代表我们已经可以使用获取到的数据。

因此在规范的代码中，我们想要进行下一步操作的话，就离不开判断 ajax 与 http 的状态码。其中不同数字的开头代表了不同的状态（当xhr.readyState == 4和xhr.status == 200http就一定能拿到后端的数据）。

http 的状态码：status

2xx

3xx

4xx

5xx

通过status可以判断到底是前后端哪一方出了问题。状态码分别由2、3、4、5开头，详情可查询官方文档。

那么现在，既然我们可以获取到数据，那就顺带让我们看看请求得到的响应体：这里的xhr.responseText就是后端返回来的内容，再用console.log(xhr.responseText)输出得到的响应体。

 xhr.onreadystatechange = () => {
     if  (xhr.readyState == 4 && xhr.status == 200) {
         console.log(xhr.responseText);
     }
 }

同样是点击获取电影列表的按钮，控制台输出的响应体如下，只是这一大片属于字符串，仍待转换为对象才能被代码操作。

于是，我们通过JSON.parse将这些字符串转换为对象，再通过.movieList将这个数组赋给我们创建的movieList变量，便于接下来的for循环，这个for循环每循环一次都会创建一个li，并通过ul.appendChild(li)把这个li添加到数组中去。

这里的li.innerText = movieList[i].nm + '--' + movieList[i].star，表示按电影名 + '--' + 明星名的形式输出。

完整代码：

  <button id="btn">获取电影列表</button>
  <ul id = "list">
    
  </ul>
  <script>
  let btn = document.getElementById("btn");
  let ul = document.getElementById('list');
  btn.addEventListener('click', () => {
  let xhr = new XMLHttpRequest();
  xhr.open('GET', '目标网址', true)
  xhr.send();
  xhr.onreadystatechange = () => {
    if  (xhr.readyState == 4 && xhr.status == 200) {
        const movieList = JSON.parse(xhr.responseText).movieList;
        // console.log(movieList);

        for(let i = 0; i < movieList.length; i++){
                 const li = document.createElement('li');
                 li.innerText = movieList[i].nm + '--' + movieList[i].star;
                 ul.appendChild(li);
        }
  }
        
  }
})
 </script>

点击获取电影列表按钮，现在是见证奇迹的时刻。

至此，艺术达成！

补充：

以下分别是使用jQuery、fetch、axios的 ajax 实现，可以看出相比原生 API 它们的实现更加简化，并实现了相同的功能。

jQuery：

这是曾经风靡一时的jQuery，需要注意的是，想要使用jQuery，别忘记先在头部导入jQuery库。

  <script>
    let btn = document.getElementById("btn");
    let ul = document.getElementById("list");
    btn.addEventListener('click', () => {
      $.ajax({               // $.ajax封装函数
        url: '目标网址',
        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 = movieList[i].nm + '--' + movieList[i].star;
            ul.appendChild(li);
          }
        }
      })
    })
 </script>

fetch：

fetch是由官方封装的方法，因此不需要做任何引用。其通过fetch('目标网址')发送请求，.then接受,可谓是方便至极。

这种方法里想要向后端传参数的话只需拼接在fetch('目标网址'？ ) ，也就是'目标网址'?之后的位置。

  <script>
    let btn = document.getElementById("btn");
    let ul = document.getElementById("list");
    btn.addEventListener('click', () => {
      fetch('目标网址')
        .then((res) => {
          return res.json();        // 把响应体格式化成 json 对象  return给下一个.then
        })
        .then((data) => {
          let movieList = data.movieList;
          for (let i = 0; i < movieList.length; i++) {
            let li = document.createElement("li");
            li.innerHTML = movieList[i].nm + '--' + movieList[i].star;
            ul.appendChild(li);
          }
        })
    })
 </script>

axios：

axios作为目前相对主流的 ajax 方法，其效力自不必多说。

<script>
let btn = document.getElementById("btn");
let ul = document.getElementById("list");
btn.addEventListener('click', () => {
  axios.get('目标网址')
    .then((res) => {
      let movieList = res.data.movieList;
      for (let i = 0; i < movieList.length; i++) {
        let li = document.createElement("li");
        li.innerHTML = movieList[i].nm + '--' + movieList[i].star;
        ul.appendChild(li);
      }
    })
})
 </script>

总结：

ajax 作为一种异步的创建交互式网页的技术，本文总共介绍了以下四种 ajax 实现方法。

XMLHttpRequest：原生 API，功能强大，但使用起来相对繁琐。

jQuery：简化了 AJAX 请求，语法简单易懂，适合小型项目。

Fetch API：是一种现代的替代方案，基于 Promise，语法简洁，但兼容性需要考虑。

Axios：基于 Promise，提供了更多的功能，如请求取消、拦截器等，广泛应用于大型项目中。

+友情链接