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页面实时刷新显示服务器数据 的相关文章

  • 修改 Twitter 帖子上可编辑 Div 的内容

    我正在编写一个 chrome 扩展 它可以帮助用户在 Twitter 上输入内容 当在 twitter 上写推文时 twitter 会打开一个可编辑的 div 容器 当用户输入内容时 twitter 大概正在使用某些网络框架 会生成子 di
  • 如何在具有相同值的下拉菜单上触发 jQuery 更改事件

    即使用户选择相同的值 如何每次都触发 jQuery 更改事件 我需要刷新效果 例如如果用户选择Lawyer它会发出警报hello然后用户再次选择Lawyer从下拉菜单中 它应该发出警报hello 我怎样才能实现它 以下是代码 jQuery
  • 在 Chrome 中隐藏 HTML 时间输入字段上的图标

    在 Chrome 中 当您type time 属性到输入框 您会在输入旁边看到一个小图标时钟图标 有没有办法去掉这个小时钟图标 基于这个问题的答案 将日期输入三角形更改为日历图标 https stackoverflow com questi
  • 嵌套 DIV 的类似斑马的 CSS 样式

    我嵌套了 DIV 元素 但我不知道嵌套的级别 我需要每个都有与其父级不同的背景 创建类似斑马的颜色 我只使用两种背景 深色和白色 效果需要类似于在容器中设置奇数和偶数子级的样式 但在我的例子中 子级是嵌套的 我可以使用每个嵌套元素的规则来做
  • 如何使用 jQuery 单击特定链接时打开引导导航选项卡的特定选项卡?

    我是 jquery 和 bootstrap 的新手 所以请考虑我的错误 我已经创建了一个用于登录和注册的 bootstrap 模式 它包含两个导航选项卡 称为登录和注册 我有两个按钮可以弹出相同的模态窗口 但在模态窗口内显示不同的选项卡 每
  • 如果选中复选框则显示 div

    我正在尝试构建类似 WordPress 选项的东西 用于在创建文章时切换字段可见性 我所构建的依赖于 click函数使用相应的字段名称切换父项 我想知道如果选中该复选框 执行此操作的最佳方法是什么 因为如果您选中一个框并重新加载页面 因为它
  • 减小 TinyMCE 文本区域中的行间距

    I am using TinyMCE to provide a rich text editing text editor But the line spacing between the lines is too much I have
  • HTML 表格 - 固定列宽和多个可变列宽

    我必须建立一个有 5 列的表 表格宽度是可变的 内容宽度的 50 有些列包含固定大小的按钮 因此这些列应该有一个固定大小 例如 100px 有些列中有文本 所以我希望这些列具有可变的列宽 例如 Column1 tablewidth sum
  • 选中复选框时如何向文本区域添加值

    我正在使用我刚刚在 SO 上找到的以下函数 该函数可以解决我的问题 只有一个问题是 我有一长串选择列表 当用户选中超过 3 4 个复选框时 某些文本或添加到文本区域的值不再可见 有没有什么方法可以让每次选中一个框时添加到文本区域的文本始终可
  • 防止 HTML 中 A 元素(锚链接)上的制表符停止

    是否可以取消 a href 避免在任何浏览器中被制表符阻止 我想在没有 JavaScript 的情况下做到这一点 一些浏览器支持tabindex 1 属性 但不是全部 因为这不是标准行为 a
  • 动态突出显示时向

    添加项目符号点?

    Update 例子 p Text Text p 在示例中 是否可以选择第二个 文本 单词 p 元素并单击按钮仅动态添加项目符号点到选定的 单词 有没有可能 在一个 p p Text p 突出显示从 p 元素并添加项目符号点到按钮上动态单击的
  • 有没有办法编写屏幕阅读器会忽略的内容?

    我刚刚开发了一个需要视力正常和视障用户都可以访问的页面 内容的某些元素仅与视觉元素相关 因此根本不适用于使用屏幕阅读器的人 例如 链接在新窗口中打开视听演示文稿 但由于我无法控制的情况 窗口的大小被笨拙地调整 因此有一条消息说您应该调整窗口
  • CSS3DObject 始终位于 WebGL Mesh 前面

    我正在混合CSS3D Renderer with WebGL Renderer to add HTML3D 空间中的元素WebGL场景 这CSS3DObject在前面WebGL网格即使WebGL Renderer具有较高的 z index
  • 使用日语“Enter”键进行搜索功能

    我在日语方面遇到了问题 我有一个允许用户搜索数据的表单 当用户输入要搜索的字符串并按 Enter 键时 搜索功能就会执行 我的代码是 formSearch input keyup function event var key event c
  • 将文本大小调整为矩形 在 Canvas HTML5 中调整大小

    我是 Canvas 新手 我正在创建一个网站 以在调整矩形大小时增加文本 我尝试了很多 但没有任何效果 实际上 我希望如果我仅按其宽度调整矩形大小 向左拉伸 向右拉伸 则仅应增加文本宽度而不是字体大小 我已经完成了字体大小 但发现增加孤立文
  • Perl:HTTP::微小删除留下损坏的锚标记

    我编写了一个脚本 该脚本收集从数据库读取的缓冲区内的所有 URL 检查该页面是否仍然存在 并使用 HTTP Tiny 从缓冲区中删除 URL 如果该 URL 无法访问或返回无效 问题是 HTTP Tiny 删除左锚标记 例如此处无效的文本
  • ToggleClass 动画 jQuery?

    我的网站上有一个部分 当用户单击时我希望它展开 我正在使用 jQuerytoggleClass为了这 expandable function e e preventDefault this closest article toggleCla
  • 为什么将 x 和 y 设置为 0 时 svg 文本会消失?

    我刚刚开始阅读有关svg我提出了以下问题 我正在创建一个简单的svg with a text里面如下图所示 从我的阅读中我了解到x and y of the text标签声明文本在标签内的位置svg space 为什么当我同时设置x and
  • 如何检测元素内容何时发生变化

    我正在寻找一种方法来监视元素内动态填充 无页面重新加载 内容 以便我可以将类添加到另一个元素 到目前为止我有这个 HTML div class message container div class messages error span
  • 在 HTML5 iOS 7 / iOS 8 中显示十进制键盘

    经过几个小时的搜索后 我只是有一个简单的问题 是否有可能在网络浏览器输入字段中显示小数键盘 input type number 只显示数字 但我需要在左下角使用逗号或点 我尝试过任何事情 pattern step等等 但没有显示十进制键盘

随机推荐

  • 排序 -- 简单选择排序

    选择排序 思想 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 在这里我是数据放到页面数组里