Comportement incompréhensible d'un objet xhr

**Maljuna Kris** · 12/03/2024, 09h24

Tout d'abord, bonjour à tout le monde.
Je sors de ma zone de confort avec AJAX car si je me débrouille assez bien avec PHP cette communication entre le serveur et le navigateur via l'objet XMLHTTRequet est un concept assez nouveau pour mes vieux neurones (j'ai 72 ans au compteur) alors j'espère votre indulgence.
Je vous explique ce que j'essaye de réaliser.
J'ai un site développé en PHP dans lequel je mets en ligne mes chansons (1061 à ce jour) et je souhaite proposer une nouvelle fonctionnalité que je vous ai résumée dans la petite page HTML (clone.html) de test dont je vous joins le code, les pages du site étant générées dynamiquement en PHP par le serveur.
Je précise que, pour l'instant, je développe cela sur mon serveur Apache/PHP local sous Ubuntu.

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
    <head>
	<meta http-equiv="CONTENT-TYPE" content="text/html; charset=UTF-8">
	<title>115 − Indolente</title>
	<meta name="AUTHOR" content="Maljuna Kris">
	<meta name="CREATED" content="20130823">
        <meta name="Description" content="Le répertoire des chansons de Papi MoKo">
	<meta name="Keywords" content="chants, chansons, tablatures, guitare, chords, mp3, ogg">
        <script type="text/javascript" src="ajax3.js"></script>
    </head>
    <body>
        <div>
                <span id="vues">52 vues</span>
                <button class="emp" id="love" title="j'adore : 5" type="submit" value="115" onClick="xhrEmpathie(this.value,this.id);"><img src="../../img/love.jpg"/></button>
                <button class="emp" id="aplause" title="bravo : 0" type="submit" value="115" onClick="xhrEmpathie(this.value,this.id);"><img src="../../img/aplause.jpg"/></button>
                <button class="emp" id="bad" title="bof ! : 0" type="submit" value="115" onClick="xhrEmpathie(this.value,this.id);" ><img src="../../img/bad.jpg"/></button>
                <button class="emp" id="beurk" title="beurk ! : 0" type="submit" value="115" onClick="xhrEmpathie(this.value,this.id);" ><img src="../../img/beurk.jpg"/></button>
                <br />vous pouvez donner votre avis en cliquant l'une des icônes
       </div>
   </body>
</html>

La problématique qui m'accapare concerne donc l'appel de la fonction Javascript xhrEmpathie(this.value,this.id) déclenché par l'événement onClick de chacun des quatre boutons.
Voici une copie d'écran de la page clone.html
Nom : clone.jpg
Affichages : 122
Taille : 8,5 Ko

Nom : clone.jpg
Affichages : 122
Taille : 8,5 Ko

Au survol des boutons par le pointeur de souris s'affiche la valeur de l'attribut title de chaque bouton.
Le but de la nouvelle fonctionnalité est de mémoriser le comptage des ouvertures de la page (chanson) affichée et d'incrémenter un compteur pour chacun des quatre boutons de chaque page.
Les scripts PHP, testés à part, qui gèrent les comptages, incrémentations et sauvegardes sont parfaitement opérationnels.
J'ajoute que l'attribut value de chaque <button> contient ici 115 qui est l'identifiant de la chanson sur mon site.
Il ne me reste plus qu'à vous communiquer le script ajax.js et vous exposer le résultat aberrant (pour moi) que j'observe :

Code Javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
function xhrEmpathie(chant,bouton){
    var xhr=null;
    if (window.XMLHttpRequest) { 
        xhr = new XMLHttpRequest();
       }
    else if (window.ActiveXObject) 
       {
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
       }
     alert(' dans xhrEmpathie(l 10) : chant :>'+ chant+'<|'+' bouton :>'+ bouton+'<|');
     bloqueDebloqueBoutons(true);
     xhr.open("GET", "../../job.updateEmpathie.php?chant=" +chant + "&bouton= " + bouton, true);
     xhr.onreadystatechange = function(){handleAJAXReturn(xhr)};// fonction de callback
     xhr.send(null);
}
 
function handleAJAXReturn(xhr){
    var button, contesta;
    if (xhr.readyState == 4){
        if (xhr.status == 200){
         alert(' reçu dans handleAJAXReturn(l.21)-> xhr.responseText : '+xhr.responseText);
         contesta=xhr.responseText.split('|');// responseText vient de job.updateEmpathie.php via
                                                                 // echo $bouton,'|',$empathies[$chant][$bouton];
         alert('dans handleAJAXReturn(l 24) : contesta[0] '+contesta[0]+' contesta[1] : '+contesta[1]);
         button=document.getElementById(contesta[0]);
         alert('après button=document.getElementById(contesta[0]) '+contesta[0]+'  = '+ button);
         switch(contesta[0]){
                case 'love':
                        button.title="j’adore :";
                        break;
                case 'aplause':
                        button.title="bravo :";
                        break;
                case 'bad':
                        button.title="bof ! :";
                        break;
                case 'beurk':
                        button.title="beurk ! :";
                        break;
                }
        bloqueDebloqueBoutons(false);
        button.title +=contesta[1];
        alert(contesta[0]+' : '+button.title);    
        }
        else{
            alert('Pas glop pas glop');
           }
    }  
  }
 
function bloqueDebloqueBoutons(sens){
        let boutons=['love','aplause','bad','beurk'];
        for (var i = 0; i < boutons.length; i++){
                bouton=document.getElementById(boutons[i]);
                bouton.disabled=sens;
                }
        }

La fonction bascule bloqueDebloqueBoutons(sens) a pour but d'empêcher tout nouveau clic sur n'importe lequel des quatre boutons le temps du traitement.
Ce que j'observe (notamment via les alert() placé ici et là dans le code c'est que le fichier censé recevoir les données sauvegardées, 'empathie/empathie.txt', n'est pas impacté, les attributs title des boutons non plus. Par contre, les incrémentations consécutives sont affichées par les alert et, quand je rafraichis la page, la valeur incrémentée apparait bien dans les alert, même après avoir redémarré l'ordinateur (donc le serveur) alors que le code de clone.html est figé.
Je vous livre des copies d'écran des alert :
Nom : Alert-l10.jpg
Affichages : 103
Taille : 8,2 Ko

Nom : Alert-l10.jpg
Affichages : 103
Taille : 8,2 Ko

Nom : Alert-l21.jpg
Affichages : 104
Taille : 10,5 Ko

Nom : alert-l24.jpg
Affichages : 103
Taille : 10,8 Ko

Nom : Alert-l26.jpg
Affichages : 104
Taille : 9,5 Ko

Ai-je été suffisamment clair ?

**mathieu** · 12/03/2024, 11h55

dans le message de la ligne 26, la variable "button" contient null au lieu de la balise attendue.
vérifiez que getElementById est appelé avec le bon identifiant, il y a peut-être une espace qui s'est faufilée au début du retour du code php.

**Maljuna Kris** · 12/03/2024, 12h49

Merci de te donner la peine d'essayer de m'aider quand je teste le script PHP seul, l'echo final

Code PHP :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
echo $bouton,'|',$empathies[$chant][$bouton]; // pour faire mettre à jour le title du <button> de la page
                                                                                      // par la fonction Javascript de callback
                                                                                      // handleAJAXReturn(xhr)

me retourne bine 'love|6' sans espace.

**mathieu** · 12/03/2024, 13h22

je pense que vous êtes remonté trop vite dans le code. regardez juste sur la ligne 25 et essayez de trouver pourquoi il y a null dans cette variable.

pouvez-vous nous donner l'url de votre page de test ?

**Maljuna Kris** · 12/03/2024, 15h53

Alors j'ai mis la page de test clone.html sur mon site de diffusion avec les 4 fichiers jpg et le script ajax3.js ici https://www.avcxjo-moko-kantas.fr/clone.html
et là, effectivement les alertes non plus rien à voir…

**mathieu** · 12/03/2024, 17h49

j'ai trouvé un souci dans le code javascript, quand vous faites l'appel au code javascript, il y a un espace après "&bouton=".

cela veut dire qu'il y aussi un souci dans le code php si vous ne vérifiez pas que le code envoyé correspond aux 4 codes autorisés.

**Maljuna Kris** · 12/03/2024, 19h14

Deux mots : BRAVO et MERCI
Effectivement, comme job.updateEmpathie.php ne sera appelé que par Javascript je n’avais pas jugé, à tort, utile de vérifier que le nom du bouton (this.id) reçu en paramètre était bien un des quatre attendus.
Je vais attendre demain pour mettre le post en résolu et m'assurer que tout est désormais bien en ordre.
Le diable est dans le détail, dans le cas présent, dans l'interstice.
Encore un grand MERCI.

**Maljuna Kris** · 13/03/2024, 17h27

Bon, je reviens vers vous, hélas (surtout pour vous) parce que l’erreur signalée par mathieu corrigée, le script de test à partir du fichier clone.html fonctionne désormais nickel.
Le souci, c'est que le même script (javascript) appliqué à la page générée par php me renvoie toujours, via cette alert

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
button=document.getElementById(contesta[0]);
alert('après (l 167) button=document.getElementById(contesta[0]) |'+contesta[0]+'|  = '+ button);

, ce code erreur
Nom : erreur-l26.jpg
Affichages : 72
Taille : 14,9 Ko

Alors je vais jeter l'éponge un jour ou deux, prendre un peu de distance avec tout ça et j'y reviendrai dès que je me sentirai plus ouvert d'esprit.

**mathieu** · 13/03/2024, 18h18

c'est reparti pour la même méthode : vous affichez le contenu de la variable qui a un souci et vous remontez une ligne de code après l'autre pour voir d'où vient cette variable.

et pour suivre les requetes http, vous pouvez utiliser l'onglet "Réseau" de la console de développement de votre navigateur.
par exemple avec Firefox, faites Ctrl + Maj + E
https://developer.mozilla.org/fr/doc...ur_r%C3%A9seau

**Maljuna Kris** · 13/03/2024, 19h11

Merci mathieu pour cette leçon de méthodologie de débuggage, j'en ai bien besoin, je suis rouillé.

Concrètement, je vais devoir me mettre en retrait quelques jours (opération bénigne, mais opération quand même).
Ça va me laisser le temps de faire décanter tout ça pour reprendre dès le début du printemps.
Je ne manquerai pas de vous tenir informés de la suite.
Encore une fois, un grand et sincère MERCI!

**Maljuna Kris** · 15/03/2024, 08h35

J'ai procédé comme suit, sur mon serveur local j'ai appelé la page complète localhost/kanto/indolente qui, par la magie d'url-rewriting

Code HTTP :

Sélectionner tout - Visualiser dans une fenêtre à part

RewriteRule ^kanto/([a-z0-9\-]+) reroute.php?chant=$1

se transforme en localhost/reroute.php?chant=indolente.
J'ai testé et j'ai toujours la même erreur
Nom : erreur-l24.jpg
Affichages : 52
Taille : 14,2 Ko

Par contre, j'ai demandé à voir le code source (HTML) généré par PHP que j'ai sauvergardé en indolente.html et là plus d'erreur.

Du coup j'ai téléchargé indolent.html sur mon site hébergé : https://www.avcxjo-moko-kantas.fr/indolente.html où il fonctionne également sans problème comme on peut le vérifier.

Ce qui, d'un point de vue est rassurant, je ne dois plus être très loin de la solution, mais d'un autre côté me laisse complètement désemparé car je ne vois plus où chercher la source du problème…

Mais, comme déjà dit, je vais devoir me mettre en retrait physique de tout cela quelques temps pour des raisons de santé.

Peut-être que la distanciation spatio-temporelle d’avec le problème verra jaillir une idée lumineuse au sein de mes vieux neurones.

**Maljuna Kris** · 15/03/2024, 10h06

Il va donc me falloir regarder de ce côté…
J'espère qu'il suffira de modifier quelque chose dans le fichier .htaccess car du côté de l'hébergeur mutualisé je ne pourrai rien faire…

Code HTTP :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
RewriteEngine on
RewriteRule ^kanto/([a-z0-9\-]+) reroute.php?chant=$1

**Maljuna Kris** · 15/03/2024, 19h50

Si j'appelle page sans passer par la redirection :
localhost/reroute.php?chant=indolente
la procédure AJAX se déroule correctement
Si je passe par la directive du.htaccess en appelant
localhost/kanto/indolente
AJAX se perd.

**mathieu** · 15/03/2024, 20h03

finalement, vous repartez à l'attaque de ce problème maintenant et vous n'attendez pas le printemps (astrologique) ?

n'oubliez pas de nous montrez ce que vous voyez dans l'onglet réseau pour qu'on puisse vous aider.

Envoyé par mathieu

et pour suivre les requetes http, vous pouvez utiliser l'onglet "Réseau" de la console de développement de votre navigateur.
par exemple avec Firefox, faites Ctrl + Maj + E
https://developer.mozilla.org/fr/doc...ur_r%C3%A9seau

**Maljuna Kris** · 15/03/2024, 22h07

Envoyé par mathieu

n'oubliez pas de nous montrez ce que vous voyez dans l'onglet réseau pour qu'on puisse vous aider.

Ça c'est facile et explicite mais comment y remédier ?
avec localhost/kanto/indolente
Nom : via-kanto.jpg
Affichages : 35
Taille : 54,9 Ko

avec localhost/reroute.php?chant=indolente
Nom : via-reroute.jpg
Affichages : 34
Taille : 54,1 Ko

**mathieu** · 15/03/2024, 22h48

si le script est la racine du site, vous pouvez mettre le chemin "/job.updateEmpathie.php?chant..."

**Maljuna Kris** · 15/03/2024, 23h04

Jes !!!!
Ça fonctionne. Ouf, je vais pouvoir passer sur la table d'opération avec ce stress en moins.
Reste à tester demain matin sur le site chez l'hébergeur mais, là, je suis confiant.
Je ne trouve pas de mot suffisamment fort pour t'exprimer ma gratitude mathieu, sinon en espéranto DANKEGON !
Cela m'a replongé dans le bain de la programmation web et, du coup, j'ai une autre idée que j'essayerai d'implémenter à ma sortie de clinique pour exploiter cette pseudo-table empathie.txt (simple serialization d'un array PHP) pour afficher un hit-parade de dix chansons les plus plébiscitées.
Bon, reste à me souvenir comment l'on marque une discussion comme RÉSOLUE, je crois que c'est dans le titre initial de la discussion (de mémoire)

**mathieu** · 15/03/2024, 23h40

au sujet de l'utilisation d'un fichier comme base de données, j'ai un souvenir d'avoir eu des soucis avec ce système. je pense que dans le cas de plusieurs appel simultanés, un des scripts peut lire le fichier pendant qu'un autre l'écrit et cela donne comme résultat un fichier corrompu et la perte des données de ce fichier.
pour éviter cela, il vaut mieux utiliser un SGBDR comme mysql par exemple.

**Maljuna Kris** · 16/03/2024, 06h43

Là, on sort du sujet de ce forum.
Pour l'instant, je gère cela avec des verrous PHP (flock()) sur le fichier empathie.txt.
Si, à terme, ça doit poser problème je passerai par SQLite ; mais créer une base de données juste pour une table de six colonnes et (soyons optimistes quant à ma production lyrique) 1500 lignes ça m'apparaît comme un canon pour écraser une mouche.
Mais c'est gentil de t'inquiéter.

Comportement incompréhensible d'un objet xhr

AJAX

Discussions similaires

Partager

Partager