实时更新可选AJAX轮询或WebSocket推送。1. AJAX轮询通过定时请求获取数据，实现简单但效率低，适合低频更新；2. WebSocket支持服务端主动推送，实时性强、开销小，适用于高频场景；3. 选择依据为更新频率、用户量及系统复杂度，必要时可用SSE作为折中方案。
要在HTML页面中实现实时数据更新，常用的方法有两种：AJAX轮询和WebSocket推送。它们各有适用场景，选择哪种方式取决于对实时性、服务器负载和开发复杂度的要求。
AJAX轮询：定时请求获取最新数据
AJAX轮询是一种简单直接的实现实时更新的方式。它通过JavaScript定时向服务器发送HTTP请求，检查是否有新数据，然后更新页面内容。
优点：兼容性好，实现简单，适合低频更新的场景。
缺点：存在延迟，频繁请求会增加服务器负担，不够高效。
立即学习“前端免费学习笔记（深入）”；
常见实现步骤：- 使用
setInterval每隔几秒发起一次AJAX请求 - 通过
fetch或XMLHttpRequest从后端API获取数据 - 将返回的数据动态插入到HTML元素中
<script>
function fetchData() {
fetch('/api/data')
.then(response => response.json())
.then(data => {
document.getElementById('content').innerHTML = data.value;
})
.catch(err => console.error('Error:', err));
}
// 每3秒请求一次
setInterval(fetchData, 3000);
</script>
<div id="content"></div>
WebSocket推送：服务端主动发送数据
WebSocket提供全双工通信通道，允许服务器在数据更新时主动推送给客户端，实现真正的实时更新。
优点：响应快，节省带宽，适合高频更新和高并发场景，如聊天室、股票行情等。
缺点：需要服务器支持WebSocket协议，连接维护更复杂。
实现方式：-
前端使用
new WebSocket()建立连接 - 服务器监听连接并在有数据更新时推送消息
- 前端通过
onmessage接收并更新页面
<script>
const ws = new WebSocket('ws://yourserver:8080');
ws.onopen = () => {
console.log('WebSocket connected');
};
ws.onmessage = (event) => {
const data = JSON.parse(event.data);
document.getElementById('content').innerHTML = data.value;
};
ws.onerror = (error) => {
console.error('WebSocket error:', error);
};
</script>
<div id="content"></div>
如何选择：轮询 vs WebSocket
如果数据更新频率低（例如每分钟一次），且用户量不大，AJAX轮询足够胜任，开发成本也更低。
若要求毫秒级响应，或同时在线用户多，推荐使用WebSocket，避免不必要的HTTP开销。
还有一种折中方案是使用Server-Sent Events (SSE)，适用于服务端单向推送、客户端只读的场景，比WebSocket轻量，又比轮询高效。
基本上就这些。根据业务需求选对技术，才能在性能和维护之间取得平衡。
