Postado por Micox - Náiron J. C. G..

08 Dezembro, 2006

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.

Marcadores: ajax, DOM, javascript, xml

E-mail Newsletter Feed RSS Resultado! Concursos Shopping Resultado

Não mande dúvidas nos comentários ou no meu e-mail. Mande elas para o fórum de desenvolvedores Webly. Tem mais gente lá gabaritada a responder e você não fica dependendo só do mico.

Comenta aí! Não cai o dedo e me incentiva a escrever mais. (38 comentários)

38 Comentários:

Pedro Gabriel disse... 08 Dezembro, 2006 09:30: H a h a h a v o u c o m e n t a r n e s s a ' b a g a ç a ' !
M t o b o m o t u t o r i a l , g o s t e i m e s m o .
S e u b l o g é s h o w d e b o l a , t o m a r a q u e n ã o p e r c a o f o r m a t o .

A b r a ç o s
P P l a n e l
Micox disse... 08 Dezembro, 2006 09:39: h a h a h a , v a l e u p o r c o m e n t a r a b a g a ç a .

A g o r a q u a n t o a o f o r m a t o , t o p e n s a n d o e m d a r u m a m u d a d a n e s s e v i s u a l t o s c o q u e e u f i z . V o u m u d a r p r a a l g o m a i s p a d r ã o .

A c e i t o s u g e s t õ e s p e s s o a l h e h e .
Rafael disse... 08 Dezembro, 2006 09:54: V a l e w ! ! p e l a e x p l i c a ç ã o m u i t o b o a , j a e s t o u f o r m a t a n d o a l g u m a s c o i s a s !

A b r a ç o s
vicentedomingos disse... 08 Dezembro, 2006 12:38: M i c o x , b o a t a r d e !

É q u e e s t o u m e i o s e m t e m p o p r á c o m e n t a r . E n t r e t a n t o , t e n h o a c o m p a n h a d o a l g u m a s d a s s u a s p r o d u ç õ e s e m v á r i o s s i t e s . T e m a j u d a d o m u i t í s s i m o . Q u a n d o e u t i v e r f o r m a d o u m c o n h e c i m e n t o m a i s s ó l i d o p r e t e n d o c o m p a r t i l h a r i s s o c o m v o c ê s . T e n h o a p a n h a d o m u i t o , p o r c a u s a d e s s a f a l t a d e p a d r o n i z a ç ã o d o s n a v e g a d o r e s . U m d i a e u c h e g o l á !

S u c e s s o , c o n t i n u e !

V i c e n t e D o m i n g o s
Jader Rubini disse... 08 Dezembro, 2006 13:36: E s s e é o E l " G r a n d " M i c o x q u e e u c o n h e ç o . . .
S h o w z ã o d e b o l a e s s e t u t o , c a r a . P e d r a p r e c i o s a m e s m o !
U m a b r a ç ã o a ê
Reges disse... 08 Dezembro, 2006 16:34: s h o w m i c ã o . . . n ã o s a b i a q u e d a v a p r a f a z e r i s s o . . .
JulioGreff disse... 09 Dezembro, 2006 10:47: M u i t o b o m , M i c o x ! Ó t i m o t u t o r i a l !
Newton de Góes Horta disse... 09 Dezembro, 2006 19:54: V i c h e ! j á r e c e b e s t e o i t o c o m e n t á r i o s ( i n c l u i n d o e s t e ) . M u i t o b o m o t e u t u t o . P a r a b é n s !

E o b r i g a d o p e l a r e f e r ê n c i a a o m e u p o s t e a o b l o g .
William Grasel Martins disse... 11 Dezembro, 2006 10:22: Ó t i m o a r t i g o , c o n t i n u e e s c r e v e n d o !
Micox disse... 11 Dezembro, 2006 13:01: P e s s o a l , v i s i t e m o s i t e d o W i l l i a m G r a s e l ( a c i m a ) e s e s u r p e e n d a m c o m a q u a l i d a d e d a s i m p l i c i d a d e .
Aldemir Silva disse... 20 Dezembro, 2006 16:00: M u i t o b o m M i c o x . . . E s p e r o e s t a r m a i s f a m i l i a r i z a d o c o m s e u c o n t e ú d o e m b r e v e .

S e u b l o g é i n d i s p e n s á v e l .

A b r a ç o .
Daniel disse... 14 Janeiro, 2007 16:54: R e l a x a c a r a , c o l o c a u m b o m C D d e M E T A L e c o n t i n u e e s c r e v e n d o p o i s v o c ê a j u d a a m u i t o s . . . .

h a c k e r b y l i n u x .

D a n i e l
Daniel disse... 14 Janeiro, 2007 16:55: c o n t i n u e c o n t r i b u í n d o p a r a u m a N E T m e l h o r !
bic disse... 17 Janeiro, 2007 15:23: t a c o m e n t a d o .
e u v i u m a s s o l u c o e s f l a s h - x m l p a r e c i d a s . a s i n t a x e a c t i o n s c r i p t e j a v a s c r i p t s a o m u i t o s e m e l h a n t e s .
q u a n d o u s a r u m o u o u t r o ?
Micox - Náiron J. C. G. disse... 24 Janeiro, 2007 13:58: S i m , b i c . A s i n t a x e d o s d o i s é b e m p a r e c i d a m e s m o p o i s s ã o a m b a s b a s e a d a s n o E C M A S c r i p t .

V o c ê d e v e u s a r o a c t i o n S c r i p t q u a n d o q u i s e r p u x a r o X M L a t r a v é s d e u m a a p l i c a ç ã o f l a s h
e o J a v a s c r i p t q u a n d o f o r u m a a p l i c a ç ã o q u e s u p o r t e j a v a s c r i p t ( c o m o u m a p á g i n a e m u m n a v e g a d o r d e i n t e r n e t ) .

t é m a i s : )
Lara disse... 25 Janeiro, 2007 10:32: M u i t o b o a a e x p l i c a ç ã o . . r e s o l v e u b o a p a r t e d o s m e u s p r o b l e m a s a h e u h a e : )

A g o r a , s e p u d e r e s m e a j u d a r , t e r i a c o m o e u a l t e r a r o s v a l o r e s d o s n ó s e j o g a r o x m l a l t e r a d o p a r a a s e s s i o n ?

O b r i g a d a : )
Micox - Náiron J. C. G. disse... 26 Janeiro, 2007 15:21: @ L a r a

U m a f o r m a é v o c ê j o g a r o c o n t e ú d o d o x m l e m u m t e x t a r e a e s u b m e t e r p a r a a s u a l i n g u a g e m s e r v e r - s i d e .

O u t r a f o r m a p o s s í v e l é e s s a a q u i q u e d e s e n v o l v e m o s n o f ó r u m .
Carol disse... 13 Junho, 2007 11:32: M u i t o b o m , e s t o u c o m e n t a n d o s ó p o r q u e v o c ê e s t a d e m o t i v a d o , n a o d e s m o v i t a n a o . G o s t o d o s e u s t r a b a l h o s .

B e i j i n h o .
claudio disse... 25 Junho, 2007 09:07: P Q q u a n d o s e f a l a d e X m l n i n g u é m e n s i n a c o m o f a z e r u m a S E L E C T d o s d a d o s c o m o s e f o s s e m y s q l , p q s ó e n s i n a m a l e r u m a r q u i v o i n t e i r o ? ? t o c o m e ç a n d o a o d i a r x m l , p q c o m o p e g a r u m a v a r d a u r l e e s c o l h e r q u a l d a d o e u q u e r o d a m e r d a d o b a n c o d e d a d o s x m l e e x i b i r , p q é t ã o d i f i c i l a l g u é m f a l r s o b r e i s s o ? ? ? a c h o q u e é i m p o s s í v e l ! ! ! ! ! ! ! !
Douglas disse... 25 Junho, 2007 13:56: C a r a t a b o m m s m s e u T U T O R I A L . . . . t i r o m i n h a s d u v i d a s . . . . . v a l e u m s m ! ! ! ! ! !
Anônimo disse... 09 Agosto, 2007 22:39: c a r a , e s t o u p r o c u r a n d o a 2 m a d r u g a d a s a l g o c o m o i s s o , m u i t o o b r i g a d o .
Anônimo disse... 12 Agosto, 2007 20:13: B e m l e g a l a m a t é r i a . D á p r a t e r u m a v i s ã o b e m g e r a l .
soda disse... 21 Janeiro, 2008 03:02: O b r i g a d o p e l a i n f o r m a ç ã o , e s t á s e n d o d e g r a n d e v a l i a d u r a n t e m e u s e s t u d o s !
Anônimo disse... 19 Fevereiro, 2008 11:06: É , m u i t o b a c a n i n h a , c o m p r e e n d i o c ó d i g o e t a l z , p o r é m n ã o c o n s e g u i v i s u a l i z a r o m e s m o , s a n t a i g n o r a n c i a d a m i n h a p a r t e . . . .
Anderson disse... 16 Abril, 2008 15:40: m t o b o m o a r t i g o , e g o s t e i d a m e n ç ã o s o b r e a c e s s a r x m l e m o u t r o d o m i n i o .

M a s e h j u s t a m e n t e i s s o q q u e r o . . J S a c e s s a n d o o u t r o d o m i n i o . T e m c o m o ? I m a g i n o q s u a r e s p o s t a e h n a o . . .
m a s e n t a o . . c o m o f u n c i o n a m o s w i d g e t s p a r a b l o g s ? ? ? e l e s s a o j s e m b u t i d o s n o s i t e , q a c e s s a m d a d o s e m o u t r o d o m i n i o . . .

: (
Micox - Náiron J. C. G. disse... 16 Abril, 2008 16:15: E x a t o A n d e r s o n , n ã o é p o s s í v e l .
E s t e s w i d g e t s q u e v o c ê v ê n ã o é j s a c e s s a n d o o u t r o d o m í n i o , m a s s i m j s a c e s s a n d o u m a p á g i n a n o m e s m o d o m í n i o , e s t a s i m , p o r s u a v e z , a c e s s a o s d a d o s d o o u t r o d o m í n i o .
V e j a s o b r e o A C D ( a j a x c r o s s d o m a i n ) : h t t p : / / w w w . a j a x - c r o s s - d o m a i n . c o m /

t é
Felipe disse... 21 Junho, 2008 11:40: C a r a , p a r a b é n s p e l o t ó p i c o ! ! ! M e a j u d o u b a s t a n t e e o l h a q é u m t ó p i c o d e 2 0 0 6 ! ! !
felipecaioba@gmail.com disse... 26 Junho, 2008 00:20: O w M i c o x ,

D i z a i e n t a o , v o c e t e m i d e i a d e c o m o f u n c i o n a o s j s d o G o o g l e ? v o c e p o d e i n c l u i r o g o o g l e n o s i t e e o b t e r d a d o s d e l e . S a b e c o m o a g e n t e p o d e i m p l e m e n t a r a l g o p a r e c i d o ?

V l w . . a b r a ç o
Micox - Náiron J. C. G. disse... 26 Junho, 2008 07:12: O p a ,
c a r a , p o r m o t i v o s d e s e g u r a n ç a , j a v a s c r i p t n ã o t e m p o d e r p r a a c e s s a r p á g i n a s d e o u t r o s d o m í n i o s q u e n ã o o s e u . O u s e j a : n o m o m e n t o n ã o d á .
Eduardo disse... 22 Julho, 2008 14:15: C a r a ,

C o m o v o c ê f a z p a r a e x i b i r o s c ó d i g o s j a v a s c r i p t c o l o r i d o s d e s s a f o r m a ? E x i s t e a l g u m r e c u r s o q u e f a ç a i s s o a u t o m á t i c a m e n t e .

E d u a r d o M o n t e i r o
e d m o n t e i r o . i n f o @ g m a i l . c o m
Micox - Náiron J. C. G. disse... 22 Julho, 2008 14:24: O p a , é c o m o g o o g l e p r e t t i f y : h t t p : / / c o d e . g o o g l e . c o m / p / g o o g l e - c o d e - p r e t t i f y /
Live BR disse... 23 Agosto, 2008 19:28: E x c e l e n t e t u t o r i a l . m u i t o b o m , i s s o v a i t i r a r d u v i d a s d e m u i t o s .
Anônimo disse... 15 Novembro, 2008 20:28: E s s e D O M é u m b e l o l i x o , t ô l o u c o p r a v e r a h o r a e m q u e a c a b a r c o m i s s o e o s n a v e g a d o r e s c o m e ç a r e m a d a r s u p o r t e a o E 4 X .
Felipe disse... 02 Março, 2009 11:16: C a r a , e u s e i q u e f i c a n a m e s m i c e , m a s é s ó r e f l e x o d o r e c o n h e c i m e n t o d o s e u t r a b a l h o , m u i t o b o m e s s e s e u t u t o , m e a j u d o u b a s t e n t e , e p e l o v i s t o , n ã o s ó e u . F i z u m a c o n s u l t a d e C E P , e s t o u n o s ú l t i m o s a j u s t e s , p r o c u r e i e m m u i t o s l u g a r e s a l g o d o t i p o e n ã o a c h e i e n t ã o f i z n a m ã o m a s n a p a r t e d e r e t o r n a r o s d a d o s s e m d a r o r e f r e s h n a p á g i n a , s e u t u t o r i a l m e a j u d o u b a s t a n t e . Q u a n d o a c a b a r p o s t o e m a l g u m l u g a r p r a q u e m q u i s e r a p r e n d e r o u u t i l i z a r .
P a r a b é n s m a i s u m a v e z
Rodrigo Xavier disse... 27 Abril, 2009 15:35: M i c o x , b o a t a r d e .

C a r a , g o s t e i b a s t a n t e d e s t e t u t o r i a l , m u i t o b o m m e s m o .
E s t o u c o m u m a d ú v i d a .
P r e c i s o l e r u m a v a r i á v e l x m l e n ã o u m a r q u i v o .
D e s t a m a n e i r a q u e e s t á n o t u t o r i a l e l e n ã o c o n s e g u e c a r r e g a r c o m o u m x m l .
P o d e m e d a r u m a d i c a ?
M e u e - m a i l é r s x . r o d r i g o @ g m a i l . c o m
Romão disse... 27 Maio, 2009 22:10: V a l e u c a r a , b o m t r a b a l h o . T e n t a r e s t u d a r m a i s a q u i ; p
Anônimo disse... 29 Maio, 2009 21:20: E c o m o l e r u m x m l d e u m a u r l , e x e m p l o : h t t p : / / w w w . s i t e . c o m . b r / r s s . x m l
Micox - Náiron J. C. G. disse... 29 Maio, 2009 21:41: É u m p o u q u i n z i n h o m a i s c o m p l i c a d o p o i s e n v o l v e f e r r a m e n t a s e x t e r n a s t i p o o y a h o o p i p e s e J s o n .

M a s e m b r e v e f a ç o u m a p o s t a g e m s o b r e i s s o e x p l i c a n d o , j u r o .

Escreva seu comentário (Leia abaixo).

Deixe seu email se quiser resposta por email também, pois o sistema de comentários do Blogger não me informa :( ... Ah, também pode deixar o endereço do seu blog ou site no comentário.
Já estou em outro sistema de blog melhor (wordpress). Se quiser comentar lá também :)
Dúvidas, só no fórum Webly.