【Java 进阶篇】Ajax 实现——原生JS方式

大家好，欢迎来到这篇关于原生 JavaScript 中使用 Ajax 实现的博客！在前端开发中，我们经常需要与服务器进行数据交互，而 Ajax（Asynchronous JavaScript and XML）是一种用于创建异步请求的技术，它可以使我们在不刷新整个页面的情况下更新部分页面内容。在这篇文章中，我们将深入研究原生 JavaScript 如何使用 Ajax，以及一些相关的基础概念。

什么是 Ajax？

Ajax 是一种用于创建异步请求的技术，允许在不刷新整个页面的情况下向服务器发送和接收数据。这使得我们能够动态更新页面的部分内容，提高用户体验。虽然名字中包含 XML，但实际上，Ajax 可以使用多种数据格式，不仅限于 XML。

为什么使用 Ajax？

在 Web 开发中，我们常常需要从服务器获取数据或向服务器发送数据，而传统的同步请求会导致整个页面的刷新，用户体验较差。Ajax 的异步请求机制可以在不干扰用户当前操作的情况下与服务器进行数据交互，使页面变得更加动态和高效。

原生 JavaScript 中的 Ajax 实现

在原生 JavaScript 中，我们可以使用 XMLHttpRequest 对象来创建和处理 Ajax 请求。以下是一个简单的例子，演示如何使用原生 JavaScript 发起一个简单的 GET 请求：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>原生 JavaScript 中的 Ajax 实现</title>
</head>
<body>

    <button id="loadDataButton">加载数据</button>
    <div id="dataContainer"></div>

    <script>
        document.getElementById('loadDataButton').addEventListener('click', loadData);

        function loadData() {
            // 创建 XMLHttpRequest 对象
            var xhr = new XMLHttpRequest();

            // 配置请求，使用 GET 方法请求数据
            xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts/1', true);

            // 注册回调函数，处理响应数据
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    // 响应已完成且请求成功
                    var data = JSON.parse(xhr.responseText);
                    document.getElementById('dataContainer').innerText = data.title;
                }
            };

            // 发送请求
            xhr.send();
        }
    </script>
</body>
</html>

在这个例子中，我们首先创建了一个 XMLHttpRequest 对象，然后使用 open 方法配置请求。接着，我们注册了一个回调函数，当请求状态发生变化时，这个函数将被调用。最后，我们使用 send 方法发送请求。

请求状态

XMLHttpRequest 对象有一个 readyState 属性，表示请求的状态。常用的状态有：

0：未初始化，还没有调用 open 方法。
1：启动，已经调用 open 方法，但尚未调用 send 方法。
2：发送，已经调用 send 方法，但尚未接收到响应。
3：接收，已经接收到部分数据。
4：完成，已经接收到全部数据，而且已经可以在客户端使用。

在上面的例子中，我们通过检查 readyState 和 status 来确保请求已完成且成功。

异步与同步

在 open 方法的第三个参数中，我们传入了 true，表示使用异步请求。如果传入 false，则会使用同步请求。在实际开发中，建议使用异步请求，以免阻塞页面。

处理响应数据

在回调函数中，我们通过 xhr.responseText 获取响应的文本数据，并使用 JSON.parse 将其转换为 JavaScript 对象。然后，我们将获取到的数据展示在页面上。

POST 请求

除了 GET 请求，我们还可以使用 XMLHttpRequest 发起 POST 请求。以下是一个简单的例子：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>原生 JavaScript 中的 Ajax 实现（POST 请求）</title>
</head>
<body>

    <button id="sendDataButton">发送数据</button>

    <script>
        document.getElementById('sendDataButton').addEventListener('click', sendData);

        function sendData() {
            // 创建 XMLHttpRequest 对象
            var xhr = new XMLHttpRequest();

            // 配置请求，使用 POST 方法发送数据
            xhr.open('POST', 'https://jsonplaceholder.typicode.com/posts', true);

            // 设置请求头
            xhr.setRequestHeader('Content-Type', 'application/json');

            // 注册回调函数，处理响应数据
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    // 响应已完成
                    if (xhr.status === 201) {
                        console.log('数据发送成功！');
                    } else {
                        console.error('数据发送失败：', xhr.status, xhr.statusText);
                    }
                }
            };

            // 构建要发送的数据对象
            var dataToSend = {
                title: 'foo',
                body: 'bar',
                userId: 1
            };
            
            // 将 JavaScript 对象转换为 JSON 字符串
            var jsonData = JSON.stringify(dataToSend);

            // 发送请求，将 JSON 字符串作为请求体
            xhr.send(jsonData);
        }
    </script>
</body>
</html>

在这个例子中，我们使用了 POST 方法，并在请求头中设置了 Content-Type 为 application/json，表示请求体中包含 JSON 数据。然后，我们将要发送的数据对象转换为 JSON 字符串，并通过 send 方法发送请求。

跨域请求

在浏览器中，有同源策略的限制，即默认情况下，Web 页面中的脚本只能访问与包含它的文档具有相同协议、主机和端口的资源。因此，当我们的页面和请求的资源不符合同源策略时，就会涉及到跨域请求的问题。

解决跨域问题的方式有很多种，其中一种常见的方法是使用 JSONP（在不涉及安全性问题时），另一种是使用 CORS（Cross-Origin Resource Sharing）。关于跨域请求的详细内容可以参考之前关于 Ajax 的博客中的相关章节。

Ajax 进阶：Fetch API

除了 XMLHttpRequest，现代浏览器还提供了 Fetch API，它是一种更现代、更强大的网络请求接口。下面是一个使用 Fetch API 的例子：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用 Fetch API 进行 Ajax 请求</title>
</head>
<body>

    <button id="loadDataButton">加载数据</button>
    <div id="dataContainer"></div>

    <script>
        document.getElementById('loadDataButton').addEventListener('click', loadData);

        function loadData() {
            // 使用 Fetch API 发起 GET 请求
            fetch('https://jsonplaceholder.typicode.com/posts/1')
                .then(response => {
                    // 检查请求是否成功
                    if (!response.ok) {
                        throw new Error('请求失败：' + response.statusText);
                    }
                    // 将响应转换为 JSON
                    return response.json();
                })
                .then(data => {
                    // 成功接收到数据，处理响应
                    document.getElementById('dataContainer').innerText = data.title;
                })
                .catch(error => {
                    // 处理请求失败的情况
                    console.error('请求失败：', error.message);
                });
        }
    </script>
</body>
</html>

使用 Fetch API 相比于 XMLHttpRequest 更加简洁，同时支持 Promise，使得代码更具可读性和可维护性。

结语

通过本文的学习，你应该对原生 JavaScript 中使用 Ajax 进行数据请求有了一定的了解。从最基础的 GET 和 POST 请求开始，再到处理跨域问题，最后介绍了使用 Fetch API 进行请求的现代方式。Ajax 技术是前端开发中不可或缺的一部分，掌握它将使你能够更灵活地处理数据，提高用户体验。

在实际项目中，可以根据具体需求选择使用 XMLHttpRequest 或 Fetch API，或者考虑使用一些现代的 JavaScript 框架和库，如 Axios、jQuery 等，来简化网络请求的代码。希望这篇博客对你有所帮助，愿你在前端开发的路上越走越远！

|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 作者信息 作者：繁依Fanyi CSDN： https://techfanyi.blog.csdn.net 掘金：https://juejin.cn/user/4154386571867191 |