- Wat is AJAX?
- Hoe AJAX werkt?
- Componenten die nodig zijn om de op AJAX en ESP8266 gebaseerde webserver te bouwen
- Ajax en ESP8266 webserver - schakelschema
- AJAX-gebaseerde webservercode voor ESP8266
In veel IoT-toepassingen zijn er situaties waarin de sensorgegevens continu moeten worden bewaakt, en de eenvoudigste manier om dat te doen is door een ESP8266-webserver in te schakelen die een HTML-webpagina bedient; maar het probleem met deze methodologie is dat de webbrowser met een bepaald tijdsinterval moet worden vernieuwd om bijgewerkte sensorgegevens te krijgen. Dit is niet alleen inefficiënt, maar kost ook veel klokcycli waarbij andere taken kunnen worden uitgevoerd. De oplossing voor dit probleem staat bekend als "Asynchrone JavaScript en XML" of afgekort AJAX. Met AJAX kunnen we real-time gegevens monitoren zonder de hele webpagina te verversen, dit bespaart niet alleen tijd, maar het bespaart ook kostbare klokcycli. Volg verder en in dit artikel leert u hoe u een op AJAX gebaseerde webserver op ESP8266 kunt implementeren.
Wat is AJAX?
Zoals we eerder hebben besproken, staat AJAX voor "Asynchronous JavaScript and XML" dat kan worden gebruikt om een deel van de webpagina bij te werken zonder de betreffende pagina opnieuw te laden. Het doet dat door spontaan gegevens van de server op te vragen en te ontvangen. De functie van AJAX is om webinhoud asynchroon bij te werken. Dit betekent dat de webbrowser van een gebruiker niet een hele webpagina hoeft te vernieuwen als slechts een deel van de inhoud op de pagina hoeft te worden bijgewerkt.
Een alledaags voorbeeld van AJAX is de suggestiefunctie van Google, terwijl we in de Google-zoekbalk typen, begint Google gerelateerde zoekreeksen voor te stellen. Tijdens dit proces wordt de webpagina niet opnieuw geladen, maar wordt de informatie die moet worden gewijzigd op de achtergrond bijgewerkt met AJAX.
Hoe AJAX werkt?
AJAX gebruikt alleen een combinatie van-
- XML (Extensible Markup Language)
- JavaScript en HTML
- XML (Extensible Markup Language):
XML is een opmaaktaal. XML wordt meestal gebruikt voor het ontvangen van servergegevens met een specifiek formaat. Hoewel het gegevens kan ontvangen in de vorm van platte tekst. Wanneer een gebruiker een webpagina bezoekt en zich een gebeurtenis voordoet, in ons geval is het een "druk op een knop", maakt de JavaScript-code een XMLHttpRequest- object, dat vervolgens informatie in XML-indeling overbrengt tussen een webbrowser en een webserver. Het XMLHttpRequest-object stuurt een verzoek om bijgewerkte paginagegevens naar de webserver, de server verwerkt het verzoek, een antwoord wordt aan de serverzijde aangemaakt en teruggestuurd naar de browser, die vervolgens JavaScript gebruikt om het antwoord te verwerken en op de webpagina weer te geven.
- JavaScript en HTML:
JavaScript voert het updateproces uit in AJAX. Het verzoek om bijgewerkte inhoud is opgemaakt in XML om het begrijpelijk te maken, en JavaScript vernieuwt de inhoud voor de gebruiker die de bijgewerkte pagina bekijkt.
AJAX Werken:
Zoals weergegeven in het bovenstaande diagram, stuurt de browser voor een AJAX-verzoek een XMLHttpRequest naar de server met behulp van javascript. Dit object bevat gegevens die de server vertellen wat er wordt gevraagd. De server reageert met alleen de gegevens die aan de clientzijde zijn opgevraagd. Vervolgens ontvangt de browser de gegevens, werkt alleen het gedeelte van de pagina bij dat moet worden bijgewerkt in plaats van de hele webpagina opnieuw te laden.
Componenten die nodig zijn om de op AJAX en ESP8266 gebaseerde webserver te bouwen
Aangezien we het project aan het bouwen zijn om te demonstreren dat esp8266 in staat is om AJAX aan te kunnen, is de componentvereiste erg minuscuul, je kunt de meeste daarvan vinden in je plaatselijke hobbywinkel.
- NodeMCU X 1
- LM35 temperatuursensor X 1
- Leiden X 1
- Breadboard X 1
- Truien X 4
- Programmeerkabel X 1
Ajax en ESP8266 webserver - schakelschema
Het schakelschema voor de op AJAX gebaseerde webserver wordt hieronder weergegeven.
Omdat het circuit heel eenvoudig is, valt er niet veel over uit te leggen. We hebben een LED met een stroombegrenzingsweerstand van 150 Ohm aangesloten op de Pin D0 van de ESP8266, zoals u zult zien, kunnen we deze omschakelen met behulp van de webserver. Vervolgens hebben we onze LM35-temperatuursensor waarmee we de temperatuurwaarde zullen aflezen en deze naar de webpagina zullen bijwerken. De temperatuursensor wordt gevoed vanaf de 3.3V-rail en aangezien de LM35 een analoge sensor is, hebben we de A0-pin van het ESP8266-bord gebruikt om de gegevens te meten. als je de LM35-temperatuursensor voor het eerst bent tegengekomen, of als je meer wilt weten over deze erg coole kleine sensor, kun je ons vorige bericht bekijken over Digitale thermometer met NodeMCU en LM35, waar we de werking van deze sensor in detail.
AJAX-gebaseerde webservercode voor ESP8266
Voordat we verder gaan, duiken we meteen in het programma om te begrijpen hoe onze NodeMCU-webserver zal werken. Maar zorg er eerst voor dat je de Arduino IDE-setup voor ESP8266 hebt. Als je de setup niet hebt, kun je het volgende deel volgen, anders kun je dit deel gewoon overslaan. Als u meer wilt weten over webserver en op IoT gebaseerde projecten, kunt u onze vorige post lezen, waar we het hebben besproken