ESP32-Web-Server 实战编程- 使用 AJAX 自动更新网页内容

ESP32-Web-Server 实战编程- 使用 AJAX 自动更新网页内容

概述

什么是 AJAX ?

AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)

AJAX 是一种用于创建快速动态网页的技术。

传统的网页(不使用 AJAX)如果需要更新内容,必需重载整个网页。AJAX 可以使网页实现异步更新,即在不重新加载整个网页的情况下,对网页的某部分进行动态地更新。

为什么要使用 AJAX?

“动态地 web服务器”通常更加实用且有趣。比如可以在 ESP32 上实现一个“动态网络服务器”,它用来实时地显示连接的传感器数据(例如温度、湿度、压力、关键事件、GPIO、ADC、DAC等)。

如何实现 AJAX

可以运用 XMLHttpRequest 或新的 Fetch API 与网页服务器进行异步资料交换;这里只使用非常简单的 XMLHttpRequest 来演示这种功能。如下图所示,浏览器打开 HTML 后,HTML 中的 Javascript 将循环执行 AJAX 请求,后台将响应该请求,并将更新的数据返回到 AJAX 请求,AJAX 最终将更新的数据不停地更新到网页上。

在这里插入图片描述

需求及功能解析

本节演示通过 XMLHttpRequest 请求 实现 AJAX 技术,实现在网页自动地实时更新后台采集到的数据。

在这里插入图片描述

示例解析

前端代码

前端代码中关于 AJAX 的设计在 index.html 的 <script> 中。

主要是设计一个定时函数 setInterval(function() 周期性地调用 getPOTval() 来不停地向 URL readPOT发起 XML request,向服务器请求数据。

<script>setInterval(function(){// Call a function repetatively with 2 Second intervalgetPOTval();}, 2000);//2000mSeconds update rate//-------------------------------------------------------function getPOTval(){var POTvalRequest = new XMLHttpRequest(); // 与服务器异步交互数据POTvalRequest.onreadystatechange = function(){if(this.readyState == 4 && this.status == 200){document.getElementById("POTvalue").innerHTML =this.responseText;}};POTvalRequest.open("GET", "readPOT", true);POTvalRequest.send();}//-------------------------------------------------------function help(){var x = document.getElementById("myDIV");var message = "POT connected to ADC0 : 12-bit value (0 ---> 4095)";if (x.innerHTML == "") x.innerHTML = message;else x.innerHTML = "";}
</script>

后端代码

后端代码建立了响应前端 URL "/readPOT" 的响应函数:

static esp_err_t update_state_get_handler(httpd_req_t *req)
{static int count = 1;char temp_str[32] = {0};ESP_LOGI(TAG, "req:%s", req->uri);itoa(count, temp_str, 10);httpd_resp_set_type(req, "text/plane");httpd_resp_set_status(req, HTTPD_200);httpd_resp_sendstr(req, temp_str); //Send value only to client ajax requestcount++;return ESP_OK;
}

为演示方便,这里设置一个计数器 count 来模拟传感器的数据,通过 itoa() 将数值型数据转为字符串发送给浏览器。

示例效果

输入网址,打开网页,就能看到网页自动更新数值:

在这里插入图片描述

讨论

1)在 ESP32 Web 中 AJAX是如何工作的?
我们在服务器上实际创建了两个页面。第一个为正常网页,第二个网页在后台,即AJAX。AJAX 在不见的情况下,悄悄地更新第一个网页上大家看到的数据。

总结

1)本节主要是 AJAX 技术的基础。通过 AJAX 技术可以实现自动在 Web 网页上更新内容,实现“动态网页”。

2)通过 AJAX 技术,可以在 ESP32 上实现一个“动态网络服务器”,用来实时地显示连接的传感器数据(例如温度、湿度、压力、关键事件、GPIO、ADC、DAC等)。

资源链接

1)ESP32-Web-Server ESP-IDF系列博客介绍
2)对应示例的 code 链接 (点击直达代码仓库)

3)下一篇:ESP32-Web-Server编程- WebSocket 编程

(码字不易感谢点赞或收藏)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/183274.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

PHP如何实现邮箱验证

在PHP中&#xff0c;提供了 mail() 函数用于发送邮件。使用该函数需要设置邮件头信息、收件人地址、邮件主题和邮件内容等参数。下面是一个简单的使用示例&#xff1a; $to 收件邮箱; $subject 邮件主题; $message 邮件内容; $from 发件邮箱; $headers "From: $from…

Linux 进程(一)

1 操作系统 概念&#xff1a;任何计算机系统都包含一个基本的程序集合&#xff0c;称为操作系统(OS)。笼统的理解&#xff0c;操作系统包括 内核&#xff08;进程管理&#xff0c;内存管理&#xff0c;文件管理&#xff0c;驱动管理&#xff09; 其他程序&#xff08;例…

linux安装docker(脚本一键安装配置docker)

1、创建脚本 vi initDocker.sh #安装前先更新yum&#xff0c;防止连接镜像失败 yum -y update#卸载系统之前的docker&#xff08;可选择&#xff0c;我这里直接注释了&#xff09; #yum remove docker docker-client docker-client-latest docker-common docker-latest docke…

Go 谈论了解Go语言

一、引言 Go的历史回顾 Go语言&#xff08;通常被称为Go或Golang&#xff09;由Robert Griesemer、Rob Pike和Ken Thompson在2007年开始设计&#xff0c;并于2009年正式公开发布。这三位设计者都曾在贝尔实验室工作&#xff0c;拥有丰富的编程语言和操作系统研究经验。Go的诞生…

android开发:子线程更新UI界面

多线程操作经常希望在子线程更新界面&#xff0c;这样方便调试&#xff0c;但是&#xff0c;但是经常这样做程序就不对劲了&#xff0c;为什么呢&#xff1f;因为为了保证界面流畅&#xff0c;不允许在非UI线程直接操作界面&#xff0c;只能通过一些专门途径进行。另外&#xf…

Wordpress自动定时发布怎么开通-Wordpress怎么自动发布原创文章

在当今数字化时代&#xff0c;博客已经成为许多人分享观点、经验和知识的重要平台。然而&#xff0c;对于博主们来说&#xff0c;每天按时发布一篇又一篇的文章可能是一项具有挑战性的任务。为了解决这个问题&#xff0c;一些创新的工具应运而生&#xff0c;其中包括WordPress的…

vuepress-----4、侧边栏

# 4、侧边栏 # 自动生成侧栏 如果你希望自动生成一个仅仅包含了当前页面标题&#xff08;headers&#xff09;链接的侧边栏&#xff0c;你可以通过 YAML front matter 来实现&#xff1a; --- sidebar: auto ---你也可以通过配置来在所有页面中启用它&#xff1a; // .vuep…

深入探索 Vue 响应式原理:数据驱动视图的奥秘

&#x1f90d; 前端开发工程师&#xff08;主业&#xff09;、技术博主&#xff08;副业&#xff09;、已过CET6 &#x1f368; 阿珊和她的猫_CSDN个人主页 &#x1f560; 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 &#x1f35a; 蓝桥云课签约作者、已在蓝桥云…

Docker快速创建一个单机版的Jenkins实例

谈到 CI/CD&#xff0c;那便少不了这里面的佼佼者 Jenkins&#xff0c;正如 Jenkins 官网说的一样&#xff1a;“Build great things at any scale”&#xff0c;构建伟大&#xff0c;无所不能&#xff01; 话不多说&#xff0c;该篇文章将会带你使用 Docker 快速创建一个单机…

COGVLM论文解读(COGVLM:VISUAL EXPERT FOR LARGE LANGUAGE MODELS)

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、摘要二、引言三、模型方法1、模型思路2、融合公式 四、训练方法总结 前言 2023年5月18日清华&智谱AI发布并开源VisualGLM-6B以来&#xff0c;清华KEG&…

C++多线程-传递普通变量,指针,引用给线程

注意点&#xff1a; 1、传递空间已销毁 2、多线程共享一块内存 3、传递的指针变量的生命周期小于线程 #include <iostream> #include <thread> #include <string> #include <unistd.h>using namespace std;class Para {public:Para(){cout<<…

Linux搭建FTP并安装xrdp,实现Windows系统下利用FileZilla传输文件和远程桌面连接

一、实现FTP文件传输 1、搭建FTP服务器&#xff1a; sudo apt-get install vsftpd sudo service vsftpd status 2、查看vsftpd是否正在运行&#xff0c;并监听21端口 netstat -npl | grep :21 or sudo service vsftpd status # 查看 vsftpd 服务状态 3、配置vsftpd.conf sud…

4.6-容器的端口映射

首先&#xff0c;我们来拉取Nginx的image镜像。 docker pull nginx 接下来我们创建一个Nginx的容器。 docker run --name nginx -d nginx 但是&#xff0c;这样启动nginx容器的话我们没法访问。这个时候怎么办呢&#xff1f;就需要将Nginx这个服务暴露给外面的世界。 这时可以使…

yum命令详解

yum命令详解 文章目录 yum命令详解1. yum介绍2. yum使用说明3. yum命令的常见使用 1. yum介绍 yum&#xff08;全称为Yellow dogUpdater, Modified&#xff09;是一个在Fedora、RedHat以及CentOS中的软件包管理器&#xff0c;基于RPM包管理&#xff0c;能够从指定的服务器自动…

【C++】POCO学习总结(八):通知Notifications和事件Events

【C】郭老二博文之&#xff1a;C目录 1、Notifications和Events的区别 1&#xff09;通知Notifications&#xff1a;如果观察者不知道或不关心事件的来源&#xff0c;则使用通知Notifications。 Poco::NotificationCenter或Poco::NotificationQueue位于源source和目标target之…

【虚拟机】Docker基础 【一】

1.1.部署MySQL 首先&#xff0c;我们利用Docker来安装一个MySQL软件&#xff0c;大家可以对比一下之前传统的安装方式&#xff0c;看看哪个效率更高一些。 如果是利用传统方式部署MySQL&#xff0c;大概的步骤有&#xff1a; 搜索并下载MySQL安装包上传至Linux环境编译和配置…

Camunda 7.x 系列【57】流程设计器

有道无术,术尚可求,有术无道,止于术。 本系列Spring Boot 版本 2.7.9 本系列Camunda 版本 7.19.0 源码地址:https://gitee.com/pearl-organization/camunda-study-demo 文章目录 1. 前言2. bpmn.js2.1 简介2.2 体系结构2.3 演示3. 仿钉钉3.1 钉钉创建流程3.2 实现建议3.2…

洛谷100题DAY8

36.P1416 攻击火星 此题找出规律即可 #include<bits/stdc.h> using namespace std; int n; int main() {cin >> n;cout << max(0, n - 2);return 0; } 37.P1551 亲戚 并查集模板题目 两个人如果使亲戚就合并建立联系&#xff0c;最后进行查找即可 #incl…

python之静态服务器程序开发

文章目录 Python静态Web服务器开发Web静态服务器初识搭建Python自带的静态Web服务器静态Web服务器返回固定页面数据静态Web服务器返回指定页面数据静态Web服务器多任务版静态Web服务器面向对象开发静态Web服务器命令行启动动态绑定端口号 Python静态Web服务器开发 Web静态服务…

【算法萌新闯力扣】:环形链表及环形链表II

力扣题目&#xff1a;环形链表及环形链表II 开篇 今天是备战蓝桥杯的第26天和算法村开营第4天。挑选了链表的黄金关卡与大家分享。 题目一&#xff1a;环形链表 题目链接: 141.环形链表 题目描述 方法一、哈希表 判断是否有环&#xff0c;可以利用哈希表&#xff0c;遍历…