Gli ultimi tutorial di sviluppo web
 

AJAX XML Esempio


AJAX può essere utilizzato per la comunicazione interattiva con un XML file.


AJAX XML Example AJAX XML Example

Il seguente esempio dimostrerà come una pagina web può recuperare le informazioni da un file XML con AJAX:

Esempio

Prova tu stesso "


esempio spiegato

Quando un utente fa clic sul "Get CD info" pulsante sopra, la loadDoc() viene eseguita la funzione.

Il loadDoc() funzione crea un XMLHttpRequest oggetto, aggiunge la funzione da eseguire quando la risposta del server è pronto, e invia la richiesta via al server.

Quando la risposta del server è pronto, una tabella HTML è costruito, nodi (elementi) vengono estratti dal file XML, e aggiorna infine la txtCDInfo segnaposto con la tabella HTML pieno di dati 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;
}

Il file XML

Il file XML utilizzato nell'esempio di cui sopra si presenta così: " cd_catalog.xml ".