Méthode load de Jquery... sans Jquery (Vanilla JS)
Bonjour,
Je suis entrain de développer un site web et je suis face à un petit soucis. Cela fait longtemps que je n'ai pas fait de JS et malgré mes recherches, je ne trouve pas de réponse.
Voilà, je cherche à appeler une autre page de mon site en Ajax lorsque le visiteur cliquera sur un lien en particulier. Pour le moment l'écouteur d'évènement de type click n'est pas créé (ce n'est pas le plus important / urgent), et je précise que la page à appeler se trouve bien sur le même site / même domaine.
Voici ce que j'ai fait :
<script>
xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
var contentXHR = xhr.responseText;
document.getElementById("container").innerHTML = contentXHR;
}
}
xhr.open("GET", "http://www.monsite.fr/monfichier.html", true);
xhr.send(null);
</script>Cela fonctionne.
Je récupère bien le code html de la page appelée (dans mon exemple : http://www.monsite.fr/monfichier.html)... vraiment tout le code html... alors que je souhaite récupérer qu'une petite partie de la page passée en argument.
Je sais que cela est possible en Jquery, via la méthode Load, mais impossible de trouver une solution pour faire la même chose en Vanilla JS.
Personnellement, je pensais simplement parcourir le code récupéré en le parsant. Mais cela ne semble pas possible car je récupére le contenu via xhr.responseText... alors qu'il faudrait que ça soit via xhr.responseXML... mais cela me retourne null... car d'après mes recherches cela est dû au fait que la page récupérée n'est pas un document xml correctement formé (selon MDN Web Docs, section responseXML)... ce qui est étonnant car selon moi une page web est avant tout un document xml.
Auriez-vous des pistes ?
5 réponses
Re,
Je viens de trouver ceci, DOMParser, cela fonctionne. Mais est-ce la bonne méthode ? :
<script>
var xhr = new XMLHttpRequest();
var parser = new DOMParser();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
var parserContent = parser.parseFromString(xhr.responseText,"text/html").getElementById("container");
/* container : correspond à la section html que je souhaite récupérer se trouvant dans la page http://www.monsite.fr/monfichier.html */
console.log(parserContent);
}
}
xhr.open("GET", "http://www.monsite.fr/monfichier.html", true);
xhr.send(null);
</script>Cela fonctionne-t-il sur tous les navigateurs ?
Bonjour.
Il te suffit normalement d'ajouter :
xhr.responseType = 'document';
xhr.overrideMimeType('text/html');De cette manière tu récupèrera dans xhr.responseXML #document, ce qui te permettra de pouvoir parcourir le DOM du fichier ciblé.
Re,
<script>
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
console.log(xhr.responseXML.getElementById("container"));
}
}
xhr.open("GET", "http://www.monsite.fr/monfichier.html", true);
xhr.responseType = 'document';
xhr.overrideMimeType('text/html');
xhr.send(null);
</script>En effet, cela fonctionne. Sur la documentation MDN Web Docs, j'avais bien vu la méthode overrideMimeType, mais je n'avais pas compris qu'il était possible de mettre autre chose que du "text/xml" et surtout responseType, n'est pas mentionné sur cette page, mais sur celle-ci https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/overrideMimeType ou https://developer.mozilla.org/fr/docs/Web/API/XMLHttpRequest/Utiliser_XMLHttpRequest#G%C3%A9rer_les_donn%C3%A9es_binaires
Autre question, mis à part si l'utilisateur n'a pas activé Javascript... y-a-t-il un risque pour que l'appel ajax ne fonctionne pas... (je ne pense pas étant donné que tous les navigateurs récents utilisent les appels Ajax) ?
Merci pour ton retour
Autre question, mis à part si l'utilisateur n'a pas activé Javascript... y-a-t-il un risque pour que l'appel ajax ne fonctionne pas... (je ne pense pas étant donné que tous les navigateurs récents utilisent les appels Ajax) ?
Il te faut prévoir les deux cas, le chargement de la page via ajax ou en navigation d'origine.
En ce qui concerne le navigateur c'est différent, n'oublies pas que le javascript qui se trouve sur tes pages, sont dépendant de document et non de navigator, donc du javascript peut être fonctionnel pour le navigateur mais pas forcément pour la page affiché.
Tu parlais d'un lien pour faire appel à la page via ajax, il te suffit donc via javascript de désactiver le comportement par défaut du navigateur lors du click sur celui-ci, de cette manière si le javascript est activé le chargement de la nouvelle page ne se fera pas et sera chargé via ajax et dans le cas contraire ça ouvrira la page via le chargement normal.
Salut Marc,
Je vois que tu as bien réussi à résoudre le problème que tu avais TOP !
Par contre question, tu arrives le faire fonctionner sur tous les navigateurs, même Internet Explorer 11 ? Ou ça ne marche que sous Edge ?
Autre petite question, c'est un site dans quel domaine que tu as fait - si t'as un lien pour regarder ton #Toptravail ;)
Merci,
alex