AJAX Exemple XML

AJAX peut être utilisé pour une communication interactive avec des fichiers XML.

Exemple AJAX XML

L'exemple suivant montrera comment une page web utilise AJAX pour lire des informations à partir d'un fichier XML :

Exemple




Essayez-le vous-même »

Analyse de l'exemple - Fonction loadXMLDoc()

Lorsque l'utilisateur clique sur le bouton « Obtenir ma collection de CD » ci-dessus, la fonction loadXMLDoc() est exécutée.

La fonction loadXMLDoc() crée un objet XMLHttpRequest, ajoute une fonction à exécuter lorsque la réponse du serveur est prête, et envoie la requête au serveur.

Lorsque la réponse du serveur est prête, un tableau HTML est construit, des nœuds (éléments) sont extraits du fichier XML, et enfin les données XML sont utilisées pour remplir l'élément de tableau avec id="demo" :

Charger un document XML de manière asynchrone

function loadXMLDoc() { var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { myFunction(this); } }; xhttp.open("GET", "cd_catalog.xml", true); xhttp.send(); } function myFunction(xml) { var i; var xmlDoc = xml.responseXML; var table="<tr><th>Artiste</th><th>Titre</th></tr>"; var x = xmlDoc.getElementsByTagName("CD"); for (i = 0; i <x.length; i++) { table += "<tr><td>" + x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue + "</td><td>" + x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue + "</td></tr>"; } document.getElementById("demo").innerHTML = table; }

Page serveur AJAX

La page serveur utilisée dans l'exemple ci-dessus est en fait un fichier nommé "" au format XML.

Autres extensions