Fonction alert modifie responseText. Pourquoi ?
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:
<p>Hello world!</p>
Et voici le page appelante. Avec ce script, rien ne s'affiche dans la console.
Code:
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:
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:
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.
