ESP8266 WebServer通过AJAX通信异常，无法返回XML文件求助

问题详情 #

• 刚入手ESP8266模块，制作了带三个LED控制按钮的网页，采用XML AJAX + JavaScript与ESP通信。
• ESP可正常连接WiFi并提供网页服务，但无法返回XML文件，按钮点击后无任何响应。
• 本人相关开发经验不足，尚未尝试其他解决方案，现附上ESP代码与网页代码，寻求排查帮助。

ESP代码 #

#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>

const char* ssid = "你的WiFi名称";
const char* password = "你的WiFi密码";

ESP8266WebServer server(80);

// LED引脚定义
const int ledPin1 = D1;
const int ledPin2 = D2;
const int ledPin3 = D3;

void setup() {
  pinMode(ledPin1, OUTPUT);
  pinMode(ledPin2, OUTPUT);
  pinMode(ledPin3, OUTPUT);
  
  Serial.begin(115200);
  WiFi.begin(ssid, password);
  
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  
  Serial.println("\nWiFi已连接");
  Serial.print("IP地址: ");
  Serial.println(WiFi.localIP());
  
  // 响应根路径请求，返回网页
  server.on("/", []() {
    server.send(200, "text/html", webPage);
  });
  
  // 处理LED控制请求，返回XML
  server.on("/ledControl", []() {
    String ledNum = server.arg("led");
    String ledState = server.arg("state");
    
    if (ledNum == "1") {
      digitalWrite(ledPin1, ledState == "on" ? HIGH : LOW);
    } else if (ledNum == "2") {
      digitalWrite(ledPin2, ledState == "on" ? HIGH : LOW);
    } else if (ledNum == "3") {
      digitalWrite(ledPin3, ledState == "on" ? HIGH : LOW);
    }
    
    // 构造XML响应
    String xmlResp = "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<result><status>success</status></result>";
    server.send(200, "text/xml", xmlResp);
  });
  
  server.begin();
}

void loop() {
  server.handleClient();
}

// 网页内容
const char webPage[] PROGMEM = R"rawliteral(
<!DOCTYPE html>
<html>
<head>
    <title>ESP8266 LED控制器</title>
    <script>
        function setLed(led, state) {
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function() {
                if (this.readyState == 4 && this.status == 200) {
                    var xmlDoc = this.responseXML;
                    var status = xmlDoc.getElementsByTagName("status")[0].childNodes[0].nodeValue;
                    console.log("操作状态: " + status);
                }
            };
            xhr.open("GET", "/ledControl?led=" + led + "&state=" + state, true);
            xhr.send();
        }
    </script>
</head>
<body>
    <button onclick="setLed('1', 'on')">LED1 开启</button>
    <button onclick="setLed('1', 'off')">LED1 关闭</button><br><br>
    <button onclick="setLed('2', 'on')">LED2 开启</button>
    <button onclick="setLed('2', 'off')">LED2 关闭</button><br><br>
    <button onclick="setLed('3', 'on')">LED3 开启</button>
    <button onclick="setLed('3', 'off')">LED3 关闭</button>
</body>
</html>
)rawliteral";

网页代码 #

<!DOCTYPE html>
<html>
<head>
    <title>ESP8266 LED控制器</title>
    <script>
        function setLed(led, state) {
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function() {
                if (this.readyState == 4 && this.status == 200) {
                    var xmlDoc = this.responseXML;
                    var status = xmlDoc.getElementsByTagName("status")[0].childNodes[0].nodeValue;
                    console.log("操作状态: " + status);
                }
            };
            xhr.open("GET", "/ledControl?led=" + led + "&state=" + state, true);
            xhr.send();
        }
    </script>
</head>
<body>
    <button onclick="setLed('1', 'on')">LED1 开启</button>
    <button onclick="setLed('1', 'off')">LED1 关闭</button><br><br>
    <button onclick="setLed('2', 'on')">LED2 开启</button>
    <button onclick="setLed('2', 'off')">LED2 关闭</button><br><br>
    <button onclick="setLed('3', 'on')">LED3 开启</button>
    <button onclick="setLed('3', 'off')">LED3 关闭</button>
</body>
</html>

内容的提问来源于stack exchange，提问作者Orlando Dlugoš Čeh