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

本文介绍: 1）本节主要是 AJAX 技术的基础。通过 AJAX 技术可以实现自动在 We b 网页上更新内容，实现“动态网页”。2）通过 AJAX 技术，可以在 ESP32 上实现一个“动态网络服务器”，用来实时地显示连接的传感器数据（例如温度、湿度、压力、关键事件、GPIO、ADC、DAC等）。

ESP32-We b-Se r v e r 实战 编程– 使用 AJAX 自动 更新 网页内容

概述

什么是 AJAX ？

AJAX = Async hr on ous Jav aScri p t and XML（异步的 Jav aScri p t 和 XML）。

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

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

为什么要使用 AJAX？

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

如何实现 AJAX

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

在这里插入图片描述

需求及功能 解析

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

在这里插入图片描述

示例 解析

前端 代码

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

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

<script&gt;
  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 &amp;&amp; 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 ---&gt; 4095)";
    if (x.innerHTML == "") x.innerHTML = message;
    else x.innerHTML = "";
  }
</script&gt;

后端代码

后端代码建立了响应前端 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-&gt;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;
}