ajax局部更新

一壶浊酒..2025-10-14 20:49

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

AJAX 不是新的编程语言，而是一种使用现有标准的新方法。

AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。

AJAX 不需要任何浏览器插件，但需要用户允许 JavaScript 在浏览器上执行。

XMLHttpRequest 只是实现 Ajax 的一种方式

javascript 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>AJAX局部更新示例</title>
    <style>
        .container {
            max-width: 600px;
            margin: 20px auto;
            padding: 20px;
            border: 1px solid #ddd;
            border-radius: 8px;
        }
        #user-info {
            margin: 15px 0;
            padding: 10px;
            border: 1px dashed #666;
            min-height: 80px;
        }
        button {
            padding: 8px 16px;
            background: #007bff;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        button:hover {
            background: #0056b3;
        }
        .loading {
            color: #666;
        }
        .error {
            color: #dc3545;
        }
    </style>
</head>
<body>
    <div class="container">
        <h3>用户信息加载器</h3>
        <button onclick="loadUserInfo()">加载用户信息</button>
        <div id="user-info">
            <!-- 这里将通过AJAX更新 -->
            点击按钮加载用户信息...
        </div>
    </div>

    <script>
        // 加载用户信息并局部更新页面
        async function loadUserInfo() {
            const userInfoDiv = document.getElementById('user-info');
            
            // 1. 显示加载状态
            userInfoDiv.innerHTML = '<span class="loading">加载中...</span>';
            
            try {
                // 2. 发起异步请求（这里使用模拟API，实际项目替换为真实接口）
                const response = await fetch('https://jsonplaceholder.typicode.com/users/1');
                
                // 3. 检查请求是否成功（HTTP状态码200-299）
                if (!response.ok) {
                    throw new Error(`请求失败：${response.status}`);
                }
                
                // 4. 解析服务器返回的JSON数据
                const user = await response.json();
                
                // 5. 局部更新页面内容（只更新user-info区域）
                userInfoDiv.innerHTML = `
                    <p><strong>姓名：</strong>${user.name}</p>
                    <p><strong>邮箱：</strong>${user.email}</p>
                    <p><strong>地址：</strong>${user.address.street}, ${user.address.city}</p>
                `;
                
            } catch (error) {
                // 6. 处理错误（如网络异常、服务器错误）
                userInfoDiv.innerHTML = `<span class="error">加载失败：${error.message}</span>`;
            }
        }
    </script>
</body>
</html>