前后端交互：深入了解Ajax技术的三种方法

银河系指南
536 阅读6分钟

前言

在这个信息瞬息万变的时代，网页上的热搜榜单、实时数据更新已成为吸引用户驻足的关键。但你是否疑惑过，这些动态内容是如何在不刷新页面的情况下悄然出现的？

这背后，离不开Ajax技术的支撑。Ajax，全称为Asynchronous JavaScript and XML，它使网页能在幕后与服务器“悄悄对话”，获取数据，更新页面部分内容，而用户甚至察觉不到这一过程。本文将深入浅出地探讨如何利用Ajax技术，在网页加载过程中向后端请求数据，并通过一个获取电影列表的实例，让你亲身体验前后端交互的魅力。 image.png

Ajax

Ajax（Asynchronous JavaScript and XML）是一种用于创建交互式网页应用程序的技术。它利用JavaScript在不重新加载整个网页的情况下，通过与服务器进行异步通信来更新部分页面内容。

具体操作流程通常包括：

  • 创建请求实例（如使用fetch(url)或XMLHttpRequest实例）。
  • 配置请求参数（如HTTP方法、请求头、请求体等）。
  • 发送请求（如fetch()的返回值或XMLHttpRequest.send()）。
  • 处理响应（使用.then()处理Promise的解决值，或监听XMLHttpRequest的onreadystatechange事件）。
  • 更新DOM，根据响应数据显示或更新页面内容。

readyState

readyState有以下几个值，分别代表ajax不同的请求状态：

  • 0 (unsent): 请求体刚创建，请求尚未初始化。
  • 1 (opened): 请求已经建立，但是还没有发送，open执行
  • 2 (headers_received): 请求已经发送，正在接收响应头。
  • 3 (logading): 响应体正在解析后端发来的数据。
  • 4 (done): 解析完成，可以访问响应数据。

只有当readyState的请求状态为 4 时候，我们才可以最终得到后端发来的数据。

获取电影列表

创建一个获取电影列表的按钮，现在要实现的功能是点击按钮，可以获取到最新的电影列表，通过无序列表展示出来。点击按钮，向后端发送http请求，后端将数据接口传回给前端，那看看可以怎么实现吧。后端接口：https://mock.mengxuegu.com/mock/65a91543c4cd67421b34c898/movie/movieList

 <button id="btn">获取电影列表</button>
    <ul id="list">

    </ul>

image.png

思路分析： 当我点击按钮时，朝后端接口发一个HTTP请求，请求到了数据，将数据格式化为对象，读取对象中的数组，循环数组，每循环一次都会创建一个li，将li添加到ul中。

方法一：XMLHttpRequest

<script>
        let btn = document.getElementById('btn');
        let ul = document.getElementById('list');
        btn.addEventListener('click',  () => {
            // 朝一个接口发请求，获取到数据展示到页面上

            let xhr = new XMLHttpRequest(); //创建一个ajax实例
            xhr.open('GET', 'https://mock.mengxuegu.com/mock/65a91543c4cd67421b34c898/movie/movieList',true); //配置发送的参数
            xhr.send(); //发送请求
            xhr.onreadystatechange = () => {  //监听请求的过程
                // console.log(xhr.readyState);
                if(xhr.readyState == 4 && xhr.status == 200){  //拿到了后端返回的数据
                    // console.log(JSON.parse(xhr.responseText));
                    // 展示在页面上
                    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>

代码分析：

  • 给按钮的id命名为btn，通过document.getElementById()方法，获取到按钮元素，为按钮绑定点击事件btn.addEventListener('click', () => {...})，在按钮上订阅一个事件，当点击按钮时就可以触发事件。

  • 朝一个接口发请求，获取到数据展示到页面上。通过构造函数new XMLHttpRequest()创建一个ajax实例xhr。

  • xhr.open('GET', 'https://mock.mengxuegu.com/mock/65a91543c4cd67421b34c898/movie/movieList',true) ，这段代码是使用xhr来初始化一个新的请求，请求的方法是GET，请求的URL（即上面的后端接口）指向一个模拟数据的API接口，用于获取电影列表信息， true表示请求是异步执行的，即脚本在等待服务器响应的同时可以继续执行其他操作。

  • 调用xhr.send()将请求发送出去。写到这里你去点击按钮，右键页面点击检查，点击网络，你会发现后端接口真的发送了数据出来。后端返回了一个对象，对象里面放了movielist数组。

image.png

  • 接下来就要拿到movieList数组，将数据展示到页面上。

  • xhr.onreadystatechange = () => { } 是xhr设置一个事件处理函数的方式，用于监听请求状态变更的事件。只有当xhr.readyState == 4时，并且xhr.status == 200表示请求成功，这样就可以成功拿到了后端的数据。通过打印xhr.responseText可以看到后端返回的数据，让我们来看看是什么吧。

xhr.responseText输出结果如下： image.png

  • 现在我们要做的就是将获取的数据展示到页面中去，上面返回的xhr.responseText是字符串，通过JSON.parse()方法可以将字符串转化为对象，通过打印JSON.parse(xhr.responseText)看看结果是什么吧。

JSON.parse(xhr.responseText)输出结果如下： image.png

  • 定义一个变量movieList，赋值为JSON.parse(xhr.responseText).movieList，得到movieList数组。最后通过循环数组，创建li，设置li里面的内容innerText为电影的名字nm和电影演员star，获取到ul，再将li里面的内容放到ul中。
let ul = document.getElementById('list');
 for(let i = 0; i < movieList.length; i++){
        const li = document.createElement('li'); 
        li.innerText = movieList[i].nm + '--' + movieList[i].star;
        ul.appendChild(li); //添加子标签                
}

输出结果：

image.png

方法二：jQuery

引入jquery库：

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

用Jquery方法可以更加快速的拿到movieList对象，只需要下面几步，其中res得到的数据就是movieList对象。

<script>
      let btn = document.getElementById('btn');
      
      btn.addEventListener('click',() => {
        $.ajax({
            url: 'https://mock.mengxuegu.com/mock/65a91543c4cd67421b34c898/movie/movieList',
            method: 'GET',
            success: function(res) {
            console.log(res);
            }
        })
      })
    </script>

其中的$.ajax({}) 是 jQuery 库中用来执行异步 HTTP 请求的函数。这个函数允许你向服务器请求数据，而无需刷新整个网页。

这个语法结构内的大括号 {} 包含了一个配置对象，你可以在这个对象里定义各种参数来定制你的请求，例如：

  • url：请求的服务器地址。
  • type 或 method：请求的方法，如 "GET", "POST" 等。
  • data：发送到服务器的数据，通常是键值对的对象形式或查询字符串。
  • dataType：期望从服务器收到的数据类型，如 "json", "xml", "text" 等。
  • success：请求成功后的回调函数，处理服务器返回的数据。
  • error：请求失败时的回调函数。

最后在success中加上循环数组就可以实现电影列表的展示了，完整代码如下：

<script>
      let btn = document.getElementById('btn');
      let ul = document.getElementById('list'); 

      btn.addEventListener('click',() => {
        $.ajax({
            url: 'https://mock.mengxuegu.com/mock/65a91543c4cd67421b34c898/movie/movieList',
            method: 'GET',
            data: {
                username:'昔年',
                age:18
            },
            success: function(res) {
            const movieList = res.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>

方法三：Fetch

调用fetch()函数，在里面放上后端接口，就会向后端接口发请求。

<script>
        let btn = document.getElementById('btn');
        let ul = document.getElementById('list');

        btn.addEventListener('click',  () => {  
        fetch("https://mock.mengxuegu.com/mock/65a91543c4cd67421b34c898/movie/movieList")
            .then((res) => {
                // console.log(res); //res是没有被解析的响应体
                return res.json(); //把响应体转换成json格式
            })
            .then((data) => {
                console.log(data);
            })
 })
    </script>

res打印出来是整个响应体

image.png

用res.json()将响应体转换成json格式，如下所示：

image.png

返回结果return res.json()，将格式化后的响应体传给data，然后得到格式化好的数据，打印data得到我们想要的movieList对象，如下所示：

image.png 完整代码如下：

<script>
        let btn = document.getElementById('btn');
        let ul = document.getElementById('list');

        btn.addEventListener('click',  () => {
           fetch("https://mock.mengxuegu.com/mock/65a91543c4cd67421b34c898/movie/movieList)
            .then((res) => {
                // console.log(res.json()); //响应体
                return res.json(); //把响应体转换成json格式
            })
            .then((data) => {
                // console.log(data);
                const movieList = data.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>

如何给后端传参

方法一： 在后端接口https://mock.mengxuegu.com/mock/65a91543c4cd67421b34c898/movie/movieList上用?的方式拼接一个参数给后端，后端就会解析我们给的参数。例如拼接成https://mock.mengxuegu.com/mock/65a91543c4cd67421b34c898/movie/movieList?username='昔年'&age=18。

<script>
        let btn = document.getElementById('btn');
        let ul = document.getElementById('list');

        btn.addEventListener('click',  () => {
           fetch("https://mock.mengxuegu.com/mock/65a91543c4cd67421b34c898/movie/movieList?username='昔年'&age=18")                      
 })
    </script>

运行代码，右键检查，点击按钮后就可以在网络中的载荷看到传入的值，如下图所示：

image.png

方法二： 用jquery方法，在其中的$.ajax({}) 里面加上data，如下所示：

<script>
      let btn = document.getElementById('btn');
      let ul = document.getElementById('list'); 

      btn.addEventListener('click',() => {
        $.ajax({
            url: 'https://mock.mengxuegu.com/mock/65a91543c4cd67421b34c898/movie/movieList',
            method: 'GET',
            data: {
                username:'昔年',
                age:18
            }
        })
      })
    </script>

三种方法比较

Ajax技术通过JavaScript与服务器异步通信，无需刷新页面即可实现内容的动态加载。我们探讨了三种实现方式：原始的XMLHttpRequest、jQuery的$.ajax()方法，以及现代的Fetch API，每种方法都有其特点和适用场景。

  1. XMLHttpRequest：经典的实现方式，通过创建请求实例、配置请求参数、发送请求、监听状态变化，直至处理响应数据，步步为营，手动控制请求的全过程。

  2. jQuery的$.ajax()：简化了操作，提供了一套链式调用接口，让发送请求和处理响应变得直观易懂，尤其适合习惯jQuery框架的开发者。

  3. Fetch API：现代浏览器的原生支持，基于Promise设计，代码更为简洁优雅，支持async/await语法，更符合现代JavaScript编程风格。

以获取电影列表为例，我们演示了如何利用这些技术发送GET请求至后端接口，解析响应数据，并将电影信息填充至HTML页面中。无论是使用XMLHttpRequest监听readyState的变化，还是jQuery的success回调，亦或是Fetch的链式.then()，目标都是相同的：在用户点击按钮的一瞬间，悄无声息地从服务器“搬”来最新电影资讯，实时展现在用户眼前。

那么你更喜欢哪种方法呢？

c452e51cb89cd7f1d62581f30e38e26.png

avatar
文章
阅读
粉丝