Fonction alert modifie responseText. Pourquoi ?

**Ostalada** · 03/06/2019, 16h22

Bonjour à tous,

Néophyte en AJAX, j'ai développé le script ci-dessous (simplifié pour ce topic).
L'idée est simple. Dans une page appelante, au click d'un bouton, je demande le contenu d'un autre fichier.
Mais voilà que je rencontre un os. Un détail important à dû m'échapper lors de la lecture de la documentation.

Voici le fichier "hello_world.php" appelé.

Code :

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

<p>Hello world!</p>

Et voici le page appelante. Avec ce script, rien ne s'affiche dans la console.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<body>
   <button id="click_me">Click Me</button>
</body>
 
 <script>
    var click_me =  document.getElementById('click_me');	
    click_me.addEventListener('click', function() {
 
        var xhr = new XMLHttpRequest();
        xhr.open('GET','hello_world.php');
        xhr.send(null);
        console.log(xhr.responseText);
 
     }, false);	
</script>

Mais si je fais précéder l'appel à la console d'un alert comme ci-dessous, la console affiche bien cette fois "<p>Hello World</p>". L'alert n'affiche rien quant à lui.
Pourquoi le fait d'ajouter la fonction alert change la réponse dans la console ?

Code :

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
<body>
   <button id="click_me">Click Me</button>
</body>
 
 <script>
    var click_me =  document.getElementById('click_me');	
    click_me.addEventListener('click', function() {
 
        var xhr = new XMLHttpRequest();
        xhr.open('GET','hello_world.php');
        xhr.send(null);
        alert(xhr.responseText);
        console.log(xhr.responseText);
 
     }, false);	
</script>

Enfin, quand j'essaye d'afficher le xhr au complet dans la console comme ci-dessous, tout est normal.
Autrement dit, parmi toutes les propriétés du xhr qui s'affiche, ResponseText affiche bel et bien "<p>Hello World</p>".
Pourquoi donc je ne peux pas accéder à xhr.responseText directement ?

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<body>
   <button id="click_me">Click Me</button>
</body>
 
 <script>
    var click_me =  document.getElementById('click_me');	
    click_me.addEventListener('click', function() {
 
        var xhr = new XMLHttpRequest();
        xhr.open('GET','hello_world.php');
        xhr.send(null);
        console.log(xhr);
 
     }, false);	
</script>

Je vous prie de m'excuser d'avance si ce sujet à déjà été traité. Je n'ai pas dû trouver les bons mots clé.
Merci d'avance pour votre aide. Alex.

**andry.aime** · 04/06/2019, 07h34

Bonjour et Bienvenue sur Developpez.

L'alert ne modifie pas le responseText, c'est une valeur en lecture seule. Ton problème, c'est parce que par défaut, la requête se lance en mode asynchrone, donc quand tu ne mets pas l'alert, la requête n'a pas encore reçu le retour du serveur quand tu faits l'affichage dans le log.

Code :

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

1
2
3
4
var xhr = new XMLHttpRequest();
        xhr.open('GET','hello_world.php', false); // Synchrone, ce qui n'est pas recommandé
        xhr.send(null);
        console.log(xhr.responseText);

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function()
{
     if (xhr.readyState == 4 ){
       if(xhr.status == 200){
         console.log(xhr.responseText);
     }
   }
}
        xhr.open('GET','hello_world.php'); // Asynchrone
        xhr.send(null);

**NoSmoking** · 04/06/2019, 09h48

Bonjour,
à lire
↪ Un classique AJAX : utiliser les données au bon moment !

**Ostalada** · 04/06/2019, 11h50

Merci beaucoup andry.aime et NoSmoking ! C'est parfait.
Et oui, afficher une réponse qui n'existe pas encore c'est compliqué. Raaaa.
Je passe le topic en résolu.

Fonction alert modifie responseText. Pourquoi ?

AJAX

Discussions similaires

Partager

Partager