Sistema em Ajax consultando vários arquivos XML

[welrbraga]

Olá galera,

Estou desenvolvendo o meu primeiro sistema com a vedete do ciber-mundo (Ajax).

A aplicação consiste em um sistema de protocolo eletrônico (quem trabalha em órgão público deverá entender melhor o que é). O sistema lê um cadastro de documentos (processos) com seus respectivos trâmites, nada de mais.

A tela é divida verticalmente em duas partes (esquerda e direita). Do lado direito eu tenho uma listagem de números de processos ordenados em pastas (como as pastas de um webmail) esta listagem é a saída de um XML criado dinamicamente em PHP e do lado esquerdo eu apresento os dados do processo selecionado no lado direito e estes dados vem de uma nova consulta a base que gera outro XML dinamicamente a via PHP.

Note que o conceito é bem simples e até este ponto ele está funcionando, mas eu não estou satisfeito com a forma como implementei, pois eu tive que duplicar as funções LoadXML (listagem abaixo) usando uma função para gerar cada XML. Usando a mesma função (o que deveria ser o correto já que elas fazem a mesma coisa) eu não consigo realizar as duas consultas. Alguém pode dizer uma forma mais higiênica de se fazer isso sem precisar duplicar esta função?

//Cria um objeto XMLHttpRequest de acordo com o browser - ISSO SIM inicia o Ajax
function GetXmlHttpObject() {
	var xmlHttp=null;
	try {
	  // Firefox, Opera 8.0+, Safari
	  xmlHttp=new XMLHttpRequest();
	} catch (e) {
	  // Internet Explorer
	  try {
	    xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
	  } catch (e) {
	    xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
	  }
	}
	//
	if ( xmlHttp == null ) {
		alert('Seu navegador nao suporta AJAX');
	}
	//
	return xmlHttp;
}
 
/* Carrega a URL especificada em modo assincrono e ao mudar 
o estado dispara a função fornecida */
function loadXML(url,funcao) {
	xmlHttp = GetXmlHttpObject();
	xmlHttp.onreadystatechange=funcao;
	xmlHttp.open("GET",url,true);
	xmlHttp.send(null);
}
 
/* Carrega a URL especificada em modo assincrono e ao mudar 
o estado dispara a função fornecida */
function loadXML2(url,funcao) {
	xmlHttp2 = GetXmlHttpObject();
	xmlHttp2.onreadystatechange=funcao;
	xmlHttp2.open("GET",url,true);
	xmlHttp2.send(null);
}

funções complementares para carga do menu

/* Carrega os numeros de processos no menu lateral
   Esta função é chamada pela funcao loadMenuProcesso */
function loadMenu(xmlDoc) {	
	processos = xmlDoc.getElementsByTagName("listaprocessos")[0].getElementsByTagName("areceber")[0].getElementsByTagName("processo");
	total_processos = processos.length;
	//
	lista = "<b>A receber ("+ total_processos +")</b><br>";
	for (tr = 0 ; tr < total_processos ; tr++) {
		//
		try { 
			processo = processos[tr].getElementsByTagName("numprocesso")[0].firstChild.nodeValue;
			cod = processos[tr].attributes[0].nodeValue;
			processo += ' - ' + cod;
			processo = "<A HREF='#' id='itemprocesso' onClick='Javascript:ShowProcesso("+cod+");'>"+processo+"</A>";
			} 
			catch (e) { processo = "-"; }
 
		lista += processo + "<br>";
	}
}
 
/* Carrega os dados e os tramites de um dado processo de forma assincrona */
function loadMenuProcesso() { 
	if (xmlHttp2.readyState==4) { 
		// if "OK"
		if (xmlHttp2.status==200) {
			xmlDoc = xmlHttp2.responseXML;
			loadMenu(xmlDoc);
			situacao("Menu Pronto!");
		} else {
			alert("Problemas ao receber os dados XML para construir o menu");
	 	}
	} else	if (xmlHttp2.readyState==1) {
		situacao("Carregando menu...");
	} 
}
//
/* Carrega a lista de processos do setor especificado no menu de navegacao */
function ShowMenu(codsetor) {
	var url="listaprocessos.xml";
	var url="listaprocessos_xml.php";
	url=url+'?codsetor='+codsetor
	//alert(url);
	loadXML2(url,loadMenuProcesso);
}

Funções que recebem os dados do processo

/*Pega o dado especificado da arvore XML */
function my_getnode(mynode) {
	try {
		return xmlDoc.getElementsByTagName(mynode)[0].childNodes[0].nodeValue;
	} catch (e) {
		return "<span style='color:red'> "+mynode + " nao especificado</span>";
	}
}
/* Carrega os dados do processo especificado 
   Esta função é chamada pela funcao loadProcesso */
function loadProcessoDados(xmlDoc) {
		document.getElementById("numprocesso").innerHTML = my_getnode("numprocesso");
		document.getElementById("interessado").innerHTML = my_getnode("interessado");
		document.getElementById("assunto").innerHTML = my_getnode("assunto");
		document.getElementById("documento").innerHTML = my_getnode("numerodocumento");
		document.getElementById("data").innerHTML = my_getnode("datacadastro");
}
//
/* Carrega os dados e os tramites de um dado processo de forma assincrona */
function loadProcesso() { 
	if (xmlHttp.readyState==4) { 
		// if "OK"
		if (xmlHttp.status==200) {
			xmlDoc = xmlHttp.responseXML;
			loadProcessoDados(xmlDoc);
			loadProcessoTramites(xmlDoc);
			situacao("Processo carregado");
		} else {
			alert("Problemas ao receber os dados XML do processo");
	 	}
	} else if (xmlHttp.readyState==1) {
		situacao("Carregando dados do processo...");
	} 
}
//

[PatrickBrandao]

Vou te dar um conselho: eu programei muito em ajax e conclui que pegar
o xml, percorrer os nos filhos e montar um menu nao economiza processamento nenhum no servidor, que tem ainda o trabalho de gerar a XML.

Eu comecei a usar AJAH, em vez de pegar o XML e processar, eu pego responseText e jogo no InnerHTML do objeto do documento html, conclusao: meus sites ficam um tiro e eu nao tenho nenhuma dor de cabeça pra escrever o codigo javascript, que convenhamos, é muito lento o desenvolvimento comparado com outras linguagens.

<html>
<head>
<script language=javascript>
function Ajax(){
var XMLR=false;
try{XMLR=new ActiveXObject("Msxml2.XMLHTTP")}catch(e){
try{XMLR=new ActiveXObject("Microsoft.XMLHTTP")}catch(sc){XMLR=null}}
if(!XMLR&&typeof XMLHttpRequest!="undefined"){
XMLR=new XMLHttpRequest()
}
return XMLR;
}
function XML() {
DOMD = null;
if (window.ActiveXObject) { // IE
try {
DOMD = new ActiveXObject("Msxml2.DOMDocument");
} catch (e) {
try {
DOMD = new ActiveXObject("Msxml.DOMDocument");
} catch (e) {
DOMD = null;
}
}
} else if(document.implementation&&document.implementation.createDocuments) {
try {
DOMD = document.implementation.createDocument("","",null); // Mozilla
} catch (e) {
DOMD = null;
}
}
return DOMD;
}


function ajah_return(){
// retorno da busca HTML
if (AjaxRequest.readyState == 4) {
if (AjaxRequest.status == 200) {
// requisição concluida
var obj = document.getElementById('console');
if(obj != null){
obj.innerHTML = unescape(AjaxRequest.responseText);
}
} else {
alert("Erro ao carregar conteudo, tente novamente. (" + AjaxRequest.statusText + ")");
}
}
}
function ajah_load_return(){
// retorno da busca HTML
if (AjaxRequest.readyState == 4) {
if (AjaxRequest.status == 200) {
// requisição concluida
var obj = document.getElementById(ajah_load_tag);
if(obj != null){
obj.innerHTML = unescape(AjaxRequest.responseText);
}
} else {
alert("Erro ao carregar conteudo, tente novamente. (" + AjaxRequest.statusText + ")");
}
}
}

function ajah_request(console){
var timestamp = new Date();
var url = '/ajah.php?console=' + console + '&via=ajah&nocache=' + timestamp.getTime();

// requisitar
AjaxRequest = null;
AjaxRequest = new Ajax();
AjaxRequest.onreadystatechange = ajah_return;
AjaxRequest.open('GET', url, true);
//debug("Ajah request: " + url);
AjaxRequest.send(null);
}

function ajah_requestcache(console){

var timestamp = new Date();
var url = '/ajah.php?console=' + console + '&via=ajah&nocache=' + timestamp.getTime();

// requisitar
AjaxRequest = null;
AjaxRequest = new Ajax();
AjaxRequest.onreadystatechange = ajah_return;
AjaxRequest.open('GET', url, true);
//debug("Ajah request cache: " + url);
AjaxRequest.send(null);
}

function ajah_load(console, tag, cache){
var c_uri = '';
if(cache){
var timestamp = new Date();
c_uri = '&nocache=' + timestamp.getTime();
}
var url = '/ajah.php?console=' + console + c_uri;
ajah_load_tag = tag;
// requisitar
AjaxRequest = null;
AjaxRequest = new Ajax();
AjaxRequest.onreadystatechange = ajah_load_return;
AjaxRequest.open('GET', url, true);
//debug("Ajah request cache: " + url);
AjaxRequest.send(null);
}
</script>
</head>
<body>
<!-- conteudo ajah -->
<span id='console'></span>
</body>
</html>

[welrbraga]

Vou te dar um conselho: eu programei muito em ajax e conclui que pegar
o xml, percorrer os nos filhos e montar um menu nao economiza processamento nenhum no servidor, que tem ainda o trabalho de gerar a XML.

Eu comecei a usar AJAH, em vez de pegar o XML e processar, eu pego responseText e jogo no InnerHTML do objeto do documento html, conclusao: meus sites ficam um tiro e eu nao tenho nenhuma dor de cabeça pra escrever o codigo javascript, que convenhamos, é muito lento o desenvolvimento comparado com outras linguagens.

Obrigado pela resposta Patrick. Assim que eu comecei a ler sobre AJAX eu vi que apesar do X de XML na realidade 90% dos exemplos não tem nada de XML, e usam um puro e simples HTML, salvo quando o código é para rodar 100% em Micro$oft IE que possui alguns mecanismos para simplificar a vida (pena que não são padrnizados e nem só de IE vive um programador WEB).

Não entendia o motivo de fazerem isso já que a mídia fala tanto em XML e tentei desenvolver minha aplicação realmente usando XML, sem usar nenhuma biblioteca destas que existem por ai que dizem facilitar a vida exatamente porque a maioria nem passa perto do XML mas como você mesmo disse fica bastante trabalhoso.

A minha ideia sobre o XML é que a partir dele eu poderia realmente portar os dados mas infelizmente eu tenho que dar o braço a torcer, tem sido relativamente trabalhoso fazer isso. Será que alguém tem conseguido este tipo de desenvolvimento com AJAX real por ai sem muitas complicações?

Pelo que entendi então eu devo esquecer esse "conto de fadas" que fizeram sobre o AJAX e que na realidade é um atraso de vida. O negócio é ignorar o tal do XML trabalhando diretamente com respostas em texto.

Se alguém mais puder opinar registrando a sua experiência sobre o assunto eu agradeço. Tenho certeza que será bastante produtivo e elucidativo, não só pra mim, mas pra muita gente que ainda está boiando no assunto de AJAX.

GrRato.