Ajax avec esp8266: mise à jour dynamique de la page Web sans rechargement

Dans de nombreuses applications IoT, il existe des situations dans lesquelles les données du capteur doivent être surveillées en continu, et le moyen le plus simple de le faire est d'activer un serveur Web ESP8266 qui sert une page Web HTML; mais le problème avec cette méthodologie est que le navigateur Web doit être actualisé à un certain intervalle de temps pour obtenir une mise à jour des données du capteur. Ce n'est pas seulement inefficace, mais prend beaucoup de cycles d'horloge où d'autres tâches peuvent être effectuées. La solution à ce problème est connue sous le nom de «JavaScript et XML asynchrones» ou AJAX en abrégé. En utilisant AJAX, nous pouvons surveiller les données en temps réel sans actualiser toute la page Web, ce qui permet non seulement de gagner du temps, mais également d'économiser de précieux cycles d'horloge. Suivez le long et dans cet article, vous apprendrez comment implémenter un serveur Web basé sur AJAX sur ESP8266.

Qu'est-ce que AJAX?

Comme nous l'avons vu précédemment, AJAX signifie «JavaScript et XML asynchrones» qui peut être utilisé pour mettre à jour une partie de la page Web sans recharger la page impliquée. Il le fait en demandant et en recevant spontanément des données du serveur. La fonction d'AJAX est de mettre à jour le contenu Web de manière asynchrone. Cela signifie que le navigateur Web d'un utilisateur n'a pas besoin d'actualiser une page Web entière lorsqu'une partie seulement du contenu de la page doit être mise à jour.

Un exemple quotidien d'AJAX sera la fonction de suggestion de Google, lorsque nous tapons dans la barre de recherche Google, Google commence à suggérer des chaînes de recherche associées. Au cours de ce processus, la page Web ne se recharge pas, mais les informations qui doivent être modifiées sont mises à jour en arrière-plan à l'aide d'AJAX.

Comment fonctionne AJAX?

AJAX utilise simplement une combinaison de

1. XML (langage de balisage extensible)
2. JavaScript et HTML

• XML (langage de balisage extensible):

XML est un langage de balisage. XML est principalement utilisé pour recevoir des données de serveur avec un format spécifique. Bien qu'il puisse recevoir des données sous forme de texte brut. Lorsqu'un utilisateur visite une page Web et qu'un événement se produit, dans notre cas, il s'agit d'une «pression sur un bouton», le JavaScript crée un objet XMLHttpRequest, qui transfère ensuite les informations au format XML entre un navigateur Web et un serveur Web. L'objet XMLHttpRequest envoie une demande de données de page mises à jour au serveur Web, le serveur traite la demande, une réponse est créée côté serveur et renvoyée au navigateur, qui utilise ensuite JavaScript pour traiter la réponse et l'afficher sur la page Web..

• JavaScript et HTML:

JavaScript effectue le processus de mise à jour dans AJAX. La demande de contenu mis à jour est formatée en XML pour la rendre compréhensible, et JavaScript actualise le contenu pour l'utilisateur qui consulte la page mise à jour.

AJAX fonctionnant:

Comme le montre le diagramme ci-dessus, pour une requête AJAX, le navigateur envoie une XMLHttpRequest au serveur en utilisant javascript. Cet objet comprend des données qui indiquent au serveur ce qui est demandé. Le serveur répond avec uniquement les données qui ont été demandées du côté client. Ensuite, le navigateur reçoit les données, met à jour uniquement la partie de la page qui doit être mise à jour au lieu de recharger la page Web entière.

Composants requis pour créer le serveur Web AJAX et ESP8266

Alors que nous construisons le projet pour démontrer la capacité de esp8266 à gérer AJAX, les besoins en composants sont très minuscules, vous pouvez en trouver la plupart dans votre magasin de bricolage local.

• NodeMCU X 1
• Capteur de température LM35 X 1
• LED X 1
• Planche à pain X 1
• Cavaliers X 4
• Câble de programmation X 1

Serveur Web Ajax et ESP8266 - Schéma de circuit

Le schéma de circuit du serveur Web basé sur AJAX est illustré ci-dessous.

Le circuit étant très simple, il n'y a pas grand-chose à expliquer. Nous avons connecté une LED avec une résistance de limitation de courant de 150 Ohms à la broche D0 de l'ESP8266, comme vous le verrez, nous pouvons la basculer en utilisant le serveur Web. Ensuite, nous avons notre capteur de température LM35 à travers lequel nous lirons la valeur de température et la mettrons à jour sur la page Web. Le capteur de température est alimenté par le rail 3,3V, et comme le LM35 est un capteur analogique, nous avons utilisé la broche A0 de la carte ESP8266 pour mesurer les données. si vous avez rencontré le capteur de température LM35 pour la première fois, ou si vous souhaitez en savoir plus sur ce petit capteur très cool, vous pouvez consulter notre article précédent sur Thermomètre numérique utilisant NodeMCU et LM35 où nous avons discuté du fonctionnement de ce capteur dans détail.

Code de serveur Web basé sur AJAX pour ESP8266

Avant d'aller plus loin, plongeons directement dans le programme pour comprendre comment notre serveur Web NodeMCU fonctionnera. Mais avant cela, veuillez vous assurer que vous avez la configuration Arduino IDE pour ESP8266.Si vous n'avez pas la configuration, vous pouvez suivre la partie suivante, sinon vous pouvez simplement ignorer cette partie. Si vous souhaitez en savoir plus sur les serveurs Web et les projets basés sur l'IoT, vous pouvez consulter notre article précédent où nous avons discuté