ESP8266使用AJAX技术实现动态更新网页

工程资料上传中

链接为工程文件。
https://download.csdn.net/download/u011993802/33142527

在许多物联网应用中，有些情况下需要连续监控传感器数据，而最简单的方法是通过使用ESP8266 Web服务器来提供HTML网页服务。但是这种方法的问题在于，必须以特定的时间间隔刷新Web浏览器才能获取更新的传感器数据。这不仅效率低下，而且需要很多时钟周期才能执行其他任务。该问题的解决方案称为“Asynchronous JavaScript and XML”或简称AJAX。使用AJAX技术，我们可以监视实时数据而无需刷新整个网页，这不仅节省了时间，而且还节省了宝贵的时钟周期。通过本文，您将学习如何在ESP8266上实现基于AJAX的网络服务器。

什么是AJAX？

如前所述，AJAX表示“Asynchronous JavaScript and XML”，可用于更新网页的一部分，而无需重新加载所需页面。它通过自发地请求和接收来自服务器的数据来实现。 AJAX的功能是异步更新网页内容。这意味着，仅需要更新页面上的一部分内容时，用户的网络浏览器就无需刷新整个网页。

AJAX的日常示例就是Google的建议功能，当我们在Google搜索栏中键入内容时，Google会开始建议相关的搜索字符串。在此过程中，网页不会重新加载，但是需要更改的信息会使用AJAX在后台更新。

AJAX是如何工作的？

AJAX使用两种方法的组合：XML（可扩展标记语言）和 JavaScript和HTML。

XML (Extensible Markup Language)

XML是一种标记语言。 XML主要用于接收具有特定格式的服务器数据。尽管它可以接收纯文本形式的数据。当用户访问网页并发生事件（在我们的例子中是“按下按钮”）时，JavaScript创建一个XMLHttpRequest对象，该对象随后以XML格式在网络浏览器和网络服务器之间传输信息。 XMLHttpRequest对象将对更新后的页面数据的请求发送到Web服务器，服务器处理该请求，在服务器端创建一个响应，然后将其发送回浏览器，然后浏览器使用JavaScript处理该响应并将其显示在网页上。

JavaScript和HTML

JavaScript在AJAX中执行更新过程。对更新内容的请求以XML进行格式化，以使其易于理解，然后JavaScript刷新了该内容，供用户查看更新的页面。

如上图所示，对于AJAX请求，浏览器使用JavaScript将XMLHttpRequest发送到服务器。该对象包含告诉服务器正在请求什么的数据。服务器仅响应从客户端请求的数据。然后，浏览器接收数据，仅更新页面中需要更新的部分，而不是重新加载整个网页。

#include <ESP8266WiFi.h>
#include <WiFiClient.h>
#include <ESP8266WebServer.h>
#include "index.h" //Html网页
const char *ssid = "ssid ";//WIFI账号
const char *password = "password ";//WIFI密码
ESP8266WebServer server(80);//开启web服务器

void handleRoot()//根网页
{
    String s = webpage;
    server.send(200, "text/html", s);
}
void sensor_data()//获取数据
{
    int a = analogRead(A0);
    int temp = a / 4.35;
    String sensor_value = String(temp);
    server.send(200, "text/plane", sensor_value);
}

void led_control()//led灯控制
{
    String state = "OFF";
    String act_state = server.arg("state");
    if (act_state == "1")
    {
        digitalWrite(LED_BUILTIN, HIGH); //LED ON
        state = "ON";
    }
    else
    {
        digitalWrite(LED_BUILTIN, LOW); //LED OFF
        state = "OFF";
    }
    server.send(200, "text/plane", state);
}

void setup()//设置
{
    pinMode(LED_BUILTIN, OUTPUT);//led灯设置为输出
    WiFi.begin(ssid, password);//连接WIFI
    Serial.begin(115200);//打开串口
    while (WiFi.status() != WL_CONNECTED)
    {
        Serial.println("Connecting...");
    }

    Serial.println("");
    Serial.print("Connected to ");
    Serial.println(ssid);
    Serial.print("IP address: ");
    Serial.println(WiFi.localIP());

    server.on("/", handleRoot);//加载网页
    server.on("/led_set", led_control);//绑定
    server.on("/adcread", sensor_data);//绑定
    server.begin();
}

void loop()
{
    // put your main code here, to run repeatedly:
    server.handleClient();
//此函数主要作用是检查有没有客户端设备通过网络向ESP8266网络服务器发送请求。
//每一次handleClient`函数被调用时，ESP8266网络服务器都会检查一下是否有客户端发送HTTP请求。
//因此建议将该函数放在loop函数中，从而确保它能经常被调用。
}