怎么使用ajax实现局部刷新

news/2025/2/24 13:47:47

使用 AJAX 实现局部刷新的步骤如下：

基本概念
AJAX（Asynchronous JavaScript and XML）允许网页在不重新加载的情况下与服务器通信，更新部分内容。
实现步骤
2.1 创建 XMLHttpRequest 对象

javascript

var xhr = new XMLHttpRequest();

2.2 定义请求

javascript

xhr.open('GET', 'your-server-endpoint', true);
'GET'：请求方法（也可以是 'POST'）。

‘your-server-endpoint’：服务器 URL。

true：表示异步请求。

2.3 设置回调函数

javascript

xhr.onload = function() {
    if (xhr.status >= 200 && xhr.status < 300) {
        document.getElementById('your-element-id').innerHTML = xhr.responseText;
    } else {
        console.error('Request failed with status:', xhr.status);
    }
};

xhr.status：检查请求状态。

xhr.responseText：服务器返回的数据。

document.getElementById(‘your-element-id’).innerHTML：更新指定元素内容。

2.4 发送请求

javascript

xhr.send();

示例代码

html
复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AJAX Example</title>
</head>
<body>
    <div id="content">
        <p>Initial content</p>
    </div>
    <button onclick="loadNewContent()">Load New Content</button>

    <script>
        function loadNewContent() {
            var xhr = new XMLHttpRequest();
            xhr.open('GET', 'new-content.html', true);
            xhr.onload = function() {
                if (xhr.status >= 200 && xhr.status < 300) {
                    document.getElementById('content').innerHTML = xhr.responseText;
                } else {
                    console.error('Request failed with status:', xhr.status);
                }
            };
            xhr.send();
        }
    </script>
</body>
</html>

运行 HTML
4. 使用 Fetch API（现代方式）

javascript
复制
fetch('your-server-endpoint')
    .then(response => response.text())
    .then(data => {
        document.getElementById('your-element-id').innerHTML = data;
    })
    .catch(error => console.error('Error:', error));