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 最终将更新的数据不停地更新到网页上。

ESP32-Web-Server 实战编程- 使用 AJAX 自动更新网页内容_第1张图片

需求及功能解析

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

ESP32-Web-Server 实战编程- 使用 AJAX 自动更新网页内容_第2张图片

示例解析

前端代码

前端代码中关于 AJAX 的设计在 index.html 的

后端代码

后端代码建立了响应前端 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 request

    count++;
    return ESP_OK;
}

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

示例效果

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

ESP32-Web-Server 实战编程- 使用 AJAX 自动更新网页内容_第3张图片

讨论

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 编程

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

你可能感兴趣的:(ESP-Web开发,前端,ajax,物联网,服务器,web)