Tag: XML

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!