Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Valter Rodrigues

Requisição Requeest.XML usando o prototype

Recommended Posts

Ola Grandes amigos,

 

Estou iniciando no ajax, porem eu estava usando um imenso codigo para trazer dados de um xml, descobri o prototype pode realizar esta tarefa com mais facilidades.

 

No inicio tive dificuldades para trazer dados como reqest.XML, uma vez no qual eu so conseguia trazer dados responseTEXT, fui pesquisando e acabei conseguindo trazer os dados do xml para serem atualizados em um campo list box.

 

 

Estou compartilhando o codigo com voces. Espero que seja util.

 

<?phpinclude("basicas.php");?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style></style><script type="text/javascript" language="javascript" src="prototype.js"></script><script type="text/javascript">// ROTINA: Realiza Requisiçãofunction buscaCidades(){var url = 'estados_xml.php';var pars = '';			var myAjax = new Ajax.Request( url, { method: 'get', parameters: pars, onComplete: mostraResposta }); }function mostraResposta(req){  	processXML(req.responseXML);}function processXML(obj){//Pega o id do campovar idOpcao = $('cidades'); //pega a tag cidadevar dataArray   = obj.getElementsByTagName("cidade");//total de elementos contidos na tag cidadeif(dataArray.length > 0) { 	//percorre o arquivo XML paara extrair os dados	for(var i = 0; i < dataArray.length; i++) {		var item = dataArray[i];		//contéudo dos campos no arquivo XML		var codigo	=  pegaValor(item.getElementsByTagName("id_cidade")[0]);		var descricao	=  pegaValor(item.getElementsByTagName("nome_cidade")[0]);			// Cria campos		var novo = document.createElement("option");			//atribui um ID a esse elemento			novo.setAttribute("id", "opcoes");			//atribui um valor			novo.value = codigo;			//atribui um texto			novo.text  = descricao;						idOpcao.options.add(novo, 1);	 				 	}} else {		//caso o XML volte vazio, printa a mensagem abaixo		//	idOpcao.innerHTML = "Selecione um Material";  }	  }// ROTINA: Retorna os valoes do nofunction pegaValor(no){	if(no.childNodes.length>0){			return no.firstChild.nodeValue; //Tem filho	  } else {			try{				  return no.nodeValue			} catch (e) {			return "";		}	  }}</script></head><body><div id="Results"></div><form>		<select name="cidades" id="cidades">				<option value="">Selecione o Estado</option>				</select></form><a href="java script:buscaCidades();">Estado</a></BODY></HTML>

Compartilhar este post


Link para o post
Compartilhar em outros sites

function mostraResposta(req){	processXML(req.responseXML);}function processXML(obj){
não entendi, porque é que você fez uma função só pra depois chamar a outra?
<?phpinclude("basicas.php");?><?//PEGA OS ESTADOS $sql = "		  		SELECT a.id_estado, a.dsc_estado, a.sigl_estado 		FROM estados a		  		ORDER BY a.dsc_estado"; //EXECUTA A QUERY			   $sql = mysql_query($sql);	   $row = mysql_num_rows($sql); ?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859" /><style></style><script type="text/javascript" language="javascript" src="prototype.js"></script><script type="text/javascript">// ROTINA: Realiza Requisiçãofunction buscaCidades(estado){var url = 'cidades_xml.php';var pars = 'estado='+estado;			var myAjax = new Ajax.Request( url, { method: 'post', parameters: pars, onComplete: mostraResposta }); }function mostraResposta(req){  // Recebe a requisão XMLvar obj = req.responseXML;//Pega o id do campovar idOpcao = $('listCidades'); var opcoes = $('opcoes');//pega a tag cidadevar dataArray   = obj.getElementsByTagName("cidade");	//total de elementos contidos na tag cidade	if(dataArray.length > 0) {		//percorre o arquivo XML paara extrair os dados		for(var i = 0; i < dataArray.length; i++) {			var item = dataArray[i];			//contéudo dos campos no arquivo XML			var codigo   	=  pegaValor(item.getElementsByTagName("id_cidade")[0]);			var descricao   	=  pegaValor(item.getElementsByTagName("nome_cidade")[0]);						opcoes.innerHTML = "-- Selecione uma opção abaixo --";			// Cria campos			var novo = document.createElement("option");				//atribui um ID a esse elemento				novo.setAttribute("id", "opcoes");				//atribui um valor				novo.value = codigo;				//atribui um texto				novo.text  = descricao;				idOpcao.options.add(novo, 1);	 		}	} else {		//caso o XML volte vazio, printa a mensagem abaixo		opcoes.innerHTML = "-- Selecione um estado --";		idOpcao.options.length = 1;	 }   }// ROTINA: Retorna os valoes do nofunction pegaValor(no){	if(no.childNodes.length>0){			return no.firstChild.nodeValue; //Tem filho	  } else {			try{				  return no.nodeValue			} catch (e) {			return "";		}	  }}// ROTINA: Recebe dados do campo cidadesfunction enviaCidade(cidade){	var recebeDados = $(Result); //Dive que ira imprimir os dados	recebeDados.innerHTML = cidade;}</script></head><body>  <form name="frmAjax">		 Estado: 		 <select name="listEstados" onClick="buscaCidades(this.value);">			<option value="0">--Selecione o estado >></option>			<? for($i=0; $i<$row; $i++) { ?>			   <option value="<? echo mysql_result($sql, $i, "id_estado"); ?>"><? echo mysql_result($sql, $i, "dsc_estado"); ?></option>			<? } ?>		 </select>	  		 <br><br>		 Cidade: 		 <select name="listCidades" id="listCidades" onchange="enviaCidade(this.value);">			<option id="opcoes" value="0">--Primeiro selecione o estado--</option>		 </select>	  </form>		  <div id="Result"></div></BODY></HTML>
Blza, achei da outra form ficaria mais facil de entender. Agora esta atualizado.

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.