Um exemplo de Ajax sem XMLHttpRequest
Estou cansado de muitas coisas, mas estas duas são destacáveis.
Publicado em: 20/2/08
1)Que as pessoas (sugestionadas pelas variadas ferramentas criadas com apoio nesta tecnologia) acreditem que Ajax serve para tudo... Outro dia alguém me disse que Ajax era algo que servia para fazer drag and drop... Outro pensava que era algo que servia para gerar efeitos de reflexo em imagens... E assim poderia continuar numerando pessoas que pensam que melhora o gosto do café ou que perguntam "como você pensa em usar um detergente para fazer uma web?".
2)Todos os websites de programação que ensinam a fazer combos relacionados, já seja com Javascript puro ou com Ajax.
E bom, uma pouco para adicionar, eu também, mais lenha a este tema recorrente, e outro pouco porque é um bom exemplo de que às vezes é melhor não usar Ajax e sim ferramentas similares, mais simples e que obtém o mesmo resultado. Por isso, deixo este exemplo, no qual o evento onchange de um combo dispara uma consulta ao servidor, obtém a resposta que este lhe devolve e a mostra em tela sem atualizar a página, ou seja, de maneira assíncrona, e, o mais importante, sem usar Ajax, só utilizando DOM Javascript, algo que alguns chamam RPC Javascript ou Chamada a Procedimento Remoto em Javascript.
Este é o exemplo e este é o código utilizado:
<?php
if(isset($_GET['p'])){
switch($_GET['sel']){
case '1':
$ret=array('Final del Juego','Rayuela','El Señor de los Anillos');
break;
case '2':
$ret=array('rock','new age');
break;
case '3':
$ret=array('español','php','javascript');
break;
default:
echo 'document.getElementById("pp").innerHTML="<select name=\"dos\" id=\"dos\"></select>";';
exit;
}
$html='<select name=\"dos\" id=\"dos\">';
foreach($ret as $v)
$html.='<option value=\"'.$v.'\">'.$v.'</option>';
$html.='</select>';
echo 'document.getElementById("pp").innerHTML="'.$html.'";';
exit;
}
?>
<!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-1" />
<title>test</title>
<script>
function adjs(url){
oldsc=document.getElementById("old_sc");
if(oldsc)
document.getElementsByTagName('body')[0].removeChild(oldsc);
sc=document.createElement('script');
sc.id="old_sc";
sc.src=url+'&'+Math.random();
document.getElementsByTagName('body')[0].appendChild(sc);
}
</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<select name="uno" id="uno" onchange="adjs('?p&sel='+this.value)">
<option value="0">seleccionar</option>
<option value="1">libros</option>
<option value="2">música</option>
<option value="3">lenguaje</option>
</select>
<div id="pp"><select name="dos" id="dos">
</select></div>
</form>
</body>
</html>
Como se pode ver, o coração disto é esta função:
<script>
function adjs(url){
oldsc=document.getElementById("old_sc");
if(oldsc)
document.getElementsByTagName('body')[0].removeChild(oldsc);
sc=document.createElement('script');
sc.id="old_sc";
sc.src=url+'&'+Math.random();
document.getElementsByTagName('body')[0].appendChild(sc);
}
</script>
O que faz a mesma é incluir um novo elemento script na página, cujo atributo src é a rota ao arquivo de processo no servidor.
Simples e totalmente compatível com todos os navegadores modernos, e, graças a que mediante uma comprobação elimina os scripts incluídos em outras chamadas, com um consumo mínimo de recursos.
Outra vantagem frente ao nosso amigo XMLHttpRequest, à parte de sua simplicidade, é que pode trabalhar com arquivos que estejam em outro domínio sem ter que apelar a nenhum truque.
