探索 Ajax 及其现代替代品

常乐hhh
310 阅读4分钟

Ajax，全称为 Async JavaScript and XML（异步 JavaScript 和 XML），一种异步的创建交互式网页的技术，它允许在不刷新整个网页的情况下，与服务器进行数据交换，实现页面的局部更新。这对前后端的交互方式产生了深远的影响，同时也凸显了前端在整个开发体系的重要性

Ajax 的工作步骤

Ajax 的工作原理基于一个简单的理念：通过浏览器内置的 XMLHttpRequest 对象，前端可以与服务器建立非阻塞的连接，从而在后台无声无息地交换数据。这种机制的核心步骤包括创建 XMLHttpRequest 对象、配置请求、发送请求，以及处理服务器响应。

  1. 创建 XMLHttpRequest 对象： 这就像是为与服务器的通信搭建了一座桥梁。通过new XMLHttpRequest()来创建。XMLHttpRequest()的一些用法有兴趣的可以去MDN中查看一下。

    let xhr = new XMLHttpRequest()

  2. 配置请求： 使用open()方法设置请求的方法（如 GET、POST 等）、目标 URL 和是否异步。

    xhr.open('GET','https://mock.mengxuegu.com/mock/65a91543c4cd67421b34c898/movie/movieList',true)

  3. 发送请求： 调用send()方法将请求发送出去。

    xhr.send()

  4. 处理响应： 通过onreadystatechange事件监听请求的状态变化。而Ajax 中有 5 种状态：

    • 0：未初始化，对象已创建，但尚未调用open()方法。

    • 1：已打开，open()方法已被调用，但尚未发送请求。

    • 2：已发送，send()方法已被调用，请求已发送。

    • 3：正在接收，服务器正在响应，但尚未完成。

    • 4：已完成，服务器响应已完成，数据接收完毕。

当状态为 4 且状态码为 200 时，表示请求成功，我们可以获取响应数据并进行处理。因为有些后端传过来的数据是字符串，所以我们需要JSON.parse()来将其转为json对象，方便我们在前端中使用。

```js
xhr.onreadystatechange=()=>{
    if(xhr.readyState==4 && xhr.status==200){
        console.log(JSON.parse(xhr.responseText))
    }
}
```

示例：

以一个获取电影列表数据为例，当我们点击按钮的时候，会向后端请求数据，然后将拿到的数据展示在页面上

    <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))
                    //从浏览器控制台中，可以找到movieList中的是我们需要的数据
                    const movieList = JSON.parse(xhr.responseText).movieList
                    for (let i=0; i<movieList.length; i++){
                        const li = document.createElement("li")
                        //movieList[i].nm+'--'+movieList[i].star
                        li.innerText= `${movieList[i].nm}--${movieList[i].star}`
                        ul.appendChild(li)
                    }
                }
            }
        })
    </script>

运行效果：

1754de8f-75d3-483d-8634-9b546e1e972a.gif

我们也可以在检查中查看状态码等。

image.png

关于HTTP状态码有以下常见的：

  • 以1开头的，一般都是信息类，表示收到客户端请求，正在进一步处理
  • 以2 开头的，一般都是成功的信号，表示客户端请求被正确接受、理解和处理
  • 以3 开头的，一般为重定向，表示客户端的请求没有成功，需要进一步的处理
  • 以4开头的，一般都是错误的信号，表示客户端的请求有错误或者失败
  • 以5 开头的，一般也是错误的信号，不过是服务器端的错误，表示服务端不能完成对请求的处理

常用的 Ajax 库

从上面的示例中可以看到，每当我们要向后端请求数据时都要写这么一大段，实在是不太优雅，而且在实际开发中，频繁的手动处理和复杂的错误管理往往令人头疼。所以呢，一系列 Ajax 库应运而生，它们以更简洁的语法、更丰富的功能和更好的错误处理能力，方便我们去写更优雅的代码。

jQuery

jQuery 是一个在前端开发早期时广受欢迎的 JavaScript 库，它里面的$.ajax()方法简化了 Ajax 的使用。其中的$则是该库中的全局变量，是 jQuery 函数的别名。通过这个简单的API，我们可以较为轻松的向后端请求数据。

同样的例子：

    <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',
                success:function(data){
                    console.log(data);
                }

            })
        }
    </script>

Axios

Axios 是一个专门用于处理 HTTP 请求的库。他不仅适用于浏览器，也适用于node.js 。提供了统一的 API 接口，使得跨平台开发变得更为便捷。它主要是运用了promise来处理异步问题。

同样的例子：

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

Fetch

Fetch 是现代浏览器提供的原生 API。他能用更加直观的方式去发送请求，而且Fetch 返回的 Promise 对象，使得异步请求的处理更加优雅，而且他与axios很相似，不过他的语法直观，更易于学习。

同样的例子：

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

结尾

从 XMLHttpRequest 的手动管理到 jQuery 的简洁封装，再到 Axios 和 Fetch API 的现代实践，Ajax 技术及其相关库的发展见证了前端工程领域的不断进步。通过这些库，我们可以更加方便、高效地进行 Ajax 开发，让我们的项目应用更加出色。。希望这篇文章能让您对 Ajax 有一个基本的认识和了解！

avatar
文章
阅读
粉丝