html页面实时刷新显示服务器数据

   在上一篇中我说到浏览器和服务器交互数据,是实现了服务器发数据给浏览器,并在页面上显示,

但是是通过按钮点击刷新的,而且数据是和html页面一起发过来的,在这里我是数据放到页面数组里,

然后把页面数组发给浏览器,这样会打打浪费网络资源,在处理页面数组时,单片机负载也会很大。

那么有没有只交互数据,不发页面的呢?

今天找了几个小时,这个是有的,用ajax. 

     为什么要在html页面上实时刷新数据呢?

例如你的硬件设备里面有很多传感器,有温度,湿度等信息。你想让这些数据实时的显示到浏览器上。

主要通过JS的ajax,具体是干啥的我也不清楚。大概就是和http服务器交换数据的。

网上的一个案例:

<script type="text/javascript">
	//self.setInterval("loadXMLDoc()",3000);
	function loadXMLDoc()
	{
	var xmlhttp;
	if (window.XMLHttpRequest)
 	 {// code for IE7+, Firefox, Chrome, Opera, Safari
 	 xmlhttp=new XMLHttpRequest();
 	 }
	else
 	 {// code for IE6, IE5
 	 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  	}
	xmlhttp.onreadystatechange=function()
 	 {
 	if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myp").innerHTML=xmlhttp.responseText;
    }
  	}
	xmlhttp.open("POST","/index.html",true);
	xmlhttp.send();
	}
	</script>
	<button type="button" onclick="loadXMLDoc()">请求数据</button>
	<p id="myp"></p>
	<div id="myDiv"></div>

1.这段代码会使用POST请求发送给服务器,

2.服务器回应的数据会全部保存在xmlhttp.responseText里面

3.然后数据会全部显示在myp上面。

这么一个流程页面上就会显示服务器发来数据了,不过这个是用按键触发的,把它改成定时器触发,

就可以达到实时显示数据了。

我写的案例中有少量修改,也是基于上一个工程修改的。

实际效果:

服务器后台日志

具体实现可参看我写的案例,写的比较lou,最终版本会优化移植到单片机里面去的,所以现在只是实现功能而已,

看得累的实在抱歉。

源码:https://download.csdn.net/download/hes_c/10693523

  • 12
    点赞
  • 67
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
实现后台服务器接收到数据后前端页面自动刷新显示的一种常见方法是使用WebSocket来建立实时通信。当后台服务器接收到数据时,它可以将数据发送给连接的前端页面,前端页面接收到数据后可以进行相应的处理和刷新。 下面是一个简单的示例代码,展示了如何使用WebSocket实现此功能: 前端页面代码(HTML和JavaScript): ```html <!DOCTYPE html> <html> <head> <title>自动刷新页面示例</title> </head> <body> <h1>接收到的数据: <span id="data"></span></h1> <script> const socket = new WebSocket('ws://localhost:8080'); // 替换为你的服务器地址 socket.onmessage = function(event) { const receivedData = event.data; document.getElementById('data').innerText = receivedData; // 在此处进行其他页面刷新或处理逻辑 }; </script> </body> </html> ``` 后台服务器代码(使用Node.js和WebSocket库): ```javascript const WebSocket = require('ws'); const wss = new WebSocket.Server({ port: 8080 }); // 替换为你希望监听的端口 wss.on('connection', function connection(ws) { ws.on('message', function incoming(message) { // 在此处处理接收到的数据 // 可以根据需要进行相应的逻辑和处理 // 示例:将接收到的数据发送给所有连接的客户端 wss.clients.forEach(function each(client) { if (client.readyState === WebSocket.OPEN) { client.send(message); } }); }); }); ``` 这个示例中,前端页面通过WebSocket连接到后台服务器,并监听`onmessage`事件来接收从服务器发送过来的数据。后台服务器使用WebSocket库创建一个WebSocket服务器,并在收到客户端发送的消息时,将消息广播给所有连接的客户端。 请注意,这只是一个简单的示例,实际应用可能需要根据具体需求进行适当的修改和扩展。希望对你有帮助!如果你有任何其他问题,请随时提问。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值