Ajax med esp8266: dynamisk uppdatering av webbsidor utan omladdning

I många IoT-applikationer finns det situationer där sensordata måste övervakas kontinuerligt, och det enklaste sättet att göra det är genom att aktivera en ESP8266-webbserver som serverar en HTML-webbsida; men problemet med denna metod är att webbläsaren måste uppdateras vid ett visst tidsintervall för att få en uppdaterad sensordata. Detta är inte bara ineffektivt utan tar många klockcykler där andra uppgifter kan utföras. Lösningen på detta problem kallas “Asynchronous JavaScript and XML” eller kortfattat AJAX. Med AJAX kan vi övervaka realtidsdata utan att uppdatera hela webbsidan, det sparar inte bara tid utan det sparar också värdefulla klockcykler. Följ med och i den här artikeln lär du dig hur du implementerar AJAX-baserad webserver på ESP8266.

Vad är AJAX?

Som vi har diskuterat tidigare står AJAX för "Asynchronous JavaScript and XML" som kan användas för att uppdatera en del av webbsidan utan att ladda om entalsidan. Det gör det genom att begära och ta emot data från servern spontant. AJAXs funktion är att uppdatera webbinnehåll asynkront. Det betyder att en användares webbläsare inte behöver uppdatera en hel webbsida när endast en del av innehållet på sidan behöver uppdateras.

Ett vardagligt exempel på AJAX är Googles förslagsfunktion, när vi skriver i Googles sökfält börjar Google föreslå relaterade söksträngar. Under denna process laddas inte hemsidan igen, men informationen som behöver ändras uppdateras i bakgrunden med AJAX.

Hur fungerar AJAX?

AJAX använder bara en kombination av-

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

• XML (Extensible Markup Language):

XML är ett markeringsspråk. XML används mest för att ta emot serverdata med ett specifikt format. Även om den kan ta emot data i form av klartext. När en användare besöker en webbsida och en händelse inträffar, i vårt fall är det en “knapptryckning”, JavaScript skapar ett XMLHttpRequest- objekt, som sedan överför information i ett XML-format mellan en webbläsare och en webbserver. XMLHttpRequest-objektet skickar en begäran om uppdaterad siddata till webbservern, servern behandlar begäran, ett svar skapas på serversidan och skickas tillbaka till webbläsaren, som sedan använder JavaScript för att bearbeta svaret och visa det på webbsidan.

• JavaScript och HTML:

JavaScript gör uppdateringsprocessen i AJAX. Begäran om uppdaterat innehåll formateras i XML för att göra det förståeligt och JavaScript uppdaterar innehållet för användaren som tittar på den uppdaterade sidan.

AJAX Arbetar:

Som visas i ovanstående diagram skickar webbläsaren för en AJAX-begäran en XMLHttpRequest till servern med hjälp av javascript. Detta objekt innehåller data som berättar för servern vad som begärs. Servern svarar med endast de data som begärts från klientsidan. Sedan tar webbläsaren emot data, uppdaterar bara den del av sidan som behöver uppdateras istället för att ladda om hela webbsidan.

Komponenter som krävs för att bygga AJAX och ESP8266-baserad webbserver

Eftersom vi bygger projektet för att visa förmågan hos esp8266 att hantera AJAX, är komponentkravet väldigt minimalt, du hittar de flesta av dem i din lokala hobbybutik.

• NodeMCU X 1
• LM35 Temperaturgivare X 1
• LED X 1
• Brödbräda X 1
• Tröjor X 4
• Programmeringskabel X 1

Ajax och ESP8266 webbserver - kretsschema

Kretsschemat för den AJAX-baserade webbservern visas nedan.

Eftersom kretsen är väldigt enkel finns det inget mycket att förklara om det. Vi har anslutit en lysdiod med 150 Ohms strömbegränsningsmotstånd till stiftet D0 på ESP8266, som du kommer att se, vi kan växla det med hjälp av webservern. Därefter har vi vår LM35 temperatursensor genom vilken vi läser av temperaturvärdet och uppdaterar det till webbsidan. Temperaturgivaren drivs från 3,3 V-skenan, och eftersom LM35 är en analog sensor har vi använt A0-stiftet på ESP8266-kortet för att mäta data. om du har stött på LM35-temperatursensorn för första gången, eller om du vill lära dig mer om den här väldigt coola lilla sensorn, kan du kolla vårt tidigare inlägg på Digital termometer med hjälp av NodeMCU och LM35 där vi diskuterade hur denna sensor fungerar detalj.

AJAX-baserad webbserverkod för ESP8266

Innan vi fortsätter, låt oss dyka rakt in i programmet för att förstå hur vår NodeMCU-webbserver kommer att fungera. Men innan det, se till att du har Arduino IDE-installationen för ESP8266. Om du inte har installationen kan du följa nästa del, annars kan du bara hoppa över den här delen. Om du är intresserad av att lära dig mer om webserver och IoT-baserade projekt kan du kolla in vårt tidigare inlägg där vi har diskuterat