Ajax com esp8266: atualização dinâmica da página da web sem recarregar

Em muitos aplicativos IoT, há situações em que os dados do sensor precisam ser monitorados continuamente e a maneira mais simples de fazer isso é habilitando um servidor da web ESP8266 que atende uma página da web em HTML; mas o problema com essa metodologia é que o navegador da web precisa ser atualizado em um determinado intervalo de tempo para obter dados atualizados do sensor. Isso não é apenas ineficiente, mas leva muitos ciclos de clock onde outras tarefas podem ser executadas. A solução para este problema é conhecida como “Asynchronous JavaScript and XML” ou AJAX para abreviar. Usando AJAX, podemos monitorar dados em tempo real sem atualizar toda a página da web, isso não só economiza tempo, mas também economiza ciclos de clock preciosos. Acompanhe e, neste artigo, você aprenderá como implementar um servidor da web baseado em AJAX no ESP8266.

O que é AJAX?

Conforme discutimos anteriormente, AJAX significa “Asynchronous JavaScript and XML”, que pode ser usado para atualizar uma parte da página da web sem recarregar a página de vinculação. Ele faz isso solicitando e recebendo dados do servidor espontaneamente. A função do AJAX é atualizar o conteúdo da web de forma assíncrona. Isso significa que o navegador do usuário não precisa atualizar uma página inteira da web quando apenas uma parte do conteúdo da página precisa ser atualizada.

Um exemplo diário de AJAX será o recurso de sugestão do Google, conforme digitamos na barra de pesquisa do Google, o Google começa a sugerir strings de pesquisa relacionadas. Durante esse processo, a página da Web não recarrega, mas as informações que precisam ser alteradas são atualizadas em segundo plano usando AJAX.

Como funciona o AJAX?

AJAX apenas usa uma combinação de

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

• XML (Extensible Markup Language):

XML é uma linguagem de marcação. XML é usado principalmente para receber dados do servidor com um formato específico. Embora possa receber dados na forma de texto simples. Quando um usuário visita uma página da web e ocorre um evento, no nosso caso, é um “pressionamento de botão”, o JavaScript cria um objeto XMLHttpRequest, que então transfere as informações em formato XML entre um navegador e um servidor web. O objeto XMLHttpRequest envia uma solicitação de dados atualizados da página para o servidor web, o servidor processa a solicitação, uma resposta é criada no lado do servidor e enviada de volta ao navegador, que então usa JavaScript para processar a resposta e exibi-la na página web.

• JavaScript e HTML:

JavaScript faz o processo de atualização em AJAX. A solicitação de conteúdo atualizado é formatada em XML para torná-la compreensível e o JavaScript atualiza o conteúdo para o usuário que visualiza a página atualizada.

AJAX funcionando:

Conforme mostrado no diagrama acima, para uma solicitação AJAX, o navegador envia um XMLHttpRequest ao servidor usando javascript. Este objeto inclui dados que informam ao servidor o que está sendo solicitado. O servidor responde apenas com os dados solicitados do lado do cliente. Em seguida, o navegador recebe os dados, atualiza apenas a parte da página que precisa ser atualizada, em vez de recarregar a página inteira.

Componentes necessários para construir o servidor da Web baseado em AJAX e ESP8266

Como estamos construindo o projeto para demonstrar a capacidade do esp8266 de lidar com AJAX, o requisito do componente é muito minúsculo, você pode encontrar a maioria deles em sua loja local de hobby.

• NodeMCU X 1
• Sensor de temperatura LM35 X 1
• LED X 1
• Breadboard X 1
• Jumpers X 4
• Cabo de programação X 1

Servidor Web Ajax e ESP8266 - Diagrama de circuito

O diagrama de circuito para o servidor da web baseado em AJAX é mostrado abaixo.

Como o circuito é muito simples, não há muito o que explicar. Conectamos um LED com resistor limitador de corrente de 150 Ohms ao pino D0 do ESP8266, como você verá, podemos alterná-lo usando o servidor web. Em seguida, temos nosso sensor de temperatura LM35, por meio do qual leremos o valor da temperatura e o atualizaremos na página da web. O sensor de temperatura é alimentado pelo trilho de 3,3 V e, como o LM35 é um sensor analógico, usamos o pino A0 da placa ESP8266 para medir os dados. se você se deparou com o sensor de temperatura LM35 pela primeira vez, ou se deseja aprender mais sobre este pequeno sensor muito legal, você pode verificar nosso post anterior sobre Termômetro Digital Usando NodeMCU e LM35 onde discutimos o funcionamento deste sensor em detalhe.

Código do servidor da Web baseado em AJAX para ESP8266

Antes de prosseguirmos, vamos mergulhar direto no programa para entender como nosso servidor da web NodeMCU funcionará. Mas antes disso, certifique-se de ter o IDE do Arduino configurado para ESP8266. Se você não tiver a configuração, pode seguir a próxima parte, caso contrário, pode simplesmente pular esta parte. Se você estiver interessado em aprender mais sobre servidores da web e projetos baseados em IoT, você pode verificar nosso post anterior, onde discutimos