Trabalhar com XML usando JavaScript

Olá pessoal,

Hoje vou mostrar como trabalhar com XML usando apenas JavaScript (através de DOM).
Agente vê muito tutorial de XML com PHP, ASP, Java, etc, porém quase nenhum sobre JavaSript.

Ao final deste tutorial, você saberá manipular os dados de seu XML pra fazer um menu por exemplo, ou uma tabela, ou uma lista, puxar RSS, etc.

Um lembrete antes de iniciar: diferente das linguagens server-side (php, asp, etc), por motivo de segurança, o navegador não permite que você carregue qualquer arquivo que esteja fora de seu domínio, ou seja, nem adianta tentar carregar XML's ou RSS's de outros sites.

Editado em 19/12/06: Olha só outra forma interessante que eu achei no site da IBM (via MDC)

Postado também no fórum iEvolution.

Chega de papo, bora lá.

1. Fazendo um XML pro teste

(Se você já tem algum arquivo xml pode pular esta etapa)
Abra seu bloco de notas e coloque o seguinte conteúdo:

<?xml version="1.0" ?>
<pessoa>
   <identificacao id="1">
    <nome>Joao</nome>
    <email>joao@mail.com</email>
   </identificacao>
   <identificacao id="2">
    <nome familia="ze" data="2">Maria</nome>
    <email>maria@mail.com
    </email>
   </identificacao>
</pessoa>

Salve este arquivo com o nome de nomes.xml, por exemplo. Na mesma pasta deste arquivo xml, iremos criar nosso HTML que irá carregá-lo.

2) Carregando o XML

Os navegadores carregam um arquivo xml de formas diferentes. O IE usa ActiveX. Para o Firefox e Opera, iremos usar o XMLHttpRequest (o mesmo que se usa em ajax).

O código que irá retornar um objeto xml para os três navegadores citados é:

function xmlMicoxLoader(url){
  //by Micox: micoxjcg@yahoo.com.br.
    if(window.XMLHttpRequest){
        var Loader = new XMLHttpRequest();
        Loader.open("GET", url ,false);
        Loader.send(null);
        return Loader.responseXML;
    }else if(window.ActiveXObject){
        var Loader = new ActiveXObject("Msxml2.DOMDocument.3.0");
        Loader.async = false;
        Loader.load(url);
        return Loader;
    }
}

Perceba que tivemos que deixar o carregamento síncrono para que ao chegar na linha do "return" o carregamento já ter sido concluído.
Se você não sabe o que é modo síncrono ou assíncrono, no modo síncrono o script aguarda o carregamento antes de executar a próxima instrução. No modo assíncrono, o carregamento é feito em segundo plano e a execução das linhas continua indepentende de já ter chegado algum dado pelo open.
Para ler mais sobre estes modos (e suas consequências) veja esta parte do tutorial de ajax do Elcio do Tableless.com.br.

Se quiser mais informações sobre o responseXML, dê uma lida neste texto do Newton (blog Viche): a propriedade responseXML.

Pronto. Agora que agente já tem o objeto XML pra ser trabalhado, mãos à obra com o DOM.

3) Manipulando o XML

XML pode ser manipulado como se fosse um esquema de árvore através das rotinas do DOM, ou seja, pra trabalhar com o XML nós apenas manipularemos propriedades como childNodes, nodeType, nodeValue, firstChild e outras expressões bem comuns pra quem já mexeu com XML ou Javascript.

Na rotina que eu coloco abaixo, apenas faço um laço for que percorre todos os filhos do objeto XML retornado pela função xmlMicoxLoader.
A cada filho percorrido, eu pego o valor dele através de nodeValue, e os atributos através do array attributes[]. O nome dos elementos pode ser recuperado através de nodeName. Se determinado nó tem outros filhos, eu percorro estes filhos também e faço o mesmo. Bah, vá estudar DOM hehehe

Uma observação: o IE ignora os espaços em branco e não os interpreta como filhos. Eu acho isso bom. Porém o FF e o Opera, seguem os padrões e interpretam estes espaços em branco e Enter's como se fossem um elemento do tipo #text. Daí precisamos filtrar estes elementos testando o nodeType (elementos tem nodeType=1, textos tem nodeType=3).

Este exemplo apenas printa na tela o esquema XML feião mesmo. Mas já dá uma base pra você entender e trabalhar com o XML. Leia e entenda, isto é uma ordem:

function xmlMicoxArvore(xmlNode,identacao){
  //by Micox: micoxjcg@yahoo.com.br
    var arvoreTxt=""; //esta var armazenara o conteudo
    for(var i=0;i<xmlNode.childNodes.length;i++){//percorrendo os filhos do nó
  if(xmlNode.childNodes[i].nodeType == 1){//ignorar espaços em branco
   //pegando o nome do nó
   arvoreTxt = arvoreTxt + identacao + xmlNode.childNodes[i].nodeName + ": "
   if(xmlNode.childNodes[i].childNodes.length==0){
    //se não tiver filhos eu já pego o nodevalue
    arvoreTxt = arvoreTxt + xmlNode.childNodes[i].nodeValue 
    for(var z=0;z<xmlNode.childNodes[i].attributes.length;z++){
     var atrib = xmlNode.childNodes[i].attributes[z];
     arvoreTxt = arvoreTxt + " (" + atrib.nodeName + " = " + atrib.nodeValue + ")";
    }
    arvoreTxt = arvoreTxt + "<br />\n";
   }else if(xmlNode.childNodes[i].childNodes.length>0){
    //se tiver filhos eu tenho que pegar o valor pegando o valor do primeiro filho
    arvoreTxt = arvoreTxt + xmlNode.childNodes[i].firstChild.nodeValue;
    for(var z=0;z<xmlNode.childNodes[i].attributes.length;z++){
     var atrib = xmlNode.childNodes[i].attributes[z];
     arvoreTxt = arvoreTxt + " (" + atrib.nodeName + " = " + atrib.nodeValue + ")";
    }
    //recursividade para carregas os filhos dos filhos
    arvoreTxt = arvoreTxt + "<br />\n" + xmlMicoxArvore(xmlNode.childNodes[i],identacao + "> > ");
   }
      }
    }
    return arvoreTxt;
}

Agora é só chamar as funções:

xml = xmlMicoxLoader("nomes.xml"); //carrega o xml
document.write(xmlMicoxArvore(xml,"")); //printa a árvore na tela 

4) Carregando um RSS

Bom, o exemplo anterior não é muito útil não né? Serve só pra você aprender.
Vamo mostrar um exemplo mais útil: uma função que carrega um RSS de seu próprio site.

function xmlMicoxRSS(xmlNode){
 //by Micox: http://elmicox.blogspot.com
 var retorno = "";
 var objNodeList = xmlNode.getElementsByTagName("item")
 for(var i=0;i<objNodeList.length;i++){
  var strTitulo = ""
  var strURL = ""
  var strDescr = ""
  var objNode = objNodeList[i];
  if(objNode.nodeType == 1){//ignorar espaços em branco
   for(var j=0;j<objNode.childNodes.length;j++){
    var objNode2 = objNode.childNodes[j];
    if(objNode2.nodeType == 1){//ignorar espaços em branco
     switch (objNode2.nodeName) {
      case "title": 
       //alert(objNode.childNodes[j].firstChild.nodevalue);
       strTitulo = objNode2.firstChild.nodeValue; 
       break;
      case "link": 
       strURL = objNode2.firstChild.nodeValue; 
       break;
      case "description": 
       strDescr = objNode2.firstChild.nodeValue; 
       break;
     }
    }
   }
   retorno += " <li><a href='" + strURL + "'>" + strTitulo + "</a><br />" + strDescr + "</li>\n";
  }
 }
 retorno = "<ul>\n" + retorno + "</ul>";
 return retorno;
}

Agora é só jogar o resultado na sua div:

xml = xmlMicoxLoader("rss.xml"); //carrega o xml
document.getElementById(div_alvo).innerHTML = xmlMicoxRSS(xml); //lista o rss

Editado 12/12/06: O Bernardo Rufino fez outro ótimo exemplo de como se trabalhar com XML e Javascript: Criando Gráficos Dinamicamente com Ajax e XML

5) Conclusão

Pronto. Agora acho que você já tem uma base para trabalhar com XML no JavaScript da mesma forma que faz com outras linguagens.
Pra ficar bão mermo, repito, estude DOM, nem venha me fazer perguntas básicas sobre isso. :-)
Dúvidas ou se tiver algum bug aí é só me falar.

Ó, tô desestimulado de ficar escrevendo estes tutoriais gigantescos, postando notícias no blog, etc. Ninguém comenta nessa bagaça. Então comenta aí caramba.

Té a próxima.

Gostou da dica acima? Então clica nos botões de compartilhamento abaixo e me ajude a dica a subir no Google.