- ¿Qué es AJAX?
- ¿Cómo funciona AJAX?
- Componentes necesarios para construir el servidor web basado en AJAX y ESP8266
- Servidor web Ajax y ESP8266 - Diagrama de circuito
- Código de servidor web basado en AJAX para ESP8266
En muchas aplicaciones de IoT, hay situaciones en las que los datos del sensor deben monitorearse continuamente, y la forma más sencilla de hacerlo es habilitando un servidor web ESP8266 que sirva a una página web HTML; pero el problema con esta metodología es que el navegador web debe actualizarse en un cierto intervalo de tiempo para obtener los datos del sensor actualizados. Esto no solo es ineficiente, sino que requiere muchos ciclos de reloj en los que se pueden realizar otras tareas. La solución a este problema se conoce como "JavaScript y XML asíncronos" o AJAX para abreviar. Con AJAX, podemos monitorear datos en tiempo real sin actualizar toda la página web, esto no solo ahorra tiempo, sino que también ahorra preciosos ciclos de reloj. Siga y en este artículo, aprenderá cómo implementar un servidor web basado en AJAX en ESP8266.
¿Qué es AJAX?
Como hemos comentado anteriormente, AJAX significa "JavaScript y XML asíncronos" que se puede utilizar para actualizar una parte de la página web sin volver a cargar la página de vinculación. Lo hace solicitando y recibiendo datos del servidor de forma espontánea. La función de AJAX es actualizar el contenido web de forma asincrónica. Esto significa que el navegador web de un usuario no necesita actualizar una página web completa cuando solo es necesario actualizar una parte del contenido de la página.
Un ejemplo cotidiano de AJAX será la función de sugerencias de Google, mientras escribimos en la barra de búsqueda de Google, Google comienza a sugerir cadenas de búsqueda relacionadas. Durante este proceso, la página web no se recarga, pero la información que debe cambiarse se actualiza en segundo plano mediante AJAX.
¿Cómo funciona AJAX?
AJAX solo usa una combinación de-
- XML (lenguaje de marcado extensible)
- JavaScript y HTML
- XML (lenguaje de marcado extensible):
XML es un lenguaje de marcado. XML se utiliza principalmente para recibir datos del servidor con un formato específico. Aunque puede recibir datos en forma de texto sin formato. Cuando un usuario visita una página web y ocurre un evento, en nuestro caso, es una "pulsación de botón", el JavaScript crea un objeto XMLHttpRequest, que luego transfiere información en formato XML entre un navegador web y un servidor web. El objeto XMLHttpRequest envía una solicitud de datos de página actualizados al servidor web, el servidor procesa la solicitud, se crea una respuesta en el lado del servidor y se envía de vuelta al navegador, que luego usa JavaScript para procesar la respuesta y mostrarla en la página web..
- JavaScript y HTML:
JavaScript realiza el proceso de actualización en AJAX. La solicitud de contenido actualizado se formatea en XML para que sea comprensible y JavaScript actualiza el contenido para el usuario que ve la página actualizada.
Funcionamiento AJAX:
Como se muestra en el diagrama anterior, para una solicitud AJAX, el navegador envía una XMLHttpRequest al servidor usando javascript. Este objeto incluye datos que le dicen al servidor lo que se solicita. El servidor responde solo con los datos solicitados del lado del cliente. Luego, el navegador recibe los datos, actualiza solo la parte de la página que debe actualizarse en lugar de volver a cargar toda la página web.
Componentes necesarios para construir el servidor web basado en AJAX y ESP8266
Mientras estamos construyendo el proyecto para demostrar la capacidad de esp8266 para manejar AJAX, el requisito de componentes es muy minúsculo, puede encontrar la mayoría de ellos en su tienda de pasatiempos local.
- NodeMCU X 1
- Sensor de temperatura LM35 X 1
- LED X 1
- Placa de pruebas X 1
- Jerséis X 4
- Cable de programación X 1
Servidor web Ajax y ESP8266 - Diagrama de circuito
A continuación se muestra el diagrama de circuito del servidor web basado en AJAX.
Como el circuito es muy sencillo, no hay mucho que explicar al respecto. Hemos conectado un LED con resistencia limitadora de corriente de 150 Ohms al Pin D0 del ESP8266, como verás, podemos alternarlo usando el servidor web. A continuación, tenemos nuestro sensor de temperatura LM35 a través del cual estaremos leyendo el valor de temperatura y lo actualizaremos en la página web. El sensor de temperatura se alimenta desde el riel de 3.3V, y como el LM35 es un sensor analógico, hemos utilizado el pin A0 de la placa ESP8266 para medir los datos. Si se ha encontrado con el sensor de temperatura LM35 por primera vez, o si desea obtener más información sobre este pequeño y genial sensor, puede consultar nuestra publicación anterior sobre Termómetro digital con NodeMCU y LM35 donde discutimos el funcionamiento de este sensor en detalle.
Código de servidor web basado en AJAX para ESP8266
Antes de continuar, profundicemos directamente en el programa para comprender cómo funcionará nuestro servidor web NodeMCU. Pero antes de eso, asegúrese de tener la configuración IDE de Arduino para ESP8266.Si no tiene la configuración, puede seguir la siguiente parte, de lo contrario, puede omitir esta parte. Si está interesado en aprender más sobre el servidor web y los proyectos basados en IoT, puede consultar nuestra publicación anterior donde hemos discutido