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

news2024/11/19 23:15:31

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() 将数值型数据转为字符串发送给浏览器。