- Cos'è AJAX?
- Come funziona AJAX?
- Componenti necessari per creare il server Web basato su AJAX e ESP8266
- Server Web Ajax e ESP8266 - Schema del circuito
- Codice server web basato su AJAX per ESP8266
In molte applicazioni IoT, ci sono situazioni in cui i dati del sensore devono essere monitorati continuamente e il modo più semplice per farlo è abilitare un server web ESP8266 che serve una pagina web HTML; ma il problema con questa metodologia è che il browser web deve essere aggiornato a un certo intervallo di tempo per ottenere i dati del sensore aggiornati. Questo non solo è inefficiente, ma richiede molti cicli di clock in cui è possibile eseguire altre attività. La soluzione a questo problema è nota come "JavaScript e XML asincrono" o in breve AJAX. Utilizzando AJAX, possiamo monitorare i dati in tempo reale senza aggiornare l'intera pagina web, questo non solo fa risparmiare tempo, ma fa anche risparmiare preziosi cicli di clock. Segui e in questo articolo imparerai come implementare il server web basato su AJAX su ESP8266.
Cos'è AJAX?
Come abbiamo discusso in precedenza, AJAX sta per "Asynchronous JavaScript and XML" che può essere utilizzato per aggiornare una parte della pagina web senza ricaricare la pagina di richiesta. Lo fa richiedendo e ricevendo spontaneamente i dati dal server. La funzione di AJAX è aggiornare il contenuto web in modo asincrono. Ciò significa che il browser web di un utente non ha bisogno di aggiornare un'intera pagina web quando solo una parte del contenuto della pagina deve essere aggiornata.
Un esempio quotidiano di AJAX sarà la funzione di suggerimento di Google, mentre digitiamo nella barra di ricerca di Google, Google inizia a suggerire stringhe di ricerca correlate. Durante questo processo, la pagina web non si ricarica, ma le informazioni che devono essere modificate vengono aggiornate in background utilizzando AJAX.
Come funziona AJAX?
AJAX utilizza solo una combinazione di-
- XML (Extensible Markup Language)
- JavaScript e HTML
- XML (Extensible Markup Language):
XML è un linguaggio di markup. XML viene utilizzato principalmente per ricevere i dati del server con un formato specifico. Sebbene possa ricevere dati sotto forma di testo normale. Quando un utente visita una pagina web e si verifica un evento, nel nostro caso si tratta di una “pressione di un pulsante”, JavaScript crea un oggetto XMLHttpRequest, che poi trasferisce le informazioni in formato XML tra un browser web e un server web. L'oggetto XMLHttpRequest invia una richiesta di dati della pagina aggiornati al server Web, il server elabora la richiesta, una risposta viene creata sul lato server e rinviata al browser, che quindi utilizza JavaScript per elaborare la risposta e visualizzarla sulla pagina Web.
- JavaScript e HTML:
JavaScript esegue il processo di aggiornamento in AJAX. La richiesta di contenuto aggiornato è formattata in XML per renderla comprensibile e JavaScript aggiorna il contenuto per l'utente che visualizza la pagina aggiornata.
AJAX di lavoro:
Come mostrato nel diagramma sopra, per una richiesta AJAX, il browser invia un XMLHttpRequest al server utilizzando javascript. Questo oggetto include dati che comunicano al server cosa viene richiesto. Il server risponde solo con i dati richiesti dal lato client. Quindi il browser riceve i dati, aggiorna solo la parte della pagina che deve essere aggiornata invece di ricaricare l'intera pagina web.
Componenti necessari per creare il server Web basato su AJAX e ESP8266
Poiché stiamo realizzando il progetto per dimostrare la capacità di esp8266 di gestire AJAX, i requisiti dei componenti sono molto minuscoli, puoi trovare la maggior parte di quelli nel tuo negozio di hobby locale.
- NodeMCU X 1
- Sensore di temperatura LM35 X 1
- LED X 1
- Tagliere X 1
- Ponticelli X 4
- Cavo di programmazione X 1
Server Web Ajax e ESP8266 - Schema del circuito
Di seguito è mostrato lo schema del circuito per il server Web basato su AJAX.
Poiché il circuito è molto semplice, non c'è molto da spiegare al riguardo. Abbiamo collegato un LED con resistenza limitatrice di corrente da 150 Ohm al Pin D0 dell'ESP8266, come vedrai, possiamo attivarlo tramite webserver. Successivamente, abbiamo il nostro sensore di temperatura LM35 attraverso il quale leggeremo il valore della temperatura e lo aggiorneremo sulla pagina web. Il sensore di temperatura è alimentato dalla guida da 3,3 V e, poiché l'LM35 è un sensore analogico, abbiamo utilizzato il pin A0 della scheda ESP8266 per misurare i dati. se ti sei imbattuto per la prima volta nel sensore di temperatura LM35, o se vuoi saperne di più su questo piccolo sensore molto interessante, puoi controllare il nostro post precedente sul termometro digitale utilizzando NodeMCU e LM35 dove abbiamo discusso del funzionamento di questo sensore in dettaglio.
Codice server web basato su AJAX per ESP8266
Prima di procedere oltre, immergiamoci direttamente nel programma per capire come funzionerà il nostro server web NodeMCU. Ma prima, assicurati di avere la configurazione IDE Arduino per ESP8266, se non hai la configurazione, puoi seguire la parte successiva, altrimenti puoi semplicemente saltare questa parte. Se sei interessato a saperne di più sul server web e sui progetti basati su IoT, puoi consultare il nostro post precedente in cui abbiamo discusso