Ajax s esp8266: dynamická aktualizace webových stránek bez opětovného načítání

V mnoha aplikacích IoT existují situace, kdy je třeba data ze senzorů nepřetržitě monitorovat, a nejjednodušší způsob, jak toho dosáhnout, je povolení webového serveru ESP8266, který obsluhuje webovou stránku HTML; ale problém s touto metodikou spočívá v tom, že je třeba webový prohlížeč v určitém časovém intervalu aktualizovat, aby se získala aktualizovaná data snímače. To je nejen neefektivní, ale trvá i mnoho hodinových cyklů, kdy lze provádět další úkoly. Řešení tohoto problému je známé jako „asynchronní JavaScript a XML“ nebo zkráceně AJAX. Pomocí AJAX můžeme monitorovat data v reálném čase bez obnovení celé webové stránky, což nejen šetří čas, ale také drahocenné hodinové cykly. Postupujte dále a v tomto článku se dozvíte, jak implementovat webový server založený na AJAX na ESP8266.

Co je AJAX?

Jak jsme již zmínili dříve, AJAX znamená „asynchronní JavaScript a XML“, které lze použít k aktualizaci části webové stránky bez opětovného načtení následné stránky. Dělá to tak, že spontánně požaduje a přijímá data ze serveru. Funkce AJAXu je asynchronní aktualizace webového obsahu. To znamená, že webový prohlížeč uživatele nemusí aktualizovat celou webovou stránku, když je potřeba aktualizovat pouze část obsahu na stránce.

Každodenním příkladem AJAXu bude funkce navrhování Google, jak píšeme do vyhledávací lišty Google, Google začne navrhovat související vyhledávací řetězce. Během tohoto procesu se webová stránka znovu nenačte, ale informace, které je třeba změnit, se aktualizují na pozadí pomocí AJAX.

Jak AJAX funguje?

AJAX používá pouze kombinaci-

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

• XML (Extensible Markup Language):

XML je značkovací jazyk. XML se většinou používá pro příjem dat serveru v určitém formátu. I když může přijímat data ve formě prostého textu. Když uživatel navštíví webovou stránku a dojde k události, v našem případě se jedná o „stisknutí tlačítka“, JavaScript vytvoří objekt XMLHttpRequest, který pak přenáší informace ve formátu XML mezi webovým prohlížečem a webovým serverem. Objekt XMLHttpRequest odešle požadavek na aktualizovaná data stránky na webový server, server požadavek zpracuje, na straně serveru se vytvoří odpověď a odešle se zpět do prohlížeče, který poté pomocí JavaScriptu zpracuje odpověď a zobrazí ji na webové stránce.

• JavaScript a HTML:

JavaScript provádí proces aktualizace v AJAX. Požadavek na aktualizovaný obsah je formátován v XML, aby byl srozumitelný, a JavaScript obnovuje obsah pro uživatele, který si prohlíží aktualizovanou stránku.

Práce AJAX:

Jak je znázorněno ve výše uvedeném diagramu, pro požadavek AJAX odešle prohlížeč XMLHttpRequest na server pomocí JavaScriptu. Tento objekt obsahuje data, která serveru sdělují, co se požaduje. Server odpovídá pouze daty, která byla vyžádána na straně klienta. Poté prohlížeč přijme data, místo opětovného načtení celé webové stránky aktualizuje pouze část stránky, kterou je třeba aktualizovat.

Komponenty potřebné k sestavení webového serveru založeného na AJAX a ESP8266

Jelikož stavíme projekt, abychom demonstrovali schopnost esp8266 zvládnout AJAX, požadavek na komponenty je velmi nepatrný, většinu z nich najdete v místním hobby obchodě.

• NodeMCU X 1
• LM35 Teplotní senzor X 1
• LED X 1
• Prkénko X 1
• Svetry X 4
• Programovací kabel X 1

Webové servery Ajax a ESP8266 - obvodové schéma

Schéma zapojení webového serveru založeného na AJAX je uvedeno níže.

Vzhledem k tomu, že obvod je velmi jednoduchý, není o něm co vysvětlovat. Připojili jsme LED s rezistorem omezujícím proud 150 Ohmů na Pin D0 ESP8266, jak uvidíte, můžeme jej přepnout pomocí webového serveru. Dále máme teplotní senzor LM35, přes který budeme číst hodnotu teploty a aktualizovat ji na webovou stránku. Teplotní senzor je napájen z kolejnice 3,3 V a protože LM35 je analogový senzor, k měření dat jsme použili kolík A0 desky ESP8266. pokud jste narazili na teplotní senzor LM35 poprvé, nebo pokud se chcete dozvědět více o tomto velmi chladném malém senzoru, můžete si přečíst náš předchozí příspěvek o digitálním teploměru pomocí NodeMCU a LM35, kde jsme diskutovali o fungování tohoto senzoru v detail.

Kód webového serveru založený na AJAX pro ESP8266

Než budeme pokračovat, ponořme se přímo do programu, abychom pochopili, jak bude náš webový server NodeMCU fungovat. Ale předtím se ujistěte, že máte nastavení Arduino IDE pro ESP8266. Pokud nemáte nastavení, můžete sledovat další část, jinak můžete tuto část přeskočit. Pokud máte zájem dozvědět se více o webovém serveru a projektech založených na IoT, můžete se podívat na náš předchozí příspěvek, kde jsme diskutovali