Ajax s esp8266: dynamická aktualizácia webových stránok bez opätovného načítania

V mnohých aplikáciách IoT existujú situácie, keď je potrebné údaje senzora monitorovať nepretržite, a najjednoduchší spôsob, ako to urobiť, je povoliť webový server ESP8266, ktorý slúži na webovej stránke HTML; problémom tejto metodiky však je, že webový prehliadač je potrebné v určitom časovom intervale aktualizovať, aby sa získali aktualizované údaje senzora. To je nielen neefektívne, ale trvá to aj veľa hodinových cyklov, pri ktorých je možné vykonávať ďalšie úlohy. Riešenie tohto problému je známe ako „asynchrónny JavaScript a XML“ alebo skrátene AJAX. Pomocou AJAX môžeme monitorovať údaje v reálnom čase bez obnovenia celej webovej stránky, nielenže to šetrí čas, ale aj drahocenné hodiny. Postupujte ďalej a v tomto článku sa dozviete, ako implementovať webový server založený na AJAX na ESP8266.

Čo je AJAX?

Ako sme už diskutovali, AJAX znamená „asynchrónny JavaScript a XML“, ktorý je možné použiť na aktualizáciu časti webovej stránky bez opätovného načítania hlavnej stránky. Robí to tak, že spontánne požaduje a prijíma údaje zo servera. Funkciou AJAX je asynchrónne aktualizovať webový obsah. To znamená, že webový prehliadač používateľa nemusí obnovovať celú webovú stránku, keď je potrebné aktualizovať iba časť jej obsahu.

Každodenným príkladom AJAX bude funkcia návrhov Google, keď píšeme do vyhľadávacieho panela Google, Google začne navrhovať súvisiace vyhľadávacie reťazce. Počas tohto procesu sa webová stránka nenačíta znova, ale informácie, ktoré je potrebné zmeniť, sa aktualizujú na pozadí pomocou AJAX.

Ako AJAX funguje?

AJAX iba používa kombináciu-

1. XML (Extensible Markup Language)
2. JavaScript a HTML

• XML (Extensible Markup Language):

XML je značkovací jazyk. XML sa väčšinou používa na príjem údajov servera v konkrétnom formáte. Môže však prijímať údaje vo forme obyčajného textu. Keď používateľ navštívi webovú stránku a dôjde k udalosti, v našom prípade je to „stlačenie tlačidla“, JavaScript vytvorí objekt XMLHttpRequest, ktorý potom prenáša informácie vo formáte XML medzi webovým prehliadačom a webovým serverom. Objekt XMLHttpRequest odošle požiadavku na aktualizované údaje stránky na webový server, ktorý server spracuje požiadavku, odpoveď sa vytvorí na strane servera a odošle sa späť do prehliadača, ktorý potom pomocou jazyka JavaScript spracuje odpoveď a zobrazí ju na webovej stránke.

• JavaScript a HTML:

JavaScript vykonáva proces aktualizácie v AJAX. Žiadosť o aktualizovaný obsah je naformátovaná do formátu XML, aby bola zrozumiteľná, a jazyk JavaScript obnovuje obsah pre používateľa, ktorý si prezerá aktualizovanú stránku.

AJAX pracovné:

Ako je znázornené na obrázku vyššie, v prípade požiadavky AJAX prehliadač odošle server XMLHttpRequest na server pomocou JavaScriptu. Tento objekt obsahuje údaje, ktoré serveru hovoria, čo sa požaduje. Server odpovie iba údajmi, ktoré boli vyžiadané zo strany klienta. Potom prehliadač prijme údaje, namiesto opätovného načítania celej webovej stránky aktualizuje iba časť stránky, ktorú je potrebné aktualizovať.

Komponenty požadované na zostavenie webového servera založeného na AJAX a ESP8266

Pretože staviame projekt na preukázanie schopnosti protokolu esp8266 zvládnuť AJAX, požiadavka na komponent je veľmi nepatrná, väčšinu z nich nájdete v miestnom hobby obchode.

• NodeMCU X 1
• LM35 Teplotný snímač X 1
• LED X 1
• Nepárové pole X 1
• Prepojky X 4
• Programovací kábel X 1

Ajax a ESP8266 webový server - obvodové schéma

Schéma zapojenia webového servera založeného na AJAX je uvedená nižšie.

Pretože je obvod veľmi jednoduchý, nie je v ňom čo vysvetľovať. Pripojili sme LED s rezistorom obmedzujúcim prúd na 150 Ohmov na Pin D0 ESP8266, ako uvidíte, môžeme ho prepínať pomocou webového servera. Ďalej tu máme náš teplotný senzor LM35, cez ktorý budeme čítať hodnotu teploty a aktualizovať ju na webovú stránku. Teplotný snímač je napájaný z koľajnice 3,3 V a keďže LM35 je analógový snímač, na meranie údajov sme použili kolík A0 dosky ESP8266. Ak ste sa s teplotným snímačom LM35 stretli prvýkrát alebo sa chcete dozvedieť viac informácií o tomto veľmi chladnom malom snímači, môžete si pozrieť náš predchádzajúci príspevok o Digitálnom teplomeri pomocou NodeMCU a LM35, kde sme diskutovali o fungovaní tohto snímača v detail.

Kód webového servera založený na AJAX pre ESP8266

Než budeme pokračovať, ponorme sa priamo do programu, aby sme pochopili, ako bude fungovať náš webový server NodeMCU. Ale predtým sa uistite, že máte nastavenie Arduino IDE pre ESP8266. Ak nemáte nastavenie, môžete sledovať nasledujúcu časť, inak môžete túto časť preskočiť. Ak sa chcete dozvedieť viac o webovom serveri a projektoch založených na IoT, môžete si pozrieť náš predchádzajúci príspevok, kde sme diskutovali