下面是一个简单的 AJAX 实例，展示了如何使用 AJAX 向服务器发送请求并处理响应。这个示例将向一个 PHP 文件发送一个请求，并显示服务器返回的响应数据。

1. 简单的 AJAX 实例

前端 (HTML + JavaScript + AJAX)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AJAX 示例</title>
</head>
<body>

    <h2>AJAX 示例</h2>
    <button id="loadButton">加载数据</button>
    <div id="responseContainer"></div>

    <script>
        // 获取按钮和响应容器元素
        var button = document.getElementById("loadButton");
        var responseContainer = document.getElementById("responseContainer");

        // 为按钮添加点击事件监听器
        button.addEventListener("click", function() {
            // 创建 XMLHttpRequest 对象
            var xhr = new XMLHttpRequest();
            
            // 配置 GET 请求，指向 `server.php`
            xhr.open("GET", "server.php", true);
            
            // 设置响应处理函数
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    // 请求成功时，显示服务器返回的数据
                    responseContainer.innerHTML = xhr.responseText;
                }
            };
            
            // 发送请求
            xhr.send();
        });
    </script>

</body>
</html>

后端 (PHP – server.php)

<?php
// 模拟从服务器获取数据
$data = array(
    "message" => "Hello, this is a response from the server!",
    "timestamp" => date("Y-m-d H:i:s")
);

// 将数据转为 JSON 格式并返回
echo json_encode($data);
?>

2. 说明

  1. 前端：
    • 当用户点击按钮时，使用 AJAX（即 XMLHttpRequest）向服务器发送一个 GET 请求，向 server.php 请求数据。
    • 请求成功后，AJAX 会接收到响应，使用 xhr.responseText 获取服务器返回的数据，并将其显示在页面上。
  2. 后端 (PHP)：
    • server.php 脚本将一个简单的 PHP 数组转化为 JSON 格式，并将其返回给前端。
    • 在实际应用中，你可以根据需要修改 PHP 脚本来处理数据库操作或执行其他逻辑。

3. 执行流程

  1. 用户点击页面上的“加载数据”按钮。
  2. 前端通过 AJAX 向服务器的 server.php 发送请求。
  3. 服务器处理请求并返回一个 JSON 格式的响应。
  4. 前端接收到响应后，使用 xhr.responseText 获取数据，并将它显示在网页的 <div id="responseContainer"></div> 中。

4. 结果

  • 当点击按钮后，页面将显示从服务器获取到的消息和时间戳。

扩展功能

如果你需要向服务器发送数据（例如，表单数据），可以使用 AJAX POST 请求，将数据发送到后端进行处理，并返回响应。

如果你需要做更多的操作，比如发送 XML 或更复杂的请求，可以参考我之前给出的 AJAX 和 XML 示例。