Ejemplo XML de AJAX
AJAX se puede utilizar para la comunicación interactiva con un archivo XML.
Ejemplo XML de AJAX
El siguiente ejemplo demostrará cómo una página web puede obtener información de un archivo XML con AJAX:
Ejemplo
Ejemplo explicado
Cuando un usuario hace clic en el botón "Obtener información del CD" de arriba, loadDoc()
se ejecuta la función.
La loadDoc()
función crea un XMLHttpRequest
objeto, agrega la función que se ejecutará cuando la respuesta del servidor esté lista y envía la solicitud al servidor.
Cuando la respuesta del servidor está lista, se construye una tabla HTML, los nodos (elementos) se extraen del archivo XML y finalmente actualiza el elemento "demo" con la tabla HTML llena de datos XML:
function loadDoc() {
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {myFunction(this);}
xhttp.open("GET", "cd_catalog.xml");
xhttp.send();
}
function myFunction(xml) {
const xmlDoc = xml.responseXML;
const x = xmlDoc.getElementsByTagName("CD");
let table="<tr><th>Artist</th><th>Title</th></tr>";
for (let 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 utilizado en el ejemplo anterior tiene este aspecto: " cd_catalog.xml ".