Los últimos tutoriales de desarrollo web
 

AJAX Ejemplo XML


AJAX se puede utilizar para la comunicación interactiva con un XML archivo.


AJAX XML Example AJAX XML Example

El siguiente ejemplo demostrará cómo una página web puede recuperar información de un archivo XML con AJAX:

Ejemplo

Inténtalo tú mismo "


ejemplo Explicación

Cuando un usuario hace clic en el "Get CD info" botón de arriba, el loadDoc() se ejecuta la función.

El loadDoc() función crea un XMLHttpRequest objeto, añade la función a ejecutar cuando la respuesta del servidor está listo, y envía la solicitud al servidor fuera.

Cuando la respuesta del servidor está listo, una tabla HTML se construye, los nodos (elementos) se extraen del archivo XML, y finalmente se actualiza el txtCDInfo marcador de posición con la tabla HTML lleno de datos 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;
}

El archivo XML

El archivo XML que se utiliza en el ejemplo anterior se ve así: " cd_catalog.xml ".