Acceso a los datos de un fichero XML mediante AJAX y DOM en JavaScript

por
Tiempo de lectura: 2 minutos

Buenas tardes a todos,

Seguimos con los tutoriales de JavaScript. Hoy os voy a enseñar a hacer un AJAX en JavaScript, para acceder a los datos de un fichero XML.

¿Primero os preguntareis que es un AJAX?

De forma rápida, clara y concisa, es una técnica en el desarrollo web que permite, leer los datos de un servidor, después de que se haya cargado la página, actualizar una página web sin que se haya recargado el navegador y envía datos al servidor en segundo plano.

Vamos con el ejemplo:

Este XML lo tenéis en: https://www.w3schools.com/

<?xml version="1.0" encoding="UTF-8"?>
<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>
	<CD>
		<TITLE>Eros</TITLE>
		<ARTIST>Eros Ramazzotti</ARTIST>
		<COUNTRY>EU</COUNTRY>
		<COMPANY>BMG</COMPANY>
		<PRICE>9.90</PRICE>
		<YEAR>1997</YEAR>
	</CD>
</CATALOG>

Y el Ajax que he generado para el ejemplo es el siguiente:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>devcodelight</title>
    <script>
        //CABECERA COMÚN PARA CUALQUIER AJAX DE JAVASCRIPT
        var peticion = "";
        if (window.XMLHttpRequest) {
            peticion = new XMLHttpRequest();
        }
        else if (window.ActiveXObject) {
            peticion = new ActiveXObject("Microsoft.XMLHTTP");
        }
        //FUNCIÓN QUE LLAMAMOS EN EL BOTON
        function peticionAjax() {
            peticion.onreadystatechange = muestraContenido;
            peticion.open("GET", "cd_catalog.xml", true);
            peticion.send(null);

        }
        //MOSTRAMOS LOS DATOS AL PULSAR EL BOTÓN
        function muestraContenido() {
            if (peticion.readyState == 4 && peticion.status == 200) {
                var texto = "";
                var infoCatalogoCDs = peticion.responseXML;
                var titulo, artista, anio;
                var cds = infoCatalogoCDs.getElementsByTagName("CD");
                //console.log(cds);
                //RECORREMOS TODOS LOS CDS QUE HAY EN EL FICHERO
                for (var i = 0; i < cds.length; i++) {
                    titulo = infoCatalogoCDs.getElementsByTagName("TITLE")[i].firstChild.nodeValue;
                    artista = infoCatalogoCDs.getElementsByTagName("ARTIST")[i].firstChild.nodeValue;
                    anio = infoCatalogoCDs.getElementsByTagName("YEAR")[i].firstChild.nodeValue;

                    texto += "Título:" + "<font color ='blue'>" + titulo + "</font>" + "</br>";
                    texto += "Artista:" + "<font color ='blue'>" + artista + "</font>" + "</br>";
                    texto += "Año:" + "<font color ='blue'>" + anio + "</font>" + "</br>";
                    texto += "</br>"
                }

                document.getElementById("miDiv").innerHTML = texto;
            }

        }
    </script>
</head>

<body>
    <h1>Ajax Devcodelight</h1>
    <form name="miForm">
        <input type="button" value="Mostrar Datos" onclick="peticionAjax();">
        <div id="miDiv"></div>
    </form>
</body>
</html>

Cualquier duda que os surja, no dudéis en dejar vuestro comentario.

Os muestro el resultado de lo que nos muestra nuestro AJAX

Como no hemos accionado el botón que hace la llamada, no nos muestra nada, a continuación, pulsando el botón y realizando la petición, nos muestra los siguientes datos:

En el siguiente tutorial os voy a mostrar otro AJAX pero accediendo a los datos de diferentes XML dependiendo de la opción que marque en el select.

Como siempre digo, espero que os guste, pero sobre todo que os sirva 🙂

Post Views: 50

Deja un comentario