likes
comments
collection
share

"从 XMLHttpRequest 到 Axios：一场 AJAX 英雄的奇幻之旅"

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

在 Web 开发的广阔领域中，AJAX（Asynchronous JavaScript and XML）无疑是一项革命性的技术，它允许网页在不重新加载整个页面的情况下动态更新内容，从而极大地提升了用户体验。本文将通过几个示例代码片段，深入解析 AJAX 的核心概念与实现方式，帮助读者理解其工作原理及应用技巧。

背景的想象引入(有点感觉了哦!)：

在浩瀚的 Web 开发宇宙中，有这样一群英雄，他们穿梭于前端与后端之间，悄无声息地改变着我们的浏览体验——它们就是 AJAX 英雄们！从古老的 XMLHttpRequest 到现代的 Axios，每一位都有自己的独特技能，让网页在不重载的情况下动态更新，就像魔法一样神奇。今天，就让我们跟随几位代表，踏上一场 AJAX 英雄的奇幻之旅吧！

第一站：原生 XMLHttpRequest —— 经典老将的坚韧

在这场旅程的起点，我们遇见了老将 XMLHttpRequest。虽然它外表朴素，没有华丽的包装，但它却是 AJAX 世界的元老级人物。只需几行代码，就能发起一次异步请求，与服务器对话，然后默默无闻地更新页面内容。它是如此低调，以至于许多新手开发者可能并不了解它的伟大。但别小看它，正是这位老将，奠定了 AJAX 技术的基础，让后续的英雄们得以站在巨人的肩膀上。

第二站：jQuery —— 简化一切的魔法师

接着，我们来到了 jQuery 的领地。这里，一切都变得如此简单。jQuery 就像一位魔法师，用它那 $.ajax() 的咒语，将原本复杂的异步请求过程变得如同施展魔法般轻松。只需要几行简洁的代码，即可完成数据的获取与处理。对于初学者而言，jQuery 就像是通往 AJAX 大门的钥匙，让异步通信不再神秘莫测。

第三站：Fetch API —— 现代骑士的优雅

当我们穿越到现代，一位身披Promise战甲的骑士迎面而来，那就是 Fetch API。它摒弃了传统 XMLHttpRequest 的冗长仪式，采用了一种更为直观和优雅的方式发起网络请求。基于 Promise 的设计，让异步处理变得流畅自如，就像是骑士挥舞长剑，斩断一切繁杂的束缚。Fetch API 不仅强大，而且是现代浏览器的标配，这意味着开发者可以大胆地拥抱未来，而无需担心兼容性问题。

第四站：Axios —— 高级战士的全能

最后，我们来到了 Axios 的领地，这里住着一位全副武装的高级战士。Axios 不仅继承了 Fetch API 的优雅，还拥有更多的特殊技能，如拦截器、转换请求和响应数据等。对于那些追求极致性能和灵活性的开发者来说，Axios 就像是一个宝藏，等待着被发掘。无论是在浏览器还是 Node.js 环境下，它都能展现出卓越的战斗力，成为 AJAX 英雄中的佼佼者。

从 XMLHttpRequest 到 Axios，AJAX 英雄们的旅程充满了挑战与机遇。每一种技术都有其独特的魅力，但不变的是它们共同的目标——提升用户体验，让 Web 应用程序更加生动、高效。随着技术的不断进步，未来的 AJAX 英雄们还将带来怎样的惊喜？让我们拭目以待，继续这场奇幻之旅！

一、原生 XMLHttpRequest 实现

最原始的 AJAX 实现依赖于 XMLHttpRequest 对象。当用户触发某个操作时，比如点击按钮，XMLHttpRequest 会向服务器发起一个异步请求。一旦服务器响应，我们便可以在回调函数中处理返回的数据，更新页面内容而无需重新加载页面。

可看如下实例感受一下！

<body>
    <button id='btn'>获取电影列表</button>
    <ul id="ul"></ul>
    <script>
        let btn = document.getElementById('btn');
        let ul = document.getElementById('ul');
        btn.addEventListener('click',() => {
            // console.log('btn clicked');
            // 朝后端发一个请求，获取到需要的数据
            let xhr = new XMLHttpRequest(); // 创建了一个ajax实例
            xhr.open('GET', 'https://mock.mengxuegu.com/mock/65a91543c4cd67421b34c898/movie/movieList',true);
            xhr.send();
            xhr.onreadystatechange = () => { // 检测请求的每个阶段
                if (xhr.readyState === 4 && xhr.status === 200) {
                    console.log(JSON.parse(xhr.responseText));
                    const movieList = JSON.parse(xhr.responseText).movieList;
                    for (let i = 0; i < movieList.length; i++) {
                        const li = document.createElement('li');
                        li.innerText =`${movieList[i].nm} -- ${movieList[i].star}` // movieList[i].nm + "--" + movieList[i].star;
                        ul.appendChild(li); 
                }
            }
        }
        })
    </script>
</body>

这段代码展示的是如何使用原生的 XMLHttpRequest 对象来实现 AJAX 请求，以获取并显示电影列表。下面是代码的解析：

  1. 在箭头函数内部：
    • let xhr = new XMLHttpRequest();：创建一个新的 XMLHttpRequest 对象，这个对象将被用来发送 AJAX 请求。
    • xhr.open('GET', 'https://mock.mengxuegu.com/mock/65a91543c4cd67421b34c898/movie/movieList', true);：初始化 AJAX 请求。参数 'GET' 表示请求类型是 GET；第二个参数是请求的 URL，这里指向了一个模拟数据的接口；true 表示请求是非同步的。
    • xhr.send();：发送请求。对于 GET 请求，通常不需要传递额外参数，因此直接调用 send() 即可。
  2. 在状态改变的处理器中：
    • if (xhr.readyState === 4 && xhr.status === 200) { ... }：检查请求是否完成（readyState 等于 4），以及请求是否成功（HTTP 状态码为 200）。如果条件满足，则表示请求已完成并且成功。
    • console.log(JSON.parse(xhr.responseText));：打印从服务器返回的 JSON 数据。xhr.responseText 包含了服务器响应的文本，使用 JSON.parse 将其解析成 JavaScript 对象。
    • const movieList = JSON.parse(xhr.responseText).movieList;：从解析后的 JSON 数据中提取电影列表数据。
    • 使用 for 循环遍历 movieList 数组，为每个电影创建一个 <li> 元素，并设置其文本内容为电影名和评分，然后将 <li> 元素添加到 ul 元素中，从而在页面上显示电影列表。

二、jQuery 的简化封装

jQuery 是一款流行的 JavaScript 库，它提供了丰富的插件和方法，极大地简化了原生 JavaScript 的复杂性。$.ajax() 方法便是 jQuery 提供的一种更简洁的 AJAX 请求方式。

"从 XMLHttpRequest 到 Axios：一场 AJAX 英雄的奇幻之旅" 可看如下实例感受一下！

<body>
  <button onclick="getData()">获取电影数据</button>
  <ul></ul>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
  <script>
    function getData() {
      $.ajax({
        url: 'https://mock.mengxuegu.com/mock/65a91543c4cd67421b34c898/movie/movieList',
        method: 'GET',
        data: {
          name: '平平',
          age: 18
        },
        success: function(data) {
          console.log(data);        
        }
      })
    }
  </script>
</body>

这段代码展示了如何使用 jQuery 库中的 $.ajax() 方法来异步获取数据并处理响应。以下是代码的详细解析：

  1. 引入 jQuery: <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script> 这一行代码通过 CDN 引入了 jQuery 库的最新版本，这是使用 $.ajax() 方法的前提。
  2. 配置 $.ajax() : 这里是 $.ajax() 方法的主要配置部分：
    • url: 指定了请求的目标 URL，这里是模拟的电影列表数据接口。
    • method: 设置请求的方法为 GET。
    • data: 传送给服务器的数据，这里是一个包含 name 和 age 的对象，会被序列化为查询字符串附加到 URL 后面。
    • success: 成功回调函数，当服务器响应成功时执行。data 参数是服务器返回的处理后的数据，通常为 JSON 格式，在这个函数中，我们将数据输出到控制台进行调试。

三、Fetch API：现代浏览器的新选择

Fetch API 是现代浏览器提供的标准 API，用于发起网络请求，它基于 Promise 设计，使得异步请求更加优雅和直观。

可看如下实例感受一下！

<body>
    <button onclick="getData()">获取数据</button>
    <script>
        function getData() {
            fetch('https://mock.mengxuegu.com/mock/65a91543c4cd67421b34c898/movie/movieList')
            .then((res) => {
                return res.json()
            })
            .then((data) => {
                console.log(data);
            })
        }
    </script>
</body>

这段代码展示了如何使用 Fetch API —— 现代浏览器中用于发起 HTTP 请求的标准方法 —— 来异步获取数据。让我们逐行解析这段代码，理解其工作原理：

  1. fetch('https://mock.mengxuegu.com/mock/65a91543c4cd67421b34c898/movie/movieList')：fetch 函数接收一个 URL 作为参数，这里指向了一个模拟的电影列表数据接口。fetch 会返回一个 Promise，这个 Promise 在请求完成后解析为 Response 对象。
  2. .then((res) => { return res.json() })：使用 .then 方法来处理 fetch 返回的 Promise。当请求成功时，第一个 .then 接收一个 Response 对象作为参数，通常称为 res。res.json() 方法会将响应体转换为 JSON 格式，这也返回一个 Promise。
  3. .then((data) => { console.log(data); })：第二个 .then 方法处理 res.json() 返回的 Promise。当 JSON 数据解析完毕后，这个 .then 接收 JSON 数据作为参数，并将其打印到控制台。这里的 data 变量包含了从服务器接收到的 JSON 数据。

四、Axios：更高级的 HTTP 客户端

"从 XMLHttpRequest 到 Axios：一场 AJAX 英雄的奇幻之旅"

Axios 是一个基于 Promise 的 HTTP 客户端，适用于浏览器和 node.js。它提供了丰富的功能，如拦截器、转换请求和响应数据等，使得 AJAX 请求更为强大且灵活。

"从 XMLHttpRequest 到 Axios：一场 AJAX 英雄的奇幻之旅" 可看如下实例感受一下！

<body>
    <button onclick="getData()">获取数据</button>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
        function getData() {
            axios.get('https://mock.mengxuegu.com/mock/65a91543c4cd67421b34c898/movie/movieList')
            .then((res) => {
                console.log(res.data);
            })
        }
    </script>
</body>

这段HTML代码展示了一个简单的网页结构，其中包含一个按钮和一些JavaScript代码，用于通过Axios库发起HTTP GET请求。下面是对代码各部分的解析：

  • <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>：这行代码引入了Axios库。Axios是一个基于Promise的HTTP客户端，用于浏览器和Node.js中发起网络请求。这里使用的是CDN（内容分发网络）提供的Axios库最小化版本。

  • <script>标签内的JavaScript代码：

    • function getData()：定义了一个名为getData的函数，当按钮被点击时调用此函数。
    • axios.get(...)：使用Axios发起一个GET请求到指定的URL（在这个例子中是模拟数据的API地址）。请求的URL指向一个模拟电影列表数据的API。
    • .then((res) => { ... })：这是一个Promise链，当请求成功完成时，.then方法会被调用，传入的参数res是响应对象，包含了服务器返回的数据。在回调函数中，使用console.log(res.data);语句将返回的数据输出到浏览器的控制台。

五、结论

AJAX 技术的核心在于异步请求和响应处理，无论是使用原生的 XMLHttpRequest、jQuery 的 $.ajax()、现代的 Fetch API 还是更高级的 Axios 库，它们都遵循相同的基本原理，即在后台与服务器交换数据，而不中断用户的交互体验。掌握 AJAX，意味着开发者可以构建出更加动态、高效和用户友好的 Web 应用程序。随着前端框架和库的不断演进，AJAX 的实现方式也在不断优化，但其背后的思想和机制始终不变。

转载自:https://juejin.cn/post/7389650993359601690
评论
请登录