- AJAX 란?
- AJAX는 어떻게 작동합니까?
- AJAX 및 ESP8266 기반 웹 서버를 구축하는 데 필요한 구성 요소
- Ajax 및 ESP8266 웹 서버-회로도
- ESP8266 용 AJAX 기반 웹 서버 코드
많은 IoT 애플리케이션에서 센서 데이터를 지속적으로 모니터링해야하는 상황이 있으며이를 수행하는 가장 간단한 방법은 HTML 웹 페이지를 제공하는 ESP8266 웹 서버를 활성화하는 것입니다. 그러나이 방법론의 문제점은 업데이트 된 센서 데이터를 가져 오려면 웹 브라우저를 특정 시간 간격으로 새로 고쳐야한다는 것입니다. 이것은 비효율적 일뿐만 아니라 다른 작업을 수행 할 수있는 많은 클록 사이클이 필요합니다. 이 문제에 대한 해결책은 "Asynchronous JavaScript and XML"또는 줄여서 AJAX로 알려져 있습니다. AJAX를 사용하면 전체 웹 페이지를 새로 고치지 않고도 실시간 데이터를 모니터링 할 수 있습니다. 이는 시간을 절약 할뿐만 아니라 귀중한 클록 사이클도 절약합니다. 이 기사를 따라 가면 ESP8266에서 AJAX 기반 웹 서버 를 구현하는 방법을 배우게됩니다.
AJAX 란?
앞서 논의했듯이 AJAX 는 "Asynchronous JavaScript and XML"의 약자로, 수반 페이지를 다시로드하지 않고 웹 페이지의 일부를 업데이트하는 데 사용할 수 있습니다. 서버에서 자발적으로 데이터를 요청하고 수신하여이를 수행합니다. AJAX의 기능은 웹 콘텐츠를 비동기 적으로 업데이트하는 것입니다. 즉, 페이지 콘텐츠의 일부만 업데이트해야하는 경우 사용자의 웹 브라우저가 전체 웹 페이지를 새로 고칠 필요가 없습니다.
AJAX의 일상적인 예는 Google의 제안 기능이 될 것입니다. Google 검색 창에 입력하면 Google은 관련 검색 문자열을 제안하기 시작합니다. 이 과정에서 웹 페이지는 다시로드되지 않지만 변경해야하는 정보는 AJAX를 사용하여 백그라운드에서 업데이트됩니다.
AJAX는 어떻게 작동합니까?
AJAX는 다음과 같은 조합을 사용합니다.
- XML (Extensible Markup Language)
- 자바 스크립트와 HTML
- XML (Extensible Markup Language):
XML은 마크 업 언어입니다. XML은 주로 특정 형식의 서버 데이터를 수신하는 데 사용됩니다. 일반 텍스트 형식으로 데이터를받을 수 있지만. 사용자가 웹 페이지를 방문하고 이벤트가 발생하면, 우리의 경우에는 "버튼 누르기"라고합니다. JavaScript는 XMLHttpRequest 객체를 생성 한 다음 웹 브라우저와 웹 서버간에 XML 형식으로 정보를 전송합니다. XMLHttpRequest 객체는 업데이트 된 페이지 데이터에 대한 요청을 웹 서버에 보내고, 서버는 요청을 처리하고, 응답은 서버 측에서 생성되어 브라우저로 다시 전송됩니다. 그런 다음 JavaScript를 사용하여 응답을 처리하고 웹 페이지에 표시합니다..
- 자바 스크립트 및 HTML:
JavaScript는 AJAX에서 업데이트 프로세스를 수행합니다. 업데이트 된 콘텐츠에 대한 요청은 이해할 수 있도록 XML 형식으로 지정되며 JavaScript는 업데이트 된 페이지를 보는 사용자를 위해 콘텐츠를 새로 고칩니다.
AJAX 작동:
위의 다이어그램에서 볼 수 있듯이 AJAX 요청의 경우 브라우저는 자바 스크립트를 사용하여 XMLHttpRequest 를 서버에 보냅니다. 이 개체에는 요청 된 내용을 서버에 알려주는 데이터가 포함됩니다. 서버는 클라이언트 측에서 요청한 데이터로만 응답합니다. 그런 다음 브라우저는 데이터를 수신하고 전체 웹 페이지를 다시로드하는 대신 업데이트해야하는 페이지 부분 만 업데이트합니다.
AJAX 및 ESP8266 기반 웹 서버를 구축하는 데 필요한 구성 요소
AJAX를 처리하는 esp8266의 기능을 보여주기 위해 프로젝트를 구축 중이므로 구성 요소 요구 사항은 매우 적습니다. 대부분의 항목은 지역 취미 상점에서 찾을 수 있습니다.
- NodeMCU X 1
- LM35 온도 센서 X 1
- LED X 1
- 브레드 보드 X 1
- 점퍼 X 4
- 프로그래밍 케이블 X 1
Ajax 및 ESP8266 웹 서버-회로도
AJAX 기반 웹 서버 의 회로도 는 아래와 같습니다.
회로가 매우 간단하기 때문에 설명 할 것이별로 없습니다. 150 Ohms 전류 제한 저항이있는 LED를 ESP8266의 핀 D0에 연결했습니다. 보시다시피 웹 서버를 사용하여 토글 할 수 있습니다. 다음으로 LM35 온도 센서를 통해 온도 값을 읽고 웹 페이지에 업데이트합니다. 온도 센서는 3.3V 레일에서 전원이 공급되며 LM35는 아날로그 센서이므로 ESP8266 보드의 A0 핀을 사용하여 데이터를 측정했습니다. LM35 온도 센서를 처음 접했거나이 아주 멋진 작은 센서에 대해 자세히 알아 보려면 NodeMCU 및 LM35를 사용하는 디지털 온도계에 대한 이전 게시물에서이 센서의 작동에 대해 논의했습니다. 세부 묘사.
ESP8266 용 AJAX 기반 웹 서버 코드
더 진행하기 전에 NodeMCU 웹 서버 가 어떻게 작동 하는지 이해하기 위해 프로그램으로 바로 들어가 보겠습니다. 그러나 그 전에 ESP8266에 대한 Arduino IDE 설정이 있는지 확인하십시오. 설정이 없으면 다음 부분을 수행 할 수 있습니다. 그렇지 않으면이 부분을 건너 뛸 수 있습니다. 웹 서버 및 IoT 기반 프로젝트에 대해 더 자세히 알고 싶다면 이전 게시물을 확인하십시오.