Ajax med esp8266: dynamisk oppdatering av nettsiden uten å laste inn på nytt

I mange IoT-applikasjoner er det situasjoner der sensordataene må overvåkes kontinuerlig, og den enkleste måten å gjøre det på er å aktivere en ESP8266-webserver som serverer en HTML-webside; men problemet med denne metoden er at nettleseren må oppdateres med et bestemt tidsintervall for å få oppdaterte sensordata. Dette er ikke bare ineffektivt, men det tar mange tidssykluser der andre oppgaver kan utføres. Løsningen på dette problemet er kjent som “Asynchronous JavaScript and XML” eller kort fortalt AJAX. Ved hjelp av AJAX kan vi overvåke sanntidsdata uten å oppdatere hele websiden, dette sparer ikke bare tid, men det sparer også dyrebare klokkesykluser. Følg med og i denne artikkelen vil du lære hvordan du implementerer AJAX-basert webserver på ESP8266.

Hva er AJAX?

Som vi har diskutert tidligere, står AJAX for “Asynchronous JavaScript and XML” som kan brukes til å oppdatere en del av websiden uten å laste inn entail-siden på nytt. Det gjør det ved å be om og motta data fra serveren spontant. AJAXs funksjon er å oppdatere webinnhold asynkront. Dette betyr at en brukers nettleser ikke trenger å oppdatere en hel webside når bare en del av innholdet på siden trenger å oppdateres.

Et dagligdags eksempel på AJAX vil være Googles forslagsfunksjon, mens vi skriver inn Google-søkefeltet, begynner Google å foreslå relaterte søkestrenger. Under denne prosessen lastes nettsiden ikke inn på nytt, men informasjonen som må endres oppdateres i bakgrunnen ved hjelp av AJAX.

Hvordan fungerer AJAX?

AJAX bruker bare en kombinasjon av-

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

• XML (Extensible Markup Language):

XML er et kodespråk. XML brukes mest for å motta serverdata med et bestemt format. Selv om den kan motta data i form av ren tekst. Når en bruker besøker en webside og en hendelse inntreffer, i vårt tilfelle er det et “knappetrykk”, JavaScript oppretter et XMLHttpRequest- objekt, som deretter overfører informasjon i et XML-format mellom en nettleser og en webserver. XMLHttpRequest-objektet sender en forespørsel om oppdaterte sidedata til webserveren, serveren behandler forespørselen, et svar opprettes på serversiden og sendes tilbake til nettleseren, som deretter bruker JavaScript til å behandle svaret og vise det på websiden.

• JavaScript og HTML:

JavaScript gjør oppdateringsprosessen i AJAX. Forespørselen om oppdatert innhold er formatert i XML for å gjøre det forståelig, og JavaScript oppdaterer innholdet for brukeren som ser på den oppdaterte siden.

AJAX Arbeider:

Som vist i diagrammet ovenfor, for en AJAX-forespørsel, sender nettleseren en XMLHttpRequest til serveren ved hjelp av javascript. Dette objektet inkluderer data som forteller serveren hva som blir bedt om. Serveren svarer med bare dataene som ble bedt om fra klientsiden. Deretter mottar nettleseren dataene, oppdaterer bare den delen av siden som må oppdateres i stedet for å laste hele nettsiden på nytt.

Komponenter som kreves for å bygge AJAX og ESP8266-basert webserver

Da vi bygger prosjektet for å demonstrere evnen til esp8266 til å håndtere AJAX, er komponentkravet veldig lite, du finner de fleste av dem i din lokale hobbybutikk.

• NodeMCU X 1
• LM35 Temperatursensor X 1
• LED X 1
• Brettbrett X 1
• Gensere X 4
• Programmeringskabel X 1

Ajax og ESP8266 webserver - kretsdiagram

Kretsskjemaet for den AJAX-baserte webserveren er vist nedenfor.

Siden kretsen er veldig enkel, er det ikke mye å forklare om det. Vi har koblet en LED med 150 ohm strømbegrensende motstand til pin D0 på ESP8266, som du vil se, kan vi bytte den ved hjelp av webserveren. Deretter har vi LM35-temperatursensoren som vi vil lese temperaturverdien gjennom og oppdatere den til websiden. Temperatursensoren får strøm fra 3.3V-skinnen, og da LM35 er en analog sensor, har vi brukt A0-pinnen på ESP8266-kortet for å måle dataene. hvis du har kommet over LM35-temperatursensoren for første gang, eller hvis du vil lære mer om denne veldig kule lille sensoren, kan du sjekke vårt forrige innlegg på Digital termometer ved hjelp av NodeMCU og LM35 hvor vi diskuterte hvordan denne sensoren fungerer i detalj.

AJAX-basert webserverkode for ESP8266

Før vi går videre, la oss dykke rett inn i programmet for å forstå hvordan NodeMCU-webserveren vår vil fungere. Men før det, må du sørge for at du har Arduino IDE-oppsettet for ESP8266. Hvis du ikke har oppsettet, kan du følge neste del, ellers kan du bare hoppe over denne delen. Hvis du er interessert i å lære mer om webserver og IoT-baserte prosjekter, kan du sjekke ut forrige innlegg der vi har diskutert