Ejemplo de Ver archivo XML en HTML

Inicio » XML » Ver archivo XML en HTML
Autor: Redacción Ejemplode.com, año 2017

Para mostrar un XML usando HTML no es posible, para eso tenemos que usar algo de JavaScript, pero aún así es posible.

En este ejemplo mostraremos el Ejemplo de Catálogo de CD en XML, en una pagina HTML usando HTML y Javascript.

Lo primero que haremos será guardar el Ejemplo de Catálogo de CD en XML como catalogo.xml, y crear un archivo .html con el nombre que queramos, y le pondremos lo siguiente:

Código:

<html>
<body>

<script type="text/javascript">
var xmlDoc=null;
if (window.ActiveXObject)
{// code for IE
xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
}
else if (document.implementation.createDocument)
{// code for Mozilla, Firefox, Opera, etc.
xmlDoc=document.implementation.createDocument("","",null);
}
else
{
alert('Tu navegador no soporta esta funcion');
}
if (xmlDoc!=null)
{
xmlDoc.async=false;
xmlDoc.load("catalogo.xml");
var x=xmlDoc.getElementsByTagName("CD");

document.write("<table border='1'>");
document.write("<thead>");
document.write("<tr><th>Artista</th><th>Album</th></tr>");
document.write("</thead>");

document.write("<tfoot>");
document.write("<tr><th colspan='2'>Esta es mi coleccion de albums</th></tr>");
document.write("</tfoot>");

for (var i=0;i<x.length;i++)
{
document.write("<tr>");
document.write("<td>");
document.write(x[i].getElementsByTagName("ARTISTA")[0].childNodes[0].nodeValue);
document.write("</td>");

document.write("<td>");
document.write(x[i].getElementsByTagName("TITULO")[0].childNodes[0].nodeValue);
document.write("</td>");
document.write("</tr>");
}
document.write("</table>");
}
</script>

</body>
</html>

 

Y con este codigo, nos mostraría una tabla, con el titulo ARTISTA, y ALBUM, y luego los respectivos datos del XML. Podremos modificarlo, y agregar, editar, o eliminar, etc.

Citado APA: (A. 2009,01. Ejemplo de Ver archivo XML en HTML. Revista Ejemplode.com. Obtenido 01, 2009, de http://www.ejemplode.com/21-xml/527-ejemplo_de_ver_archivo_xml_en_html.html)

¡Ayúdanos a ayudarte! Por favor comparte este artículo.

  
XML
Autor: Redacción Ejemplode.com, año 2017

Búsqueda:

Búsqueda personalizada

Comentarios:

  1. hola! disculpa, estoy queriendo leer y cargar varios archivos XML para poder hacer una búsqueda, aún no he logrado hacerlo, ojalá puedas proporcionarme un ejemplo.
    Por Nancy 05.29.16 a las 4:48:56
    1. Muy buen ejemplo, serias tan amables de
      suministrarme el ejemplo para poder aplicarlo.
      Por Antonio Jesus 05.05.12 a las 12:32:08
      1. Alguien me podria ayudar, antes podia ver una tabla, ahora con Win-7 me muestra el codigo.
        http://www.ecopetrol.com.co/xml_datagraph.aspx?gra_id=1&per_id=0

        Que tengo que hacer? gracias.
        MI email es oscint1@hotmail.com
        Por Oscar Integro 02.04.12 a las 5:19:26
        1. caa sa ferfee re erer
          Por dddddd 07.23.11 a las 1:34:06
          1. todo bien
            Por juan 03.14.11 a las 20:40:46
            1. Miren ya revise el codigo tiene pequeños errores de sintaxis (Bueno solo los q yo he visto) hago el archvo xml pruebo el html y si me aparece la tabla, pero no me aparece los datos que tengo en el archivo xml.
              tal vez no estoi haciendo referencia correctamente; por fix ayudenme!!!!
              Gracias :)

              Por Mar 01.18.11 a las 18:56:33
              1. Miren necesito hacer una página utilizando xhtml y xml;
                estoi utilizando dreamweber y inserte el codigo de arriva y no me hace nada.
                me podrian ayudar; plis!!!
                Por Mar 01.18.11 a las 16:05:46
                1. En el chrome no me funciona, ¿tiene solución?
                  Por Cristian 12.27.10 a las 18:52:18
                  1. Gracias
                    Por jose 12.21.10 a las 12:59:22
                    1. Como hacer si el XML es uno que devuelve un WebService.
                      Trate poniendo la ruta completa del webservice con todos sus parametros pero no pasa nada...
                      Por Trucker 12.07.10 a las 18:10:29
                      1. gracias
                        Por jose 11.18.10 a las 21:36:13
                        1. prueba
                          Por Diego Armando 11.12.10 a las 19:18:45
                          1. no veo donde está el archivo xml, ¿por favor me ayudas?
                            Por franklin 07.28.10 a las 17:23:25
                            1. lo voy a probar
                              Por maximo 04.30.10 a las 15:39:56
                              1. excelente, voy a utilizar el codigo muchas gracias
                                Por posicionamiento seo 01.02.10 a las 15:07:13

                                Deja un comentario



Tweet