7주차_참고 : AJAX(Asynchronous JavaScript and XML) - dhryu60/SmartDevice_2025-1 GitHub Wiki

AJAX(Asynchronous JavaScript and XML)

• 이 기능은 웹페이지를 새로고침하지 않고도 ESP32로부터 센서값(온도, 습도)**을 주기적으로 받아와서 자동으로 웹페이지에 표시하는 데 사용됨.
• 참고 : https://www.youtube.com/watch?v=nKD1atl6cAw

AJAX 기능은 index_html 문자열 안의 <script> 태그 내 JavaScript 코드에서 정의되어 있습니다.

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

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

• 2초(2000ms)마다 내부 함수 실행
• 이 함수 안에서 AJAX 요청을 보냅니다

• AJAX 요청을 생성하는 객체
• 서버와 데이터를 주고받을 수 있도록 도와줍니다

• 서버 응답 상태가 바뀔 때마다 실행되는 콜백 함수
• 다음 조건일 때 응답을 처리합니다:
  • readyState == 4 → 요청 완료
  • status == 200 → 정상 응답(HTTP OK)

• 서버로부터 받은 응답(=센서값)을 <span id="temperature"> 안에 실시간으로 표시

같은 방식으로 습도도 id="humidity" 영역에 표시됩니다.

• /temperature 경로로 비동기 GET 요청 전송
• /humidity도 동일 방식으로 요청됨

server.on("/temperature", HTTP_GET, [](AsyncWebServerRequest *request){
  request->send_P(200, "text/plain", readDHTTemperature().c_str());
});

• 브라우저가 /temperature 요청 시
• ESP32는 readDHTTemperature() 함수를 호출해 센서값을 텍스트로 응답

마찬가지로:

server.on("/humidity", HTTP_GET, [](AsyncWebServerRequest *request){
  request->send_P(200, "text/plain", readDHTHumidity().c_str());
});

• /humidity 요청 시 습도 값 응답

1. 사용자가 http://ESP32_IP/에 접속하면 HTML 페이지가 로드됨
2. HTML 내부 <script>에서 JavaScript가 실행됨
3. AJAX로 /temperature, /humidity로 요청을 반복적으로 전송
4. ESP32가 응답한 센서값을 브라우저가 실시간으로 웹페이지에 표시