ESP32网页控制二 利用AJAX传输数据流实现动态刷新
AJAX其实非常容易理解,首先浏览器访问服务器就是一次请求,同时浏览器内部也会根据HTML标签定义访问对应的JS、CSS文档、图片等数据这些都是通过HTML定义完成的,AJAX其实就是一个你可以自由访问服务器获取数据并分析数据实现HTML代码动态变化的一种技术工具,例如浏览照片网站滚轮拖到底部过一会页面就实现了新的图片载入其实就是AJAX技术的应用,除了增加网页元素也可以根据收到的信息改变网页的元素。
在正常的网页开发中往往会请求JSON数据来解析实施数据的动态刷新,但是如果应用在ESP32中就不太合适了因为生成JSON数据格式本身就拥有很多无效数据如:、{},所以直接传输字节就非常方便。
下面通过例子实现对ESP32的访问并实时获取遥控器通道数据。
JS代码
ESP32 响应代码
如果直接使用JSON传输我们可以大概预估一下传输数据量,下面是标准格式的一个JSON示例。
一个通道就需要大概20多个字节,而直接使用数据流即便18个通道也就38个字节,所以在ESP32编写浏览器响应时尽量使用字节流响应方式对节省时钟周期十分有效,方便ESP32同时处理其他对实时性高的任务。
下一篇介绍如何生成字节数组发送给ESP32并使用结构体解析浏览器发送回来的设置数据。