AJAX/JS responseXML retourne NULL
RésoluZenZeno Messages postés 6 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
Je suis en train d'apprendre les requêtes asynchrones en javascript avec AJAX afin de réactualiser certaines portions de ma page. Il y a quelque chose que je ne comprends pas par rapport à la réponse du serveur avec responseXML, je ne reçois rien ou plutot je récupère null. C'est vraiment un code tout simple de test, le voici :
let xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState == DONE && xhr.status == 200){
let doc = xhr.responseXML;
alert(doc);
}
}
xhr.open('GET', 'index.php');
xhr.send(null);
Je tiens à dire que je teste mon code sur un serveur web local qui est WampServer
Windows / Chrome 113.0.0.0
- Comment ouvrir un fichier null ?
- Comment ouvrir un fichier epub ? - Guide
- Comment ouvrir un fichier bin ? - Guide
- Comment ouvrir un fichier dat - Guide
- Comment ouvrir un fichier docx ? - Guide
- Comment réduire la taille d'un fichier - Guide
7 réponses
Bonjour
1 - que ta fiche la console sur la ligne concernant ton appel Ajax ? ( Pour plus de facilité pour débugger de l'Ajax, je t'invite fortement à utiliser Firefox et, dans l'onglet console de ton navigateur Internet, bien pensé à cocher la case xhr )
2 - que contient ton fichier index.php ?
Merci de ta réponse rapide ^^
Je suis sur Chrome, je suis allé dans les outils de développement, section "Network" puis j'ai cliqué sur "Fetch/XHR", voici le screen, je remarque que j'ai bien une réponse et que index.php a bien été renvoyée avec le status 200 ->
La page contient pas mal de code, HTML/CSS(externe)/PHP/SQL et la partie JS qui traite de XMLHttpRequest
AJAX sert ici à actualiser la partie messages privés qui se déploie avec l'icone représentant un message en bas à droite
Le script PHP que tu appelles dans ton AJAX ne doit retourner QUE les informations que tu veux récupérer et non toute une page html ( qui plus est.. qui semble la même que tu utilises pour déclencher ton appel ajax...)
En gros..
Ta page index.php (qui est celle que tu affiches à l'écran )
Un autre script php qui ira chercher les infos que tu veux afficher dans ta page
Un script ajax que tu mettras dans ta page index qui ira chercher ces infos dans ce second script...
Ensuite, pour debugger ..
- Ajouter dans ton code un console.log de la variable xhr.response (avant ton alert(doc)) et regarder ce que ça affiche dans la console js du navigateur
- Regarder ce qu'il y a dans l'onglet RESPONSE de ton appel ajax
.
Si ça ne fonctionne toujours pas, nous montrer le contenu du fichier php appelé par ton ajax ( qui n'est donc pas le code de la page qui s'affiche actuellement à l'écran hein..)
PS: Par contre j'insiste... FIREFOX est largement plus pratique lorsqu'il faut débuguer du Javascript et de l'ajax..
Merci pour ta réponse,
Oui je comprends en ce qui concerne un fichier PHP détaché qui est appelé par AJAX
En ce qui concerne xhr.response, que ce soit dans la console avec "console.log(xhr.response);" ou par l'onglet "response" dans le debugger, on retrouve tout le code présent dans le fichier "index.php"
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre questionDésolé j'avais pas trop bien compris,
Du coup j'ai fais un test en appelant un autre fichier PHP que index.php qui s'appelle testajax.php
Voici le code JS :
let xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
let doc = xhr.responseXML;
console.log(xhr.response);
alert(doc);
}
}
let valeur1 = 10;
let valeur2 = "Jimmy";
let urlTarget = 'PHP/testajax.php?valeur1=' + encodeURIComponent(valeur1) + '&valeur2=' + encodeURIComponent(valeur2);
xhr.open('GET', urlTarget, true);
xhr.send(null);
Et voici le code PHP de testajax.php
<?php
if(isset($_GET['valeur1']) && isset($_GET['valeur2'])){
echo '<p>' . $_GET['valeur1'] . '</p>';
echo '<p>' . $_GET['valeur2'] . '</p>';
}
?>
Que ce soit dans console.log(xhr.response); ou dans l'onglet response du debugger, on retrouve ceci :
<p>10</p><p>Jimmy</p>