Inicio de sesión
RSS
En línea
Un ejemplo de Ajax sin XMLHttpRequest
Estoy harto de muchas cosas, pero estas dos son destacables:
1)Que la gente (sugestionada por las muchas herramientas creadas con apoyo en esta tecnología) se crea que Ajax sirve para todo... El otro día uno me dijo que Ajax era algo que servía para hacer drag and drop... Otro pensaba que era algo que servía para generar efectos de reflejo en imágenes... Y así podría seguir enumerando a algunos que piensan que mejora el gusto del café o que preguntan "cómo se te ocurre usar un detergente para hacer una web?".
2)Todos los websites de programación que enseñan a hacer combos relacionados, ya sea con javascript puro o con Ajax.
Y bueno, un poco para sumar yo también a este tema recurrente, y otro poco porque es un buen ejemplo de que a veces es mejor no usar Ajax sino herramientas similares, más sencillas y que obtienen el mismo resultado, les dejo este ejemplo, en el cual el evento onchange de un combo dispara una consulta al servidor, obtiene la respuesta que este le devuelve y la muestra en pantalla sin refrescar la página, es decir, de manera asíncrona, y, lo más importante, sin usar Ajax, sólo utilizando DOM javascript, algo que algunos llaman RPC javascript o Llamada a Procedimiento Remoto en javascript.
Este es el ejemplo y este es el código utilizado:
if(isset($_GET['p'])){
switch($_GET['sel']){
case '1':
$ret=array('Final del Juego','Rayuela','El Señor de loas 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 ven, el corazón de esto es esta función:
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>
Lo que hace la misma es incluir un nuevo elemento script en la página, cuyo atributo src es la ruta al archivo de proceso en el servidor.
Simple, sencilla, totalmente compatible con todos los navegadores modernos, y, gracias a que mediante una comprobación elimina los scripts incluídos en otras llamadas, con un consumo mínimo de recursos.
Otra ventaja frente a nuestro amigo XMLHttpRequest, aparte de su sencillez, es que puede trabajar con archivos que estén en otro dominio sin tener que apelar a ningún truco.
