Ajax z esp8266: dinamično posodabljanje spletne strani brez ponovnega nalaganja

V mnogih aplikacijah interneta stvari obstajajo situacije, ko je treba podatke senzorjev neprekinjeno spremljati, in to je najpreprosteje omogočiti tako, da omogočite spletni strežnik ESP8266, ki služi spletni strani HTML; vendar je težava te metodologije v tem, da je treba spletni brskalnik osvežiti v določenem časovnem intervalu, da dobimo posodobljene podatke senzorja. To ni le neučinkovito, ampak zahteva veliko urnih ciklov, kjer je mogoče izvajati druge naloge. Rešitev te težave je znana kot »Asinhroni JavaScript in XML« ali na kratko AJAX. Z uporabo AJAX lahko spremljamo podatke v realnem času, ne da bi osvežili celotno spletno stran, s čimer prihranimo le čas, temveč tudi dragocene cikle ure. Nadaljujte in v tem članku boste izvedeli, kako implementirati spletni strežnik, ki temelji na AJAX, na ESP8266.

Kaj je AJAX?

Kot smo že omenili, AJAX pomeni "Asinhroni JavaScript in XML", ki ju lahko uporabimo za posodobitev dela spletne strani, ne da bi znova naložili zadnjo stran. To stori tako, da spontano zahteva in prejema podatke s strežnika. Funkcija AJAX-a je sinhrono posodabljanje spletne vsebine. To pomeni, da uporabnikovemu spletnemu brskalniku ni treba osvežiti celotne spletne strani, ko je treba posodobiti le del vsebine na strani.

Vsakdanji primer AJAX-a bo Googlova funkcija za predloge, ko vtipkamo v Googlovo iskalno vrstico, Google začne predlagati povezane iskalne nize. Med tem postopkom se spletna stran ne naloži znova, vendar se informacije, ki jih je treba spremeniti, posodobijo v ozadju z uporabo AJAX.

Kako deluje AJAX?

AJAX samo uporablja kombinacijo-

1. XML (razširljiv označevalni jezik)
2. JavaScript in HTML

• XML (razširljiv označevalni jezik):

XML je označevalni jezik. XML se večinoma uporablja za sprejemanje podatkov strežnika z določeno obliko. Čeprav lahko prejme podatke v obliki navadnega besedila. Ko uporabnik obišče spletno stran in se zgodi dogodek, je v našem primeru to "pritisk gumba", JavaScript ustvari objekt XMLHttpRequest, ki nato v spletnem brskalniku in spletnem strežniku prenese informacije v obliki XML. Objekt XMLHttpRequest pošlje zahtevo za posodobljene podatke strani spletnemu strežniku, strežnik obdela zahtevo, odgovor se ustvari na strani strežnika in pošlje nazaj brskalniku, ki nato z JavaScriptom obdela odgovor in ga prikaže na spletni strani.

• JavaScript in HTML:

JavaScript posodablja postopek v AJAX-u. Zahteva za posodobljeno vsebino je oblikovana v XML, da je razumljiva, JavaScript pa osveži vsebino za uporabnika, ki si ogleduje posodobljeno stran.

AJAX deluje:

Kot je prikazano v zgornjem diagramu, za zahtevo AJAX brskalnik strežniku pošlje XMLHttpRequest z uporabo javascripta. Ta predmet vključuje podatke, ki strežniku sporočajo, kaj se zahteva. Strežnik odgovori samo s podatki, ki so bili zahtevani s strani odjemalca. Nato brskalnik prejme podatke in posodobi samo tisti del strani, ki ga je treba posodobiti, namesto da bi ponovno naložil celotno spletno stran.

Komponente, potrebne za izdelavo spletnega strežnika na osnovi AJAX in ESP8266

Ko gradimo projekt, da dokažemo sposobnost esp8266 za obvladovanje AJAX, je zahteva po komponentah zelo majhna, večino jih lahko najdete v lokalni trgovini s hobi izdelki.

• NodeMCU X 1
• LM35 Temperaturni senzor X 1
• LED X 1
• Tabela X 1
• Skakalci X 4
• Programski kabel X 1

Spletni strežnik Ajax in ESP8266 - vezalni diagram

Shema vezij za spletni strežnik, ki temelji na AJAX, je prikazana spodaj.

Ker je vezje zelo preprosto, o njem ni kaj dosti razložiti. Na pin D0 ESP8266 smo priklopili LED s 150 ohmskim omejevalnim uporom, kot boste videli, lahko ga preklopimo s pomočjo spletnega strežnika. Nato imamo temperaturni senzor LM35, skozi katerega bomo odčitavali temperaturno vrednost in jo posodabljali na spletno stran. Temperaturni senzor se napaja iz 3.3V tirnice, in ker je LM35 analogni senzor, smo za merjenje podatkov uporabili zatič A0 plošče ESP8266. če ste prvič naleteli na temperaturni senzor LM35 ali če želite izvedeti več o tem zelo kul senzorju, si lahko ogledate naš prejšnji prispevek o digitalnem termometru z uporabo NodeMCU in LM35, kjer smo razpravljali o delovanju tega senzorja v podrobnosti.

Koda spletnega strežnika na osnovi AJAX za ESP8266

Preden nadaljujemo, se potopimo naravnost v program, da bomo razumeli, kako bo deloval naš spletni strežnik NodeMCU. Pred tem pa se prepričajte, da imate nastavljeno Arduino IDE za ESP8266. Če nimate nastavitve, lahko sledite naslednjemu delu, sicer pa lahko ta del samo preskočite. Če vas zanima več o spletnem strežniku in projektih, ki temeljijo na IoT, si oglejte naš prejšnji prispevek, kjer smo razpravljali