- Què és AJAX?
- Com funciona AJAX?
- Components necessaris per construir el servidor web basat en AJAX i ESP8266
- Servidor web Ajax i ESP8266: diagrama de circuits
- Codi de servidor web basat en AJAX per a ESP8266
En moltes aplicacions de l'IoT, hi ha situacions en què les dades del sensor han de supervisar-se contínuament i la manera més senzilla de fer-ho és habilitant un servidor web ESP8266 que serveixi una pàgina web HTML; però el problema amb aquesta metodologia és que cal actualitzar el navegador web en un interval de temps determinat per obtenir les dades del sensor actualitzades. Això no només és ineficient, sinó que requereix molts cicles de rellotge on es poden realitzar altres tasques. La solució a aquest problema es coneix com a "JavaScript i XML asíncrons" o AJAX. Mitjançant AJAX, podem controlar dades en temps real sense actualitzar tota la pàgina web, això no només estalvia temps, sinó que també estalvia cicles de rellotge preciosos. Seguiu i en aquest article, aprendreu a implementar el servidor web basat en AJAX a ESP8266.
Què és AJAX?
Com ja hem comentat anteriorment, AJAX significa "JavaScript i XML asíncrons" que es poden utilitzar per actualitzar una part de la pàgina web sense recarregar la pàgina que conté. Ho fa sol·licitant i rebent dades del servidor espontàniament. La funció d'AJAX és actualitzar el contingut web de manera asíncrona. Això significa que el navegador web d'un usuari no necessita actualitzar una pàgina web sencera quan només cal actualitzar una part del contingut de la pàgina.
Un exemple quotidià d’AJAX serà la funció de suggeriment de Google, ja que escrivim a la barra de cerca de Google, Google comença a suggerir cadenes de cerca relacionades. Durant aquest procés, la pàgina web no es recarrega, però la informació que cal canviar s’actualitza en segon pla mitjançant AJAX.
Com funciona AJAX?
AJAX només utilitza una combinació de
- XML (llenguatge de marques extensible)
- JavaScript i HTML
- XML (llenguatge de marques extensible):
XML és un llenguatge de marques. L’XML s’utilitza principalment per rebre dades del servidor amb un format específic. Tot i que pot rebre dades en forma de text pla. Quan un usuari visita una pàgina web i es produeix un esdeveniment, en el nostre cas, es tracta d'una "Premsa de botó", JavaScript crea un objecte XMLHttpRequest, que després transfereix informació en format XML entre un navegador web i un servidor web. L'objecte XMLHttpRequest envia una sol·licitud de dades de pàgina actualitzades al servidor web, el servidor processa la sol·licitud, es crea una resposta al costat del servidor i s'envia al navegador, que després utilitza JavaScript per processar la resposta i mostrar-la a la pàgina web..
- JavaScript i HTML:
JavaScript fa el procés d’actualització a AJAX. La sol·licitud de contingut actualitzat té un format XML per fer-la comprensible i JavaScript actualitza el contingut de l’usuari que visualitza la pàgina actualitzada.
Funcionament d'AJAX:
Com es mostra al diagrama anterior, per a una sol·licitud AJAX, el navegador envia una petició XMLHttpRequest al servidor mitjançant javascript. Aquest objecte inclou dades que indiquen al servidor què se sol·licita. El servidor només respon amb les dades que es van sol·licitar al client. Aleshores, el navegador rep les dades, només actualitza la part de la pàgina que cal actualitzar en lloc de tornar a carregar tota la pàgina web.
Components necessaris per construir el servidor web basat en AJAX i ESP8266
A mesura que estem construint el projecte per demostrar la capacitat de l’esp8266 per gestionar AJAX, el requisit de components és molt minúscul, ja que podeu trobar la majoria d’aquests a la vostra botiga d’aficionats local.
- NodeMCU X 1
- LM35 Sensor de temperatura X 1
- LED X 1
- Taula de pa X 1
- Jumpers X 4
- Cable de programació X 1
Servidor web Ajax i ESP8266: diagrama de circuits
A continuació es mostra el diagrama de circuits per al servidor web basat en AJAX.
Com que el circuit és molt senzill, no hi ha res a explicar. Hem connectat un LED amb resistència de limitació de corrent de 150 Ohms al pin D0 de l’ESP8266, com veureu, el podem canviar mitjançant el servidor web. A continuació, tenim el nostre sensor de temperatura LM35 a través del qual llegirem el valor de la temperatura i l’actualitzarem a la pàgina web. El sensor de temperatura s’alimenta des del carril de 3,3 V i, com que el LM35 és un sensor analògic, hem utilitzat el pin A0 de la placa ESP8266 per mesurar les dades. si us heu trobat amb el sensor de temperatura LM35 per primera vegada o si voleu obtenir més informació sobre aquest petit sensor molt divertit, podeu consultar la nostra publicació anterior sobre el termòmetre digital mitjançant NodeMCU i LM35, on vam parlar del funcionament d’aquest sensor a detall.
Codi de servidor web basat en AJAX per a ESP8266
Abans de continuar, busquem directament al programa per entendre com funcionarà el nostre servidor web NodeMCU. Abans, però, assegureu-vos que teniu la configuració Arduino IDE per a ESP8266. Si no teniu la configuració, podeu seguir la següent part, en cas contrari, podeu ometre aquesta part. Si esteu interessats en obtenir més informació sobre els servidors web i els projectes basats en l'IoT, podeu consultar la nostra publicació anterior on hem parlat