在现代Web开发中，异步数据交互是一种常见需求。本文将通过一个简单的案例，展示如何实现页面与服务器之间的动态通信。假设我们需要从后端获取一组用户信息，并将其展示在前端页面上。
首先，创建一个HTML结构，用于容纳显示的数据：
```html
```
接下来，编写JavaScript代码来处理异步请求。这里我们使用原生的`XMLHttpRequest`对象，而不是jQuery或其他库，以保持代码的简洁性：
```javascript
function fetchUsers() {
const xhr = new XMLHttpRequest();
xhr.open('GET', '/api/users', true);
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
const users = JSON.parse(xhr.responseText);
const userListDiv = document.getElementById('user-list');
users.forEach(user => {
const userElement = document.createElement('p');
userElement.textContent = `姓名: ${user.name}, 年龄: ${user.age}`;
userListDiv.appendChild(userElement);
});
}
};
xhr.send();
}
// 页面加载完成后调用
window.onload = fetchUsers;
```
最后，在后端模拟一个API接口返回示例数据。例如，使用Node.js和Express框架：
```javascript
const express = require('express');
const app = express();
app.get('/api/users', (req, res) => {
const users = [
{ name: '张三', age: 25 },
{ name: '李四', age: 30 },
{ name: '王五', age: 28 }
];
res.json(users);
});
app.listen(3000, () => console.log('服务器已启动，监听端口3000'));
```
运行后端服务并在浏览器中访问该页面，即可看到动态加载的用户列表。这种方式不仅减少了页面刷新次数，还提升了用户体验。
---
希望这段内容能满足您的需求！如果有其他问题，请随时告知。
