AJAX 实例

下面通过几个常见的 AJAX 示例，帮助理解如何在网页中使用 AJAX 进行数据交互。

示例 1：使用 AJAX 加载文本文件

目标：点击按钮后，从服务器获取 data.txt 文件的内容，并显示在网页上。

HTML 代码：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>AJAX 加载文本文件</title>
</head>
<body>

    <button onclick="loadText()">加载文本</button>
    <p id="result"></p>

    <script>
        function loadText() {
            var xhr = new XMLHttpRequest();
            xhr.open("GET", "data.txt", true);
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    document.getElementById("result").innerHTML = xhr.responseText;
                }
            };
            xhr.send();
        }
    </script>

</body>
</html>

说明：

  • 点击按钮后，XMLHttpRequest 发送 GET 请求获取 data.txt 文件内容。
  • 服务器返回数据后，将其显示在 <p id="result"> 标签中。

示例 2：使用 AJAX 获取 JSON 数据

目标：点击按钮后，获取服务器返回的 JSON 数据，并在网页上显示。

HTML 代码：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>AJAX 获取 JSON 数据</title>
</head>
<body>

    <button onclick="loadJson()">获取 JSON 数据</button>
    <p id="jsonResult"></p>

    <script>
        function loadJson() {
            var xhr = new XMLHttpRequest();
            xhr.open("GET", "data.json", true);
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    var data = JSON.parse(xhr.responseText);
                    document.getElementById("jsonResult").innerHTML =
                        "姓名：" + data.name + "<br>年龄：" + data.age;
                }
            };
            xhr.send();
        }
    </script>

</body>
</html>

服务器返回的 data.json 示例：

{
    "name": "张三",
    "age": 25
}

说明：

  • AJAX 请求 data.json 文件，并解析 JSON 数据后更新页面内容。

示例 3：使用 jQuery AJAX 获取数据

目标：使用 jQuery 发送 AJAX 请求，并显示服务器返回的数据。

HTML 代码：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>jQuery AJAX 示例</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

    <button id="loadData">加载数据</button>
    <p id="jqueryResult"></p>

    <script>
        $(document).ready(function() {
            $("#loadData").click(function() {
                $.ajax({
                    url: "data.json",
                    type: "GET",
                    dataType: "json",
                    success: function(data) {
                        $("#jqueryResult").html("姓名：" + data.name + "<br>年龄：" + data.age);
                    },
                    error: function() {
                        $("#jqueryResult").html("请求失败！");
                    }
                });
            });
        });
    </script>

</body>
</html>

说明：

  • 需要 jQuery 库（可通过 <script> 标签引入）。
  • $.ajax() 方法用于发送 AJAX 请求，并在成功时更新页面内容。

示例 4：使用 Fetch API 发送 AJAX 请求

目标：使用现代 fetch() API 获取数据，代替 XMLHttpRequest。

HTML 代码：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Fetch API 示例</title>
</head>
<body>

    <button onclick="fetchData()">获取数据</button>
    <p id="fetchResult"></p>

    <script>
        function fetchData() {
            fetch("data.json")
                .then(response => response.json()) // 解析 JSON
                .then(data => {
                    document.getElementById("fetchResult").innerHTML =
                        "姓名：" + data.name + "<br>年龄：" + data.age;
                })
                .catch(error => console.error("请求失败:", error));
        }
    </script>

</body>
</html>

说明：

  • fetch() 方法更加现代化，返回 Promise，可以链式 .then() 解析数据。

示例 5：AJAX 提交表单数据

目标：提交表单数据到服务器，并获取返回结果（使用 POST 请求）。

HTML 代码：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>AJAX 提交表单</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

    <form id="userForm">
        姓名：<input type="text" id="name" name="name"><br>
        年龄：<input type="text" id="age" name="age"><br>
        <button type="submit">提交</button>
    </form>

    <p id="formResult"></p>

    <script>
        $(document).ready(function() {
            $("#userForm").submit(function(event) {
                event.preventDefault(); // 阻止表单默认提交

                var formData = {
                    name: $("#name").val(),
                    age: $("#age").val()
                };

                $.ajax({
                    url: "submit.php", // 服务器端处理文件
                    type: "POST",
                    data: formData,
                    success: function(response) {
                        $("#formResult").html("服务器返回：" + response);
                    },
                    error: function() {
                        $("#formResult").html("提交失败！");
                    }
                });
            });
        });
    </script>

</body>
</html>

说明：

  • 阻止表单默认提交行为，改用 $.ajax() 发送 POST 请求。
  • 服务器端（如 submit.php）需接收数据并返回处理结果。

总结

  • 使用 XMLHttpRequest、Fetch API 或 jQuery AJAX 进行异步数据请求。
  • 支持多种数据格式（文本、JSON、XML），JSON 更受欢迎。
  • AJAX 可以用于动态加载内容、表单提交、分页加载等场景。

🔹 推荐使用 fetch() 进行 AJAX 请求，因其更现代、支持 Promise，且代码更简洁。 🚀