|
Atualizando selects com ajax |
|
|
Ajax
|
|
Por Ricardo Maia
|
|
02 de outubro de 2006 |
|
Página 1 de 4 Neste artigo serão demonstradas duas formas de realizar atualizações de SELECTS html com ajax. A primeira, muito simples utilizando o retorno em HTML e o segundo script manipulando um retorno em XML. Então vamos lá...
Os arquivos utilizados neste artigo podem ser baixados no link abaixo
ajax.tar.gz
Para acesso ao exemplo de resposta em HTML clique abaixo
resposta HTML
Resposta em HTML
Para ambos os tipos de resposta utilizaremos 03 arquivos. Um arquivo com as funções javascript, uma página em html que servirá de interface e finalmente uma página em PHP que irá processar as requisições devolvento em HTML ou XML, conforme o caso.
(ajax2.js)
function criaObjetoAjax() {
if(window.XMLHttpRequest) {
try {
objeto = new XMLHttpRequest();
} catch(e) {
objeto = false;
}
} else if(window.ActiveXObject) {
try {
objeto = new ActiveXObject("Msxml2.XMLHTTP");
} catch(e) {
try {
objeto = new ActiveXObject("Microsoft.XMLHTTP");
} catch(e) {
objeto = false;
}
}
}
return objeto;
}
//-------------------------------------------------------------
function fazRequest(url,metodo,funcao_retorno){
//o metodo pode ser GET ou POST
objAjax = criaObjetoAjax();
try{
objAjax.open(metodo, url, true);
objAjax.setRequestHeader('Content-Type',
"text/xml");
objAjax.onreadystatechange = function(){
if (objAjax.readyState==4){
retornoHTML = objAjax.responseText;
mostraCarregando('div_status_carregamento',0,'');
eval(funcao_retorno+'(retornoHTML)');
}
}
objAjax.send(null);
}
catch(e){
alert('Falha na comunicação.');
}
finally{}
mostraCarregando("div_status_carregamento",1,"<img src='bar.gif' align='absmiddle'>
carregando...");
//lembre-se! a imagem 'bar.gif' deve existir no servidor :)
}
//-------------------------------------------------------------
function mostraCarregando(obj_div,on_off,msg){
if(on_off == 1){
container_status = document.getElementById(obj_div);
container_status.innerHTML = msg;
container_status.style.visibility = 'visible';
}else{
container_status = document.getElementById(obj_div);
container_status.innerHTML = "";
container_status.style.visibility = 'hidden';
}
}
//-------------------------------------------------------------
function carregaCidades(id_uf){
fazRequest('gatewayHTML.php?par='+id_uf,'GET','mostraCidades')
}
function mostraCidades(respostaHTML){
combo = document.getElementById('cidades');
combo.innerHTML = respostaHTML
;
}
//-------------------------------------------------------------
|
|
Última Atualização ( 10 de janeiro de 2008 )
|
