html页面实时刷新显示服务器数据 |
您所在的位置:网站首页 › ajax刷新页面部分内容不显示了 › html页面实时刷新显示服务器数据 |
在上一篇中我说到浏览器和服务器交互数据,是实现了服务器发数据给浏览器,并在页面上显示, 但是是通过按钮点击刷新的,而且数据是和html页面一起发过来的,在这里我是数据放到页面数组里, 然后把页面数组发给浏览器,这样会打打浪费网络资源,在处理页面数组时,单片机负载也会很大。 那么有没有只交互数据,不发页面的呢? 今天找了几个小时,这个是有的,用ajax. 为什么要在html页面上实时刷新数据呢? 例如你的硬件设备里面有很多传感器,有温度,湿度等信息。你想让这些数据实时的显示到浏览器上。 主要通过JS的ajax,具体是干啥的我也不清楚。大概就是和http服务器交换数据的。 网上的一个案例: //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(); } 请求数据1.这段代码会使用POST请求发送给服务器, 2.服务器回应的数据会全部保存在xmlhttp.responseText里面 3.然后数据会全部显示在myp上面。 这么一个流程页面上就会显示服务器发来数据了,不过这个是用按键触发的,把它改成定时器触发, 就可以达到实时显示数据了。 我写的案例中有少量修改,也是基于上一个工程修改的。 实际效果: 服务器后台日志 具体实现可参看我写的案例,写的比较lou,最终版本会优化移植到单片机里面去的,所以现在只是实现功能而已, 看得累的实在抱歉。 源码:https://download.csdn.net/download/hes_c/10693523 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |