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 interval
    getPOTval();
  }, 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 request

    count++;
    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 编程

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