Trabalhar com XML envolve a criação/leitura de um documento texto. Esta é a definição mais simples para as tarefas de XML, porém destas podemos ramificar em diversos parsers e validadores que a complexidade aumenta em progressão geométrica.

Neste texto que escrevo quero destacar a leitura de um XML via Javascript. Você ira precisar disto em toda situação que o servidor envia para o cliente um arquivo XML que deve ser interpretado.

Existem inumeros frameworks para isso, inclusive outras estratégias mais elegantes como a transformação do XML com XSL.

Como AJAX esta na moda vamos contextualizar nas chamadas assincronas o XML.

Primeiramente, adicione a API DOM no seu bookmark (http://www.howtocreate.co.uk/tutorials/javascript/domstructure). Este link não é do W3.com mas detalha de forma bem estruturada a API.

1 - Declarando um XML


var responseXML = '<response>'+
'<messages>'+
'<total>30</total>'+
'<message>'+
'<sender>Joao do Caminhao</sender>'+
'<text>Quero saber mais...</text>'+
'</message>'+
'<message>'+
'<sender>Atendente 01</sender>'+
'<text>Ja irei verificar senhor</text>'+
'</message>'+
'</messages>'+
'<status>O usuario esta digitando uma mensagem</status>'+
'<fault>skjdcnskjdncjksdnc</fault>'+
'</response>';

Declarando uma string com conteudo XML.

2 - Utilizando o parser do browser

Alguém precisa fazer o trabalho da leitura do elementos/atributos do XML. Todo browser que suporta elementos DOM possue um parser. Para você poder utiliza-lo pode declarar as linhas abaixo para criar uma referencia do documento associado ao parser. Estas linhas ja indicam parsers Cross-browsers.


var xmldoc = null;
if (window.ActiveXObject) {
xmldoc = new ActiveXObject("Microsoft.XMLDOM");
xmldoc.async="false";
xmldoc.loadXML(responseXML);
} else {
var parser = new DOMParser();
xmldoc = parser.parseFromString(responseXML,"text/xml");
}

O elemento de resultado é o xmldoc e é a partir dele que iremos percorrer os nós do XML.

3 - Acessando os Nodes

var response = xmldoc.getElementsByTagName('response');

No exemplo acima eu quero recuperar a tag do XML. Porem assim como a assinatura do xmldoc indica o resultado é um vetor. Detalhe, se não existir esta tag, é retornado um vetor com tamanho 0.

alert(response[0].tagName)

tagName ira retornar o nome da tag. No entanto o mais importante dela são os nós internos ou seu valor.

Os Nodes internos a esta tag são acessados com outro método.


if(response[0].hasChildNodes()){
for(var k = 0 ; k < response[0].childNodes.length ; k++){
alert(response[0].childNodes[k]);
alert(response[0].childNodes[k].nodeValue);
}
}

Tudo ira depender de como esta formado o seu documento XML. Porem com isso ja podemos montar metodos auxiliares para facilitar a navegação nos Nodes.

4 - Utilizando tudo isso com AJAX

Imagine a situação que uma chamada assíncrona ira retornar as informações de endereço, baseado em um numero de cep.

XML Resultado


Av. Javascript DOM
EMACS
São Paulo
SP

Para recuperar os dados pode-se usar variações do método abaixo :


var cep = xmldoc.getElementsByTagName('response')[0]; //Ja retornar o Node
if(cep.hasChildNodes()){
for(var k = 0 ; k < cep.childNodes.length ; k++){
var valor = cep.childNodes[k].nodeValue;
if(cep.childNodes[k].tagName == 'bairro'){
//..>Atribuir o valor no campo bairro….
}
//…>E assim por diante
}