Derniers tutoriels de développement web
 

AJAX XML Exemple


AJAX peut être utilisé pour la communication interactive avec un XML fichier.


AJAX XML Example AJAX XML Example

L'exemple suivant montrera comment une page Web peut récupérer des informations à partir d'un fichier XML avec AJAX:

Exemple

Essayez - le vous - même »


Exemple Explained

Lorsqu'un utilisateur clique sur le "Get CD info" bouton ci - dessus, le loadDoc() fonction est exécutée.

Le loadDoc() fonction crée un XMLHttpRequest objet, ajoute la fonction à exécuter lorsque la réponse du serveur est prêt, et envoie la demande hors du serveur.

Lorsque la réponse du serveur est prêt, un tableau HTML est construit, les nœuds (éléments) sont extraits du fichier XML, et il met à jour enfin le txtCDInfo espace réservé à la table de HTML remplie de données XML:

LoadXMLDoc()

function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (xhttp.readyState == 4 && xhttp.status == 200) {
    myFunction(xhttp);
    }
  };
  xhttp.open("GET", "cd_catalog.xml", true);
  xhttp.send();
}
function myFunction(xml) {
  var i;
  var xmlDoc = xml.responseXML;
  var table="<tr><th>Artist</th><th>Title</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;
}

Le fichier XML

Le fichier XML utilisé dans l'exemple ci - dessus ressemble à ceci: " cd_catalog.xml ".