Cuando realizamos una petición AJAX, que nos devuelve la respuesta en formato XML, dichos datos los tendremos que consultar en la propiedad responseXML del objeto XMLHttpRequest.
Lo primero que hemos creado es un archivo datosxml.php que devuelve un conjunto de datos sobre nuestros CDs en formato XML. Como siempre, este fichero deberás localizarlo en la carpeta htdocs de servidor ya que será al que le haremos la petición.
<?php
// Leemos el contenido del fichero XML
// e imprimimos su contenido.
// Muy importante indicar al navegador que va a recibir contenido XML
// eso lo hacemos con la siguiente cabecera:
header("Content-Type: text/xml");
$ficheroxml = "<?xml version=\"1.0\" encoding=\"utf-8\"?>";
$ficheroxml .= "
<CATALOG>
<CD>
<TITLE>Empire Burlesque</TITLE>
<ARTIST>Bob Dylan</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>Columbia</COMPANY>
<PRICE>10.90</PRICE>
<YEAR>1985</YEAR>
</CD>
<CD>
<TITLE>Hide your heart</TITLE>
<ARTIST>Bonnie Tyler</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>CBS Records</COMPANY>
<PRICE>9.90</PRICE>
<YEAR>1988</YEAR>
</CD>
<CD>
<TITLE>Greatest Hits</TITLE>
<ARTIST>Dolly Parton</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>RCA</COMPANY>
<PRICE>9.90</PRICE>
<YEAR>1982</YEAR>
</CD>
<CD>
<TITLE>Still got the blues</TITLE>
<ARTIST>Gary Moore</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>Virgin records</COMPANY>
<PRICE>10.20</PRICE>
<YEAR>1990</YEAR>
</CD>
</CATALOG>";
echo $ficheroxml;
?>También hemos creado un fichero para procesar una petición asíncrona para estos datos en XML. El contenido del fichero es el siguiente.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DWEC07.- Ejemplo petición XML</title>
<script type="text/javascript">
let peticion;
const iniciar = () => {
peticion = new XMLHttpRequest();
peticion.open('GET', "http://localhost/datosxml.php");
peticion.send();
peticion.addEventListener("load", cargada);
}
const cargada = () => {
let resultados = '';
let cds = peticion.responseXML.documentElement.getElementsByTagName("CD");
resultados += '<ul>';
for (let i = 0; i < cds.length; i++) {
resultados += `<li><b>CD nº ${i + 1}</b><ul>`;
resultados += `<li><b>Título:</b> ${cds[i].getElementsByTagName('TITLE')[0].innerHTML}</li>`;
resultados += `<li><b>Artista:</b> ${cds[i].getElementsByTagName('ARTIST')[0].innerHTML}</li>`;
resultados += `<li><b>País:</b> ${cds[i].getElementsByTagName('COUNTRY')[0].innerHTML}</li>`;
resultados += `<li><b>Compania:</b> ${cds[i].getElementsByTagName('COMPANY')[0].innerHTML}</li>`;
resultados += `<li><b>Precio:</b> ${cds[i].getElementsByTagName('PRICE')[0].innerHTML}</li>`;
resultados += `<li><b>Año:</b> ${cds[i].getElementsByTagName('YEAR')[0].innerHTML}</li>`;
resultados += `</li></ul>`;
}
resultados += '</ul>';
document.getElementById("resultados").innerHTML = resultados;
}
window.addEventListener("load", iniciar, false);
</script>
<style>
#resultados{
background: yellow;
}
</style>
</head>
<body>
<p>
A continuación se cargarán por AJAX los datos recibidos en la solicitud ASINCRONA:
</p>
<p>
Contenedor resultados:
<div id="resultados"></div>
</p>
</body>
</html>
En la función iniciar(), le hemos dicho que cargue de forma asíncrona, empleando el método GET, el fichero localizado en la URL: http://localhost/datosxml.php.
Cuando se carga la petición, nos quedamos con los datos XML mediante la propiedad peticion.responseXML la cual luego consultamos por sus elementos CD. Posteriormente, para cada elemento creamos una lista con cada uno de sus elementos: título, artista, país, etc.