likes
comments
collection
share

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

作者站长头像
站长
· 阅读数 20

Ajax是什么？

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

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

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

  1. 用户与网页交互（比如点击按钮）。
  2. 创建一个XMLHttpRequest对象。
  3. 配置请求，设置请求方法、URL以及回调函数。
  4. 发送请求。
  5. 服务器响应请求，返回数据。
  6. 如果设置了回调函数，这个函数会被调用，并接收到服务器返回的数据。
  7. 在回调函数中，可以更新网页的部分内容。

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

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

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

XMLHttpRequest 的 AJAX 实例：

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

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

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

  1. 然后再创建一个 Ajax 实例，驱使浏览器向后端发送网络请求（let xhr = new XMLHttpRequest()） 一个手操API讲清楚什么是Ajax

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

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

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

<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>

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

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

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

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

readyState

  • 0 -- xhr刚创建
  • 1 -- open执行
  • 2 -- 请求发送出去，响应头被接受
  • 3 -- 响应体正在解析
  • 4 -- 解析完成

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

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

因此在规范的代码中，我们想要进行下一步操作的话，就离不开判断 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);
     }
 }

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

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

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

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

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

完整代码：

  <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>

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

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

至此，艺术达成！

补充：

以下分别是使用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，提供了更多的功能，如请求取消、拦截器等，广泛应用于大型项目中。
转载自:https://juejin.cn/post/7398324376262705192
评论
请登录