Arduino ESP8266利用AJAX局部动态更新网页内容

以下是一个简化的例子，展示了如何使用Arduino ESP8266与服务器交互，并通过AJAX局部更新网页内容的基本方法。

#include <ESP8266WiFi.h>
#include <WiFiClient.h>
 
const char* ssid     = "your_wifi_ssid";
const char* password = "your_wifi_password";
const char* host = "your_server_host";
const char* path = "/path_to_your_server_endpoint";
 
void setup() {
  Serial.begin(115200);
  WiFi.begin(ssid, password);
 
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  Serial.println("WiFi connected");
}
 
void loop() {
  WiFiClient client;
 
  if (client.connect(host, 80)) {
    Serial.println("connected to server");
    client.println(String("GET ") + path + " HTTP/1.1");
    client.println(String("Host: ") + host);
    client.println("Connection: close");
    client.println();
 
    unsigned long timeout = millis();
    while (client.available() == 0) {
      if (millis() - timeout > 5000) {
        Serial.println(">>> Client Timeout !");
        client.stop();
        return;
      }
    }
 
    String line;
    String content = "";
    while (client.available()) {
      line = client.readStringUntil('\r');
      if (line.startsWith("Content-Length: ")) {
        int contentLength = line.substring(line.lastIndexOf(' ') + 1).toInt();
        while (client.available() < contentLength) {
          delay(1);
        }
        content = client.readStringUntil('\n');
      }
    }
 
    Serial.println("received content:");
    Serial.println(content);
 
    // 假设服务器返回的内容是需要更新的HTML片段
    // 可以通过串口发送给JavaScript处理
    Serial.println("Content-Type: text/html\n");
    Serial.println(content);
 
    client.stop();
  } else {
    Serial.println("connection to server failed");
  }
 
  delay(10000); // 每10秒发送一次请求
}

在这个例子中，Arduino ESP8266连接到WiFi网络，并通过TCP连接到服务器。然后它发送一个HTTP GET请求到服务器指定的路径。服务器处理请求并返回数据，ESP8266接收到数据后通过串口发送给JavaScript运行在浏览器中的代码。JavaScript代码可以使用这些数据来更新页面的指定部分，实现局部动态更新。