Olá pessoal, neste artigo demonstrarei como ler e renderizar no seu HTML um arquivo XML, usando JavaScript. Para isso, necessitaremos de um servidor local, como Xamp ou Wamp server, por exemplo. No nosso exemplo, utilizaremos o Xamp.
Vamos começar?
Primeiro, criaremos um arquivo XML de exemplo. No nosso arquivo XML, teremos um catálogo com CDs. Cada CD possui um título e um artista. É importante especificar o tipo de codificação de caracteres no cabeçalho do nosso XML. O tipo de caractere usado nesse exemplo é do conjunto UTF-8.
Representaremos o catálogo com a tag <CATALOG>. Os CDs serão representados com a tag <CD> e teremos três CDs. Cada CD possui duas tags: <TITLE> e <ARTIST>, que possuem o nome do disco e nome do artista, respectivamente.
<?xml version="1.0" encoding="UTF-8"?> <CATALOG> <CD> <TITLE>Empire Burlesque</TITLE> <ARTIST>Bob Dylan</ARTIST> </CD> <CD> <TITLE>Hide your heart</TITLE> <ARTIST>Bonnie Tyler</ARTIST> </CD> <CD> <TITLE>Pavarotti Gala Concert</TITLE> <ARTIST>Luciano Pavarotti</ARTIST> </CD> </CATALOG>
Pronto, agora que já temos o nosso arquivo XML, precisamos de um script JavaScript para realizar a leitura e renderizar o nome de cada disco e artista no DOM.
Dentro de um documento HTML, abra uma tag <script> e, dentro de uma estrutura condicional, utilize o XMLHttpRequest para que ocorra a transferência de dados entre o cliente e o servidor. Começaria assim:
<script> if (window.XMLHttpRequest){ xmlhttp = new XMLHttpRequest(); } else { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } </script>
O ActiveXObject é utilizado para suporte em Internet Explorer, sendo opcional no nosso exemplo.
Precisamos utilizar agora os métodos open() e send(), para abrir e enviar ao servidor/cliente o nosso arquivo XML a ser lido. Utilizaremos o método GET para isso.
if (window.XMLHttpRequest){ xmlhttp = new XMLHttpRequest(); } else { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.open("GET", "file.xml", false); xmlhttp.send();
Agora, utilizando o método responseXML, faremos a leitura do documento XML:
document.write("<table border='1'>");
Com nossa tabela criada, precisamos agora capturar a tag XML que contém os atributos título e artista. Como sabemos, essa tag é a CD. Utilizaremos o getElementsByTagName para capturarmos esses valores:
let x = xmlDoc.getElementsByTagName("CD");
Feito isso, criaremos um laço de repetição para percorrer esta tag CD e, assim, imprimir os conteúdos. Utilizaremos o childNodes e o nodeValue para capturar o conteúdos das tags <ARTIST> e <TITLE> do XML:
for (let i = 0; i < x.length; i++){ document.write("<tr><td>"); document.write("Artista: " + x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue); document.write("</br>") document.write("Disco: " + x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue); document.write("</td></tr>"); }
E por fim, fecharemos nossa tag <table>:
document.write("</table>");
O seu resultado deve ser algo parecido com isso:
O código JavaScript completo é este:
<script> if (window.XMLHttpRequest){ xmlhttp = new XMLHttpRequest(); } else { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.open("GET", "file.xml", false); xmlhttp.send(); xmlDoc = xmlhttp.responseXML; document.write("<table border='1'>"); let x = xmlDoc.getElementsByTagName("CD"); for (let i = 0; i < x.length; i++){ document.write("<tr><td>"); document.write("Artista: " + x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue); document.write("</br>") document.write("Disco: " + x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue); document.write("</td></tr>"); } document.write("</table>"); </script>
Gostou deste artigo? Comente abaixo!