ajax - ESP8266同时请求多个HTTP GET

我用ESP8266开始了我的第一个项目。
它是一个温度监视器，显示网络服务器上的数据。
因为我不想手动刷新页面来获取新数据，所以我使用http请求来显示它。
我发送3个不同的请求，一个是当前温度，一个是最高温度，一个是最低温度。
我面临的问题是，数据不会同时刷新，尽管我同时发送所有这些数据。
这是发送请求的代码：

<script>
    function getCurrent() {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        document.getElementById("current").innerHTML =
        this.responseText;
      }
    };
    xhttp.open("GET", "readCurrent", true);
    xhttp.send();
    }

    function getHigh() {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        document.getElementById("high").innerHTML =
        this.responseText;
      }
    };
    xhttp.open("GET", "readHigh", true);
    xhttp.send();
    }

    function getLow() {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        document.getElementById("low").innerHTML =
        this.responseText;
      }
    };
    xhttp.open("GET", "readLow", true);
    xhttp.send();
    }

    setInterval(function() {
      getHigh();
      getLow();
      getCurrent();
    }, 2000);
</script>

这就是处理它们的代码：

float temp;
float hoechst;
float tiefst;

void handleRoot() {
 String s = MAIN_page; //Read HTML contents
 server.send(200, "text/html", s); //Send web page
}

void handleCurrent() {
  float t = temp;
  server.send(200, "text/plane", String(t));
}

void handleHigh() {
  float high = hoechst;
  server.send(200, "text/plane", String(high));
}

void handleLow() {
  float low = tiefst;
  server.send(200, "text/plane", String(low));
}

void setup() {
  [...]
  server.on("/", handleRoot);
  server.on("/readCurrent", handleCurrent);
  server.on("/readHigh", handleHigh);
  server.on("/readLow", handleLow);
  [...]
}

循环只是用这个函数更新温度：

void updateTemperatures() {
  sensor.requestTemperatures();
  yield();
  float low = tiefst;
  float high = hoechst;
  float t = sensor.getTempCByIndex(0);
   if(t < low) {
    low = t;
    } else if(t > high) {
      high = t;
      }
   yield();
   temp = t;
   tiefst = low;
   hoechst = high;
  }

以及处理客户机（server.handleclient（））
所以我的问题是：我怎样才能同时更新数据，或者说ESP8266也能做到这一点？

最佳答案

通过在一个请求中返回所有三个值，可以同时更新数据。
这将是在任何web服务器上实现的方法，更不用说运行在极为有限的处理器（如esp8266）上的服务器了。
您可以使用如下代码同时返回所有三个值：

void handleAll() {
  String results_json = "{ \"temperature\": " + String(temp) + ",", +
                           "\"high\": " + String(hoechst) + "," +
                           "\"low\": " + String(tiefst) + " }";

  server.send(200, "application/json", results_json);
}

这将构成一个json对象，其中包含所有三个值。json是“javascript对象表示法”，javascript很容易组合和分解。
您还需要更新ESP8266 Web服务器代码以添加

server.on("/readAll", handleAll);

通过此更改，您可以消除其他三个/读取处理程序。
你需要更新你的javascript。您只需要在javascript中执行一次调用，将返回的文本转换为javascript对象，然后从中读取三个值中的每一个值，以设置dom中的元素。这是jquery可以为您提供的非常简单的功能。
而且，它是'text/plain'，而不是'text/plane'。
您还可以查看jQuery-它将大大简化您的javascript代码。