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

  • 当名称是数组时如何使用 Javascript 修改 HTML Select

    我有两个同名的 html select 对象 它们是具有不同索引的数组 我想做的是 如果从类别 0 选择元素中选择 关闭 我想禁用类别 1 元素 我一直在尝试使用 document getElementsByName 但无法弄清楚如何专门针
  • 图像仅在 iPhone x 上拉伸

    我目前正在设计和构建一个 html 和 css 网站 遇到了一个小问题 我使用 chrome 开发工具检查了响应能力 根据手机和平板电脑的大小调整窗口大小 一切看起来都很好 然而 现在我在 iPhone X 上检查了该网站 图像全部垂直拉伸
  • ExitFullScreen 不起作用 + 无论如何要按键盘单击按钮?

    我的浏览器 Google Chrome 版本 33 0 1750 154 m Script function exitFullscreen var element document documentElement if element mo
  • iPad 2 的 HTML5 源元素错误是否已修复?

    根据这个页面 http camendesign com code video for everybody webm http camendesign com code video for everybody webm 第一个 iPad 有一
  • 在 Apache 服务器上将特定的 .htm 页面处理为 .php [重复]

    这个问题在这里已经有答案了 我正在为 Apache 服务器编程 并且只需要将一个特定的 html 页面 例如 first htm 作为 PHP 脚本进行处理 可以设置吗 SetHandler http httpd apache org do
  • 更改 Google Colab Markdown 文本中的字体样式

    这可以改变 Colab 中 Markdown 的字体样式吗 我编写了这段 CSS 代码 但由于它不起作用 我不知道如何使用它 或者是否可能 该代码完美地工作在html文件但无法在 Colab 上运行
  • 浏览器正在加载两张图像 - 一张用于 srcset,一张用于 src(Chrome 41 等)

    我正在开发的网页上使用 srcset 属性 img src img picture 820x496 jpg 如果我检查页面加载了哪些资源 我会发现 Chrome 41 以及使用 polyfill 的 FF 以及 Safari 7 总是加载图
  • 快速响应的交互式图表/图形:SVG、Canvas 还是其他?

    我正在尝试选择正确的技术来更新一个项目 该项目基本上在可缩放 可平移的图表中渲染数千个点 当前使用 Protovis 的实现性能不佳 在这里查看 http www planethunters org classify http www pl
  • 使用 jQuery 按标题选择 div

    我有一个带有 div 的网页 其中包含其他几个没有关联 ID 的 div div div title jhon style width 8px height 9px div div title carl style width 8px he
  • 移动网站“WhatsApp”按钮可将消息发送至特定号码

    可以定制移动网站 以允许用户将 WhatsApp 中预先填写的消息分享给手动选择的联系人 如所给出的here https faq whatsapp com en android 28000012它是使用自定义 URL 方案完成的 一个例子
  • 如何在浏览器中模拟纬度和经度值(用于地理位置测试)?

    我正在开发一个网络应用程序 它要求我在浏览器中模拟纬度和经度值以进行地理位置测试 有人有测试基于地理定位的应用程序的经验吗 提前致谢 伪造地理位置 您想要在 Firefox 中伪造您的位置的原因有很多 一个很好的理由是在没有无线局域网卡的计
  • 将无序列表转换为目录

    参考这个小提琴 http jsfiddle net exGnZ http jsfiddle net exGnZ 你好 我正在尝试用无序列表和前导点重现目录 不幸的是 当内容很长时 格式就会崩溃 有谁知道如何让下图中的第二章与点出现在同一行
  • 创建全屏 iframe

    我目前正在研究 XSS 攻击 目的是在客户端演示中使用它们 我是渗透测试员 我编写了一个工具 该工具将托管网站登录页面的恶意版本 获取用户名和密码 然后将受害者重定向回原始网站 然而 我一直在尝试使用 iframe 来让它工作 因为它看起来
  • 如何使用 :nth-child() 选择所有子项中的所有其他

    我正在开发一个评论系统 我需要拥有其他所有孩子 div 甚至是第一个孩子的孩子 用 CSS 选择 例如 假设我有这个标记 为了简单起见 省略了不需要的结束标签 div class comment div class comment div
  • 与 PHP 相比,Python 与 HTML 的“流畅”程度如何?

    我正在考虑从使用 PHP 切换到使用 Python 来开发 Web 应用程序 但我想知道 Python 是否像 PHP 一样擅长在 HTML 中穿插 本质上 我发现它使用起来非常简单 直观将 PHP 放在我想要的位置 然后可以随意安排 组织
  • 使用 VSCode 的 EJS 文件缩进错误

    我在 VSCode 上遇到 EJS 文件问题 每次保存文件时 格式化程序都会应用错误的缩进 在每个 EJS 标识符下方 下一行向右移动 缺少正确的垂直对齐 我使用 ejs 的 HTML 格式并安装了 DigitalBrainstem 的 E
  • 平均分配固定大小容器的空间。 Flexbox 的案例?

    如何设计 HTML CSS 结构 将固定大小的容器水平分成三部分 第一部分的高度应与其内容需求一样高 第二部分和第三部分将共享剩余的空间五五十 无论它们的内容如何 如果其内容的大小超过此限制 则该部分应该是可滚动的 它的 HTML 部分很简
  • 为什么内部 DIV 会溢出到外部 DIV 之外?

    我已经远离 HTML 和 CSS 很久了 找不到这个简单问题的解决方案 我有一个 div 位于另一个 div 中 外层黑色 内层橙色 我的 HTML 和 CSS 是 outer position fixed width 30 height
  • 文件缓存:查询字符串与上次修改时间?

    我正在研究缓存网站资源的方法 并注意到大多数与我类似的网站都使用查询字符串来覆盖缓存 例如 css style css v 124942823 后来 我注意到每当我保存 style css 文件时 最后修改的标头都会 更新 使得查询字符串变
  • HTML5 地理定位 - 在 iOS 上无法始终工作

    目前正在使用 HTML5 地理定位 我已经在所有网络浏览器上测试了它 它似乎工作正常 然而 当我在 iPad 上测试地理定位时 它在 iPad mini 上始终有效 但当我将其放在更大的 iPad iPad 2 上时 位置似乎并不总是有效

随机推荐

  • 企业发放的奖金根据利润提成。利润低于或等于100000元的,奖金可提10%; 利润高于100000元,低于200000元(100000<I≤200000)时,低于100000元的部分按10%提成,高于

    企业发放的奖金根据利润提成 利润低于或等于100000元的 xff0c 奖金可提10 利润高于100000元 xff0c 低于200000元 xff08 100000 lt I 200000 xff09 时 xff0c 低于100000元的
  • 用c语言实现辗转相除法(求两个数最大公因数的方法)

    首先解释辗转相除法的基本原理 假如有两个数a和b xff0c 也假设他们的最大公因数是c 那么a b都可以被c整除 xff0c 所以a和b之间必定相差c的整数倍 此时同理a b也是c的整数倍 接下来是解释这句话的 xff09 因为a b相当
  • nginx 日志解析

    Nginx是一个高性能的HTTP和反向代理服务器 Nginx access日志记录了web应用的访问记录 大致记录了访问方式 xff08 POST GET xff09 客户端IP 远程用户 请求时间 请求状态码 访问host地址 请求页面大
  • ContentObserver 内容改变到事件触发

    Setting 改变内容 PhoneWindowManager class SettingsObserver extends ContentObserver SettingsObserver Handler handler super ha
  • 【Python】错误:ModuleNotFoundError: No module named 'PIL'

    Python 错误 xff1a ModuleNotFoundError No module named PIL pycharm 错误 xff1a ModuleNotFoundError No module named PIL 导入模块 xf
  • IDEA设置自定义背景图

    IDEA是支持自定义背景图片的 今天在这里给大家分享一个超级简单的方法 第一步 打开idea的settings 在输入框搜索Set Background Image 第二步 右键Set Background Image选择第一个Add Ke
  • Jeston TX2-更换软件源

    1 备份原始的软件源 sudo cp etc apt sources list etc apt sources list back 2 更换软件源 输入 sudo gedit etc apt sources list 打开文件 xff0c
  • Win10安装Anaconda勾选添加环境变量后无法正常开机

    上文说到在安装Anaconda的时候 xff0c 有一步询问是否自动添加环境变量 xff0c 系统提示不推荐勾选 xff0c 但是笔者当时并不知道勾选了会出现什么样的问题 xff0c 所以尝试了一下 xff0c 勾选之后完成后面的安装 xf
  • Qt串口发送大量数据后无法接受和发送问题

    版本5 9 使用的qt官方库 xff0c 初始化什么的就不多介绍了 serialport 使用方式 xff0c 接收使用的槽函数 xff0c 如下 串口连接信号和槽 QObject connect amp qtCOM amp QSerial
  • QT使用QListWidget实现可拖拽列表

    使用自带的ListWidget控件 xff0c 实现简单 xff0c 就几行代码 xff0c 先看效果 xff1a 1 首先页面布局 xff0c 效果如下 1 1 添加一个listwidget 两个按钮 1 2 listwidget设置一下
  • 从0使用TCP手撸http服务器六

    html模板设计 xff1a 上篇我们说到通过路由去返回不同的html页面 xff0c 如果每一个页面都是一个数组的话 xff0c 那么我们可能需要很多数组 xff0c 里面很多内容都是一样的 xff0c 这样子会浪费我们单片机很多flas
  • 移植使用nr_micro_shell

    1 介绍 在使用linux和win系统的时候大家看到命令行也是很熟悉的了 xff0c 大家的第一个hello程序应该都是控制台程序 xff0c 在系统层面我们可以使用命令行操作我们的pc xff0c 那么在单片机里面通过串口怎么用命令操作单
  • 字符串——C++拼接多个字符串

    拼接多个字符串在C 43 43 的可以通过strcpy s 和srtcat s实现 xff0c 如 xff1a span class token keyword int span span class token function main
  • 使用VS CODE测试nr_micro_shell

    上篇说到使用dev c 43 43 来编译nr micro shell xff0c 整体还是很方便的 xff0c 不要写任何命令和文件就能完成编译 xff0c 但是dev c 43 43 这个工具并不是很好用 xff0c 今天使用VS CO
  • Arduino用esp8266WiFi模块连接到服务器

    昨天用串口工具测试了一波esp8266WiFi模块连接云服务 没有问题 今天我决定用芯片来控制它 xff0c 本来想用51 xff0c 后面感觉太lou xff0c 又决定要stm32 这个感觉不错 xff0c 但是32芯片查资料确实麻烦
  • 单片机用AD测量电池电压的值

    单片机的引脚最大输入电压一般为3 3V或者5 0V xff0c 电流是25ma xff0c 40ma 而电池一般有3 3V 36V不等 xff0c 电流也是好几A xff0c 超过5 0的电池一接到单片机 AD口 xff0c 可能和三星手机
  • stm32中pwm频率和占空比设置

    对于72M频率来说 xff0c 计算pwm频率是 xff1a 频率 xff1a Fpwm 61 72M arr 43 1 psc 43 1 单位 xff1a Hz 占空比 xff1a duty circle 61 TIM3 gt CCR1
  • stm32最简单的实现BootLoader

    BootLoader大家应该都知道是干什么的 xff0c 简单的来说就是程序开始运行前的一段程序 在成熟的产品中 xff0c 通常都是采用BootLoader方式来升级产品的程序 也就是IAP升级 在了解完基本的实现原理后 xff0c 可以
  • c语言编写http服务器

    一直想弄一下http服务器 xff0c 一直没有深入的去看http协议 昨天研究了一天 xff0c 查看源码和优化 xff0c 终于实现了 也稍微的理解了一下http协议 身为一个嵌入式工程师 xff0c 需要了解http协议吗 xff1f
  • html页面实时刷新显示服务器数据

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