Ajax med esp8266: dynamisk websideopdatering uden genindlæsning

I mange IoT-applikationer er der situationer, hvor sensordataene skal overvåges kontinuerligt, og den enkleste måde at gøre det på er ved at aktivere en ESP8266 webserver, der serverer en HTML-webside; men problemet med denne metode er, at webbrowseren skal opdateres med et bestemt tidsinterval for at få opdaterede sensordata. Dette er ikke kun ineffektivt, men det tager mange urcyklusser, hvor andre opgaver kan udføres. Løsningen på dette problem er kendt som “Asynchronous JavaScript and XML” eller kort sagt AJAX. Ved hjælp af AJAX kan vi overvåge realtidsdata uden at opdatere hele websiden, dette sparer ikke kun tid, men det sparer også dyrebare urcyklusser. Følg med og i denne artikel lærer du, hvordan du implementerer AJAX-baseret webserver på ESP8266.

Hvad er AJAX?

Som vi har diskuteret tidligere, står AJAX for "Asynchronous JavaScript and XML", som kan bruges til at opdatere en del af websiden uden at genindlæse entail-siden. Det gør det ved at anmode om og modtage data fra serveren spontant. AJAXs funktion er at opdatere webindhold asynkront. Dette betyder, at en brugers webbrowser ikke behøver at opdatere en hel webside, når kun en del af indholdet på siden skal opdateres.

Et dagligdags eksempel på AJAX vil være Googles forslagsfunktion, når vi skriver i Google-søgefeltet, begynder Google at foreslå relaterede søgestrenge. Under denne proces genindlæses websiden ikke, men de oplysninger, der skal ændres, opdateres i baggrunden ved hjælp af AJAX.

Hvordan fungerer AJAX?

AJAX bruger bare en kombination af-

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

• XML (Extensible Markup Language):

XML er et markup-sprog. XML bruges mest til modtagelse af serverdata med et specifikt format. Selvom det kan modtage data i form af almindelig tekst. Når en bruger besøger en webside, og en begivenhed opstår, i vores tilfælde er det et "knaptryk", JavaScript opretter et XMLHttpRequest- objekt, som derefter overfører information i et XML-format mellem en webbrowser og en webserver. XMLHttpRequest-objektet sender en anmodning om opdaterede sidedata til webserveren, serveren behandler anmodningen, et svar oprettes på serversiden og sendes tilbage til browseren, som derefter bruger JavaScript til at behandle svaret og vise det på websiden.

• JavaScript og HTML:

JavaScript opdaterer processen i AJAX. Anmodningen om opdateret indhold er formateret i XML for at gøre det forståeligt, og JavaScript opdaterer indholdet for brugeren, der ser den opdaterede side.

AJAX Arbejder:

Som vist i ovenstående diagram, for en AJAX-anmodning, sender browseren en XMLHttpRequest til serveren ved hjælp af javascript. Dette objekt inkluderer data, der fortæller serveren, hvad der bliver anmodet om. Serveren svarer kun med de data, der blev anmodet om fra klientsiden. Derefter modtager browseren dataene, opdaterer kun den del af siden, der skal opdateres i stedet for at genindlæse hele websiden.

Komponenter, der kræves for at opbygge AJAX- og ESP8266-baserede webserver

Da vi bygger projektet for at demonstrere evnen til esp8266 til at håndtere AJAX, er komponentkravet meget lille, du kan finde de fleste af dem i din lokale hobbybutik.

• NodeMCU X 1
• LM35 Temperatursensor X 1
• LED X 1
• Brødbræt X 1
• Jumpere X 4
• Programmeringskabel X 1

Ajax og ESP8266 webserver - kredsløbsdiagram

Kredsløbsdiagrammet til den AJAX-baserede webserver er vist nedenfor.

Da kredsløbet er meget simpelt, er der ikke meget at forklare om det. Vi har tilsluttet en LED med 150 ohm strømbegrænsende modstand til stift D0 på ESP8266, som du vil se, kan vi skifte det ved hjælp af webserveren. Dernæst har vi vores LM35 temperatursensor, hvorigennem vi læser temperaturværdien og opdaterer den til websiden. Temperaturføleren får strøm fra 3,3 V-skinnen, og da LM35 er en analog sensor, har vi brugt A0-stiften på ESP8266-kortet til at måle dataene. hvis du er stødt på LM35-temperatursensoren for første gang, eller hvis du vil lære mere om denne meget seje lille sensor, kan du tjekke vores tidligere indlæg om Digital Thermometer ved hjælp af NodeMCU og LM35, hvor vi diskuterede funktionen af ​​denne sensor i detalje.

AJAX-baseret webserverkode til ESP8266

Før vi går videre, lad os dykke direkte ind i programmet for at forstå, hvordan vores NodeMCU-webserver vil fungere. Men inden det skal du sørge for at have Arduino IDE-opsætningen til ESP8266. Hvis du ikke har opsætningen, kan du følge den næste del, ellers kan du bare springe denne del over. Hvis du er interesseret i at lære mere om webserver og IoT-baserede projekter, kan du tjekke vores tidligere indlæg, hvor vi har diskuteret