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

2023-05-16

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

但是是通过按钮点击刷新的,而且数据是和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

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

html页面实时刷新显示服务器数据 的相关文章

  • 如何检查元素的内容是否为空,如果是,则在 jquery 中删除该元素

    我目前正在尝试选择某个 div 内没有内容的任何 h2 元素并将其删除 这是我的 html 代码 div class skipToContainer h2 class vidSkipTo Hello h2 h2 class vidSkipT
  • c# 如何生成锦标赛括号 HTML 表

    所以我已经被这个问题困扰了三个星期 但我一生都无法弄清楚 我想做的是使用表格获得这种输出 演示 http www esl world net masters season6 hanover sc2 playoffs rankings htt
  • 如何将当前元素传递给 Knockout.js 绑定中的 Javascript 函数?

    因此 我尝试根据是否选中子复选框 使用 Knockout js 将类添加到元素 为此 我试图通过this作为我的函数的参数 目前 我的精简 DOM 结构如下 tr td td tr
  • 让登录更安全

    我已使用此代码进行管理员登录 仅当用户输入正确的用户名和密码时才应打开loginhome php 但后来我意识到这根本不安全 任何人都可以直接访问 mywebsite loginhome php 而无需登录 注销后 可以使用后退按钮打开 l
  • 数字和小数的输入掩码

    在测试我的程序后 我发现了以下错误 我在 sqlserver 中的表包含 价格数字 6 2 我的程序的用户输入价格 555 00 就很好了 但是当他输入 555555 时 这是错误的 所以我需要指定掩码 其中尾数是可选的 0 到 999 小
  • 使用 JQuery 预填充选择字段的下拉选项验证

    我有这个 JQuery 片段来防止选择已在另一个字段中选择的下拉选项 var coll select name service on change function coll each function var val this value
  • 两个 Div 之间的固定宽度间隙

    有谁知道如何修复两个 div 之间的间隙 我有一个主要内容 Div 里面有两个带有图片的 Div 视图的宽度为 768 像素 当我开始拉伸视图时 两张图片开始相互远离 但理想情况下 主要内容 Div 应该在周围有空白的情况下拉伸 并且图片之
  • 通过 JavaScript 检测浏览器换行

    我需要 javascript 来检测每个浏览器包装的文本行并将其包装到 span class line 我读过一些关于测量每个单词的 y 轴的文章 但还没有看到可靠的解决方案 这是我到目前为止所拥有的 看到它Jsfiddle http js
  • 使用纯javascript选择最接近id的id

    div div TEXT div div div div TEXT div div div TEXT div 如何选择最接近div1的div2 关注w3docs https www w3 org TR html4 struct global
  • Flexbox 不适用于 iPad 和 Safari [重复]

    这个问题在这里已经有答案了 我在网站上使用 Flexbox 但它在 iPad Air iPad 3 和 Safari PC 上崩溃 设计和代码与此 codepen 类似 http codepen io anon pen xwJzEg htt
  • 如何检测浏览器是否支持自定义元素

    我正在查看 Modernizr 它应该有助于功能检测 这应该可以帮助确定您的网站是否与给定的 Web 浏览器兼容 但我没有看到任何表明我可以使用它来检测自定义 HTML 的内容我们在内容中创建和定义的元素 如果不是 Modernizr 我如
  • 如何重定向到 instagram://user?username={username}

    我的 html 页面上有这个链接 可以在特定用户上打开 Instagram 应用程序 a href Link to Instagram Profile a 我一直在寻找自动运行 url instagram user username USE
  • 如何将背景图像仅应用于一个反应页面而不是整个应用程序?

    注册页面示例 register background image linear gradient to right ff5722 0 ff9800 100 margin top 150px important div div div div
  • 标签获取 href 值

    我有以下 html div class threeimages a img alt Australia src Images Services 20button tcm7 9688 gif a div class text h2 a hre
  • 如何将 Google Charts 与 Vue.js 库一起使用?

    我正在尝试使用 Vue js 库使用 Google Charts 制作图表 但我不知道如何添加到 div 这是我尝试做的 这是如何使用普通 javascript 添加图表 这是文档的代码示例 https developers google
  • HTML 中部分着色的阿拉伯语单词

    我不会说阿拉伯语 但我需要我们网站上对阿拉伯语的具体支持 我需要将部分阿拉伯语单词放在 span 与单词其他部分的风格不同 当我输入两个字符时 and 它们被组合成word 但是当我使用 HTML 标记时 span span 这些字母在输出
  • 动态img(或视频)标签根本不加载资源,HTTP请求处于“待处理”状态

    我尝试使用以下方法在 Web 应用程序上加载资源时遇到一些问题img or videoHTML 标签 我在我的应用程序中使用 Angular 并动态设置src的参数img标签 使用ng src src 指示 没有那么多图像和资源需要加载 在
  • 提交表单并重定向页面

    我在 SO 上看到了很多与此相关的其他问题 但没有一个对我有用 我正在尝试提交POST表单 然后将用户重定向到另一个页面 但我无法同时实现这两种情况 我可以获取重定向或帖子 但不能同时获取两者 这是我现在所拥有的
  • 避免响应式页面的重复内容

    我目前正在做一个涉及响应式设计的项目 整个布局应该使用HTML和CSS来实现 我知道可以使用 java 脚本将内容从一个列布局移动到另一列布局 而无需复制内容 但是使用 HTML 和 CSS 是否可以实现相同的效果 以下面的例子为例 它会在
  • CSS 是否有不等于选择器?

    CSS中有类似 不等于 的东西吗 例如 我有以下代码 input 但对于某些输入 我需要将其作废 我想通过将类 reset 添加到输入标签来做到这一点 例如

随机推荐

  • 排序 -- 简单选择排序

    选择排序 思想 xff1a 每一趟 n i 43 1 xff08 i 61 1 2 3 n 1 xff09 个记录中选择关键字最小的记录作为有序序列的第i个记录 简单选择排序 xff1a 通过n i次关键字间的比较 xff0c 从n i 4
  • HDOJ 1106 排序

    题目地址 xff1a http acm hdu edu cn showproblem php pid 61 1106 Problem xff1a 输入一行数字 xff0c 如果我们把这行数字中的 5 都看成空格 xff0c 那么就得到一行用
  • Jetson Xavier、Jetson TX2、 1080(Ti)、2080显卡运行深度学习模型性能对比(英伟达开发平台VS常用显卡)

    前言 xff1a 英伟达的Jetson TX2使得很多人认为深度学习模型终于可以像嵌入式开发平台那样做到小型化了 xff0c 不用再跑在高配计算机或者服务器上面了 xff0c 但是实际上Jetson TX2开发板的性能和深度学习常用到的10
  • 独家!了不起的UP系列产品,不一样的开发板 — UP Squared Board(二)

    UP 系列家族的成员 xff0c 经过团队经年累月的精心研发 xff0c 产品已不断丰富起来 先后开发出了第二代产品UP Squared 与第一代产品UP Board相比 xff0c 拥有 高性能低功耗的 UP Squared 似乎更令人兴
  • STM32连接--OneNET,阿里云(MQTT协议)详细教程

    x1f495 对于物联网工程 xff0c 不可或缺的必然是连接上云 xff0c 今天本人总结了上云经验 xff0c 希望对大家起到帮助哦 有用的话记得点赞收藏哦 关于如何连接OneNET OneNET https open iot 1008
  • HTTP Digest接入方式鉴权认证流程

    HTTP Digest接入方式鉴权认证流程 一 摘要认证原理 摘要认证与基础认证的工作原理很相似 xff0c 用户先发出一个没有认证证书的请求 xff0c Web服务器回复一个带有WWW Authenticate头的响应 xff0c 指明访
  • 6.2随笔

    今天打牛客 xff0c 用python写了一题 xff0c 结果发现用空格隔开的两个数不知道怎么输入 代码 xff1a n span class token punctuation span m span class token opera
  • 蓝牙Mesh简介

    蓝牙mesh简介 蓝牙Mesh的基本概念 蓝牙Mesh是2017年7月蓝牙技术联盟 xff08 Bluetooth SIG xff09 正式推出的蓝牙设备组网标准 我们知道蓝牙ble设备可以与其他设备建立GATT连接 xff0c 然后进行
  • 蓝牙Mesh的基本概念

    蓝牙mesh简介 蓝牙Mesh的基本概念 蓝牙Mesh是基于ble广播进行消息传递的一种蓝牙组网通讯网络 xff0c 是一种采用网络洪泛的方式无中心 无路由的对等网络 以实现蓝牙设备与蓝牙设备之间的多对多通讯 xff0c 使蓝牙在物联网智能
  • JLink Commander调试方法

    JLink Commander调试方法 1 背景 目前开发中常用的调试手段主要有串口 IO口输出作为调试方式 目前串口的限制较多 xff0c 有些硬件不太方便接串口或者一些实时的数据 xff0c 当时没有接串口则无法实时获取调试信息 IO调
  • 物联网安全系列 - 非对称加密算法 ECDH

    非对称加密算法 ECDH 背景 之前的章节讲到了对称加密算法AES xff0c 发送方和接收方需要使用相同的密钥进行通讯 xff0c 但是发送方怎么将密钥安全的发送给接收方 xff1f 这是一个问题 密钥分配问题 对称加密算法中 xff0c
  • 【开源】一款PyQT+Pyserial开发的串口调试工具

    开源 PyQT 43 Pyserial开发的串口调试工具 串口调试工具是我们做嵌入式开发常用的工具 xff0c 市面上已经有很多串口调试工具了 xff0c 博主写这款串口调试工具一方面是为了学习Python PyQT Pyserial 相关
  • 【Matter】解密Matter协议(一)--- 什么是Matter协议?

    1 什么是Matter协议 xff1f 目前的智能家居行业使用解决方案众多 xff0c 相互之间隔离严重 xff0c 有WiFi 蓝牙 ZigBee 蜂窝或者有线等等不同通讯协议的设备 不仅不同协议之间的设备不能互通 xff0c 而且连相同
  • 【蓝牙系列】蓝牙5.4到底更新了什么?(1)--- PAwR

    蓝牙系列 蓝牙5 4到底更新了什么 xff08 1 xff09 PAwR 一 背景 蓝牙技术联盟最近发布了蓝牙5 4的核心规范 xff0c 蓝牙5 4规范的主要改进之一就是实现了单个接入点与数千个终端节点进行双向无连接通信 xff0c 这一
  • UP Squared Board,工业级创新开发板,为您的物联网应用注入升级能量

    研扬科技自推出UP Board xff08 世界首创 Intel 平台信用卡大小开发板 xff09 以来 xff0c 便成功于业界打开名号 xff0c 后续 xff0c 研扬持续开发 UP 系列产品 xff0c 至今 xff0c 除了 UP
  • 【蓝牙系列】蓝牙5.4到底更新了什么(2)

    蓝牙系列 蓝牙5 4到底更新了什么 xff08 2 xff09 一 背景 上一篇文章讲了蓝牙5 4的PAwR特征 xff0c 非常适合应用在电子货架标签 xff08 ESL xff09 领域 xff0c 但是实际应用场景中看 xff0c 只
  • 【转载】【Nordic博文分享系列】详解Zephyr设备树(DeviceTree)与驱动模型

    详解Zephyr设备树 xff08 DeviceTree xff09 与驱动模型 转载自nordic半导体微信公众号 1 前言 Nordic最新的开发包NCS xff08 nRF Connect SDK xff09 相对于原来的nRF5 S
  • 感受一下SPL06气压计+APM三阶互补的高度融合

    不得不说 xff0c spl06气压计很强 xff0c 原始数据也比较干净 xff0c 短时间可以保持在30cm内浮动 xff0c 滤波后在10cm内浮动 就是这么夸张 使用APM的三阶互补滤波融合出 高度 xff0c 速度 xff0c 效
  • 6种串口协议的实现

    串口协议开发 以下解析范式都是采用数据队列的形似来存储 xff0c 并且根据设备运行速度差异 xff0c 还需增加数据包队列来存储解析完毕的数据包 1 范式一 固定长度 无校验 0x6B 20字节 0xB6 上面数据中有一个帧头0x6B x
  • html页面实时刷新显示服务器数据

    在上一篇中我说到浏览器和服务器交互数据 xff0c 是实现了服务器发数据给浏览器 xff0c 并在页面上显示 xff0c 但是是通过按钮点击刷新的 xff0c 而且数据是和html页面一起发过来的 xff0c 在这里我是数据放到页面数组里