O Bug do parse XML no IE com o ajax do jQuery

Post mais técnico seria impossível né? Enfim, se você leu o título e está lendo até agora é porque sabe do problema que estou falando: o ajax do jQuery tem um problema quando se trabalha com XML, o problema só acontece adivinha onde? No nosso querido browser Internet Explorer.

Mas como quase tudo na vida, tem solução:

Solução número 1 – Pare de trabalhar com XML e comece a usar JSON.

Solução número 2 – Existe um parseXML que funciona pro IE. E alguém de muita boa vontade que se chama Jonathan Sharp fez disso um plugin que pra jQuery que se chama XMLDOM .

E como funciona?

assim:

Forma normal (que normalmente dá erro no IE)

$.ajax({				
	url: 'xml/erros.xml, 
	type: "GET",
	dataType: "xml",
	contentType: "application/x-www-form-urlencoded; charset=UTF-8",
	success: function(xml){
		var htm ='';
		$(xml).find('item').each(function(n){
			htm += $(this).text();
		}
		$('#erros').append(htm);
	}
});

Com o plugin XMLDOM

$.ajax({				
	url: 'xml/erros.xml, 
	type: "GET",
	dataType: "html",
	contentType: "application/x-www-form-urlencoded; charset=UTF-8",
	success: function(xml){
		var htm ='';
		$.xmlDOM(xml).find('item').each(function(n){
			htm += $(this).text();
		}
		$('#erros').append(htm);
	}
});

E pra quem quiser evitar o trabalho, pode baixar o plugin direto aqui.

[]s

O que é JSON, como e quando utilizar?

JSON (JavaScript Object Notation) é uma estrutura de dados em javascript.
Apesar de começarem a falar muito disso recentemente, JSON não é uma tecnologia nova, faz parte do javascript puro e não precisa de nenhum script pra trabalhar.

O JSON pode substituír o XML, e faz isso muito bem na hora de trabalhar com respostas em AJAX.
A estrutura de dados fica mais simples de trabalhar e o tempo de execução de um script lendo dados em JSON é dezenas de vezes mais rápido do que ler um conteúdo XML.

As principais linguagens de programação server side tem suporte pra escrever dados em JSON.

Veja o exemplo da estrutura de dados abaixo

var dados = {
	"aluno" : [
		{"nome":"João", "provas":  [ { "nota":8 }, {"nota":6}, {"nota":10 }, {"nota":2 } ] },
		{"nome":"Maria", "provas": [ { "nota":3}, {"nota":5}, {"nota":8 }, {"nota":1 } ] },
		{"nome":"Pedro", "provas": [ { "nota":7}, {"nota":6}, {"nota":6 }, {"nota":8 } ] },
	]
};

Veja como seria a mesma estrutura de dados em XML:

<?xml version='1.0' encoding='utf-8'?>
<aluno>
	<nome>Danilo</nome>
	<provas>
		<prova nota=8/>
		<prova nota=6/>
		<prova nota=10/>
		<prova nota=2/>
	</provas>
</aluno>
<aluno>
	<nome>Belinha</nome>
	<provas>
		<prova nota=3/>
		<prova nota=5/>
		<prova nota=8/>
		<prova nota=1/>
	</provas>
</aluno>
<aluno>
	<nome>Carla</nome>
	<provas>
		<prova nota=7/>
		<prova nota=6/>
		<prova nota=6/>
		<prova nota=8/>
	</provas>
</aluno>

Apesar do xml ter mais chaves e colchetes, fica mais facil de ler os dados:

var jsonData = eval(dados);

E pronto, bem mais simples que xml!

Depois para obter os dados funciona assim:

document.write(jsonData.aluno[0].nome);
// Escreve o nome do primeiro aluno: "Danilo";

document.write(jsonData.aluno[1].provas.nota[3]);
// Escreve a nota da última prova da Belinha ;

document.write(jsonData.aluno[2].provas.nota[0]);
// Escreve a nota da primeira prova da Carla ;

for(i=0;i<jsonData.aluno.length;i++){
	document.write(jsonData.aluno[i].nome);
}
// escreve o nome de todos os alunos

for(i=0;i<jsonData.aluno.length;i++){
	document.write(jsonData.aluno[i].nome);
	for(j=0;j<jsonData.aluno[i].provas.length;j++){
		document.write(jsonData.aluno[i].provas[j].nota);
	}
}
// escreve o nome e todas as notas de todos os alunos

No site JSON.org pode encontrar mais informações, em português.