如何在HTML中插入实时数据更新_HTML AJAX轮询与WebSocket推送-html教程-PHP中文网

如何在HTML中插入实时数据更新_HTML AJAX轮询与WebSocket推送

看不見的法師

发布： 2025-10-17 08:42:01

原创

617人浏览过

实时更新可选AJAX轮询或WebSocket推送。1. AJAX轮询通过定时请求获取数据，实现简单但效率低，适合低频更新；2. WebSocket支持服务端主动推送，实时性强、开销小，适用于高频场景；3. 选择依据为更新频率、用户量及系统复杂度，必要时可用SSE作为折中方案。

如何在html中插入实时数据更新_html ajax轮询与websocket推送

要在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提供全双工通信通道，允许服务器在数据更新时主动推送给客户端，实现真正的实时更新。

优点：响应快，节省带宽，适合高频更新和高并发场景，如聊天室、股票行情等。

ViiTor实时翻译

AI实时多语言翻译专家！强大的语音识别、AR翻译功能。

116

查看详情

缺点：需要服务器支持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>

登录后复制