Ajax ：浏览器与服务器之间的异步通信方式

BONE
400 阅读4分钟

Ajax（Asynchronous Javascript And XML） 是一种异步地创建交互式网页的技术，使用 JavaScript 向服务器提出请求并处理响应而不阻塞用户核心对象 XMLHttpRequest 。通过这个对象，您的 JavaScript 可在不重载页面的情况与 Web 服务器交换数据，即在不需要刷新页面的情况下，就可以产生局部刷新的效果。

Ajax

373bc4b4cd2d5d378ad4b222[1]

在上图中，可以看到客户端（浏览器）和服务器端之间的通信过程。

XMLHttpRequest

XMLHttpRequest（XHR）对象用于用于在浏览器中实现异步 HTTP 请求（AJAX）。 通过这个对象，Web 开发者可以在不重新加载整个页面的情况下，与服务器交换数据并更新网页的部分内容。

HTTP 请求是超文本传输协议 (HTTP) 中客户端向服务器发起的一种通信方式；

HTTP 请求的基本组成部分

  1. 请求行：

    • 方法：指定请求类型，常见的有 GET 和 POST。
    • URL：请求的目标资源的 URL。
    • HTTP 版本：例如 HTTP/1.1 或 HTTP/2。

  2. 请求头部：

    • 包含额外的信息，如客户端类型 (User-Agent)、接受的内容类型 (Accept)、认证信息 (Authorization) 等。

  3. 请求正文（仅适用于某些方法，如 POST 或 PUT）：

    • 包含要发送给服务器的数据。

发送 Ajax 请求的方式

发送 AJAX（Asynchronous JavaScript and XML） 请求的方式有很多种，以下是常见的方法；

XMLHttpRequest()

这是最早的 AJAX 技术之一，它使用 XMLHttpRequest 对象来发送异步请求；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="btn">获取电影列表</button>
    <ul id="ul"></ul>
    <script>
        /**
         * 单击 "获取电影列表" 按钮时执行的函数
         */
        btn.addEventListener('click',()=>{

            // 朝后端发送一个请求，获取到需要的数据
            // 创建 XMLHttpRequest 对象
            let xhr = new XMLHttpRequest();

            // 初始化请求，方法为 GET，请求的 URL，异步请求
            xhr.open('GET','https://mock.mengxuegu.com/mock/65a91543c4cd67421b34c898/movie/movieList', true);

            // 发送请求
            xhr.send()

            // 监听 XMLHttpRequest 对象的状态改变事件
            xhr.onreadystatechange = () => {

                // 如果请求完成且状态码为 200（表示成功）
                if (xhr.readyState == 4 && xhr.status == 200) {

                    // 将响应数据转换为 JSON 对象并打印到控制台
                    console.log(JSON.parse(xhr.responseText));

                    // 从 JSON 响应数据中获取 movieList 数组
                    const movieList = JSON.parse(xhr.responseText).movieList;

                    // 遍历 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）中
                        ul.appendChild(li)
                    }
                }
            }
        })
    </script>
</body>
</html>

在 XMLHttpRequest 中，readyState 属性用于表示请求/响应过程中的不同步骤。readyState 的值是一个整数，范围从 0 到 4，每个值代表不同的状态：

  • 0 (UNSENT) ：请求尚未初始化。
  • 1 (OPENED) ：请求已建立，但尚未发送。
  • 2 (HEADERS_RECEIVED) ：请求已发送；正在接收响应头。
  • 3 (LOADING) ：正在下载响应体。
  • 4 (DONE) ：请求完成并且响应准备好。

当 readyState 的值变为 4 (DONE) 时，意味着整个 AJAX 请求过程已经完成，所有响应数据都已经收到，可以开始处理响应结果了。

chrome-capture-2024-7-13.gif

fetch()

fetch() 是一个现代的 JavaScript API，用于发起网络请求。它是一种原生的、基于 Promise 的方法，可以用来发送 HTTP 请求并处理响应。fetch() 提供了一种简洁而强大的方式来处理异步操作。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<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>
</html>

在 fetch 中，默认就是发送 GET 请求；且 Promise 也是让这个方法能够完成异步操作的重要机制；fetch 返回的Response 对象中需要手动进行解析。

jquery

在比较早以前，jQuery(www.bootcdn.cn/jquery/) 是一个流行的 JavaScript 库，它简化了许多 DOM 操作和 AJAX 请求。

jQuery 库里面同时也封装了一个用于发 AJAX 请求的方法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button onclick="getData()">获取电影数据</button>
    <ul></ul>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
    <script>
        /**
         * 定义一个名为 getData 的函数，用于发送 AJAX 请求获取数据
         */
        function getData() {
            /**
             * 使用 jQuery 的 ajax 方法发送 GET 请求
             * url 参数指定请求的 URL
             * method 参数指定请求的方法
             * data 参数指定请求时携带的数据
             * success 回调函数在请求成功时被调用，并接收响应数据作为参数
             */
             // $ 是jQuery中的一个全局对象
            $.ajax({
                url: 'https://mock.mengxuegu.com/mock/65a91543c4cd67421b34c898/movie/movieList',
                method: 'GET',
                data: {
                    name: 'kunkun',
                    age: 25
                },
                success: function(data){
                    console.log(data);
                }
            })
        }
    </script>
</body>
</html>

同样地，我们调用 jQuery 里面的 ajax 方法也能从服务器端拿到数据；

image.png

axios

axios 也是一个基于 promise 的 HTTP 客户端，用于浏览器和 Node.js 环境中发送 AJAX 请求。它是一个非常流行的库，因为它提供了许多便利的功能，使得发起 HTTP 请求变得简单且灵活。

Axios中文文档 | Axios中文网 (axios-http.cn)

image.png

利用 axios 发送请求也是非常的简便；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<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>

axios 支持请求和响应转换器，可以自动处理 JSON 数据的序列化和反序列化，且会用 data 包裹。

小结

以上就是发送 AJAX 请求的四种方式；了解 AJAX 对我们做项目开发是非常有必要的，可以让我们轻松地从后端接口发送请求拿到数据，在前后端分离中，也起了至关重要的作用。如果觉得有用的话，就点赞加关注吧！

avatar
文章
阅读
粉丝