html页面实时刷新显示服务器数据_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上面。

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

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

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

实际效果：