dominios y alojamiento web en hostalia

Un ejemplo de Ajax sin XMLHttpRequest

04 de septiembre de 2007
Valoración del artículo:
Estoy harto de muchas cosas, pero estas dos son destacables:
Atención: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright.
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:

<?php
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:

<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>


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.

Compartir en redes sociales

Comentarios
Fueron enviados 9 comentarios al artículo
7 comentarios no revisados
2 comentarios revisados:
Por: Miguel Angel
21/9/2007
Efectivamente este ejemplo es muy util cuando se trata de hacer cosas pequeñas como manipular los datos de los combos, mas sin embargo hay un pequeño problema solo funciona correctamente con PHP, ademas con AJAX puedes lograr muchos mejores cosas en cuando a dificultad se refiere y funciona con todo los lenguajes como Java y .Net

oscar_b...
llamar a funciones específicas por este método
07/11/2011
Como usuario de ajax desde hace varios años, me parece bastante interesante el artículo, primero que nada una felicitación.

Y bueno, uno de los usos mas comunes es crear un php con todas las funciones que requiero, estas funciones son llamadas directamente desde el lado cliente mediante ajax, lo que veo en este ejemplo es el llamado de un script en un php, cuando la cantidad de codigo es ya muy grande, la modularidad es obligatoria, entonces mi pregunta seria, ¿como llamaria a una funcion especifica de mi script usando el metodo mostrado en este articulo?

Gracias...

Manuales relacionados
Categorias relacionadas
El autor
Últimas noticias
Donaciones
Si piensas que te hemos ayudado y merecemos tu apoyo económico...