Vue d’ensemble

Un exemple simple de page Web minimale va être analysé.

Cette page a été générée pour un navigateur connecté en WiFi à un ESP 32 qui exécutait le logiciel ESP_32_AJAX_Demo_210119, fourni ci après.

Au démarrage, la page affiche :

"LEDState is : NA "(Not Available).

Un clic sur le bouton LED ON affiche "LEDState is : ON", un clic sur le bouton LED OFF affiche "LEDState is : OFF".

  1 Le serveur envoie la page Web complète, c’est à dire le code HTML pour le texte et la mise en page, le code JavaScript pour les actions à réaliser.Noter que ce transfer de page n’aura lieu qu’une fois, au démarrage.

  2 L’utilisateur clic sur un des deux boutons, auxquels sont associés la fonction sendData(led), le paramètre led valant 0 ou 1 selon le bouton. Cette action déclenche une requête vers le serveur

  3 La fonction sendData(led) crée un objet XMLHttpRequest(), puis une chaîne contenant la valeur 1/0 du bouton concerné est émise vers le serveur.

  4 Le serveur la récupère, et la décode

  5 Preparation de la chaîne s de réponse, contenant ON/OFF

  6 Emission vers le client

  7 La transaction s’étant bien déroulée, LEDState est mis à jour avec ON/OFF

Analyse de la page Web

La page Web ci dessous ne contient qu’une vingtaine de lignes dont la moitié est du code JavaScript.

Cette page est lisible depuis le navigateur avec un clic-droit, "Code source de la page".

Ne pas se laisser impressionner si on connait peu le HTML et pas du tout le JavaScript (qui n’a rien à voir avec le JAVA) : les lignes cruciales seront détaillées une à une dans la suite.

  A la ligne 8 : pour identifier le nom de la valeur à modifier, ici LEDState, on utilise une balise "div" ou "span" suivie de "id=".

LEDState pourra prendre les valeurs "NA" ou "ON" ou "OFF".

  Pour une modification, une requête est envoyée au serveur (ESP 32).

Ici la requête est déclenchée par un clic sur l’un des boutons : LED ON ou LED OFF (lignes 6 et 7).

Analyse du Java Script ligne par ligne

Nota : Contrainte de cet éditeur de texte, hélas, les caractères "inférieur", "supérieur" et les "accolades" ne sont pas affichables.

  function sendData(led)

Si le bouton LED ON a été cliqué led=1, si LED OFF led=0.

  var xhttp = newXMLHttpRequest()

Création de l’ objet xhttp de type newXMLHttpRequest , type reconnu par tous les navigateurs (Firefox, Chrome, etc), et qui vivra jusqu’à la fin du traitement complet de la requête.

Bien que le nom de l’objet comporte XML, ici il sera utilisé pour du texte simple (plain).

Cet objet est riche de plusieurs méthodes et propriétés selon la terminologie de la programmation Objet. Celles-ci sont détaillées en Annexe.

  xhttp.onreadystatechange = function() if (this.readyState == 4 && this.status == 200)

C’est du condensé !

A chaque changement de valeur de reasyState (de 0 à 4) on vérifie si

reasyState = 4 ET que status = 200

Si c’est le cas la requête s’est bien terminée, on peut apporter la modification à LEDState par la ligne suivante :

  document.getElementById("LEDState").innerHTML = this.responseText ;

Là encore c’est du compacte !

Affecter à LEDState ( repéré par "id" à l’intérieur de cette page ) la chaine reçue du serveur sous forme de texte.

  xhttp.open("GET", "setLED ?LEDState="+led, true) ;

Initialiser la requête : traitement de type "GET", "setLED ?LEDState="+led veut dire "la valeur actuelle, suite au clic, est fournie par "led"", true signifie "asynchrone".

  xhttp.send() ;

Envoyer la requête au serveur

Logiciel

Pour l’installation de la bibliothèque ESP 32/8266 voir

https://randomnerdtutorials.com/dow...

ESP_32_AJAX_Demo_210119 (texte, 2.8 ko)

Ce sketch est une version simplifiée d’un mélange de deux exemples https://robotronixmakr.wordpress.com/

et https://circuits4you.com/2018/02/04...

Annexe : Méthodes et propriétés principales de l’objet XMLHttpRequest

  Méthode newXMLHttpRequest()

Création de l’objet XMLHttpRequest

  Méthode open spécifie le type de requête, ici GET, asynchrone c’est à dire que le client ne se met pas en attente de la réponse du serveur, il la traitera quand elle arrivera.

  Méthode send Envoie la requête au serveur

  Propriété readyState

Sa valeur varie de

— 0 "objet créé mais non initialisé"

— à 4, ’la chaîne venant du serveur a été reçue’

C’est cette dernière valeur qui nous intéresse.

  Propriété status

Peut prendre au moins 4 valeurs : 200= "OK,Tout va bien", 403 = "Forbidden", 404 = "Not Found"(la classique Page non trouvée). C’est la valeur 200 qui nous intéresse.

  Propriété onreadystatchange

C’est une fonction qui s’execute à chaque changement de valeur de readyState

  Propriété responseText

Fonction qui met sous forme de chaine la valeur à mettre à jour