Bienvenidos a un nuevo post, hoy ahondaremos un poco mas en Ajax, veremos una breve explicación, como lo utilizo habitualmente y para que es una buena opcion y para que no.
Bueno, empecemos. Como dije en la
Introduccion de Ajax, basicamente se hace un llamado atraves de Javascript a un script que se ejecuta en un servidor (P.E. PHP) y que el resultado puede ser volcado en un Div, Layer, Celda de tabla, etc. En fin todo aquello que se pueda marcar con un ID.
Sin mas preambulo, vamos a ver como lo hago yo habitualmente:
1°) La funcion de Javascript
function runAjax(objeto,server){
var xmlHttp;
xmlHttp=null;
// Aca se detecta si debe utilizar el XML de la mayoria de los navegadores o el del IE viejo
if (window.XMLHttpRequest){
xmlHttp=new XMLHttpRequest();
}
else if (window.ActiveXObject){
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
// Aca es donde se efectua la magia!
if (xmlHttp!=null){
var obj=document.getElementById(objeto);
xmlHttp.open("GET",server);
xmlHttp.onreadystatechange=function(){
if (xmlHttp.readyState==4 && xmlHttp.status==200) {
obj.innerHTML=xmlHttp.responseText;
}
}
}
else
{
alert("Este Browser no soporta AJAX");
}
// Aca se anula el objeto para volverlo a ejecutar y liberar memoria.
xmlHttp.send(null);
}
Como veran la funcion es bastante simple, cuando se la llama desde Javascript deberia ser algo asi:
<script language="Javascript">
runAjax('< el id del contenedor >','< la pagina que se ejecuta en el server y trae el resultado >');
</script>
Esto recomiendo hacerlo al final de la pagina que esta del lado del cliente y llamar todas instancias que sean necesarias.
2°) Estructura basica de como utilizarlo:
<html>
....
<script language="javscript">
function runAjax(objeto,server){
< aca va la funcion antes mostrada >
}
</script>
....
<div id="Layer1" style="< aca usan los parametros que deseen >"></div>
....
<script language="javascipt">
runAjax('Layer1','ajax.php?id=prueba');
</script>
</html>
Como veran, las paginas las hacen como siempre pero les convendria declarar la funcion lo antes posible en la pagina, luego acomodan el receptor de la funcion de Ajax en donde mas les plazca o necesiten y por el ultimo en este ejemplo de estructura, vuelven a crear una instancia de Javascript y ahi si llaman a la funcion antes declarada.
Porque es asi, porque me ha sucedido que si llama antes no encuentra el contenedor y si declaran despues la funcion (en vez del principio) a veces el Ajax falla (no es siempre pero depende de la velocidad del enlace y del navegador).
3°) Invocando a Ajax desde un enlace:
Ahora vamos a ver otro forma de invocar una funcion de Ajax, en las paginas puede ser atraves de un link o un boton. La unica forma es atraves del evento "onclick" y la forma es asi:
Por enlace:
<a href="" onclick="runAjax('Layer1','ajax.php?id=prueba');return false">Prueba</a>
Por boton:
<button onclick="runAjax('Layer1','ajax.php?id=prueba');return false">Prueba</button>
Como veran se deberia tener una funcion runAjax en Javascript, y un Layer1 para visualizarlo, asi como les mostre en el segundo caso. Y lo otro que es fundamental es que despues de llamar a la funcion de Ajax se debe ejecutar un return false, esto es debido a que evita que se recargue la pagina y se pierda la data del Ajax.
El return false es utilizado para los eventos de interaccion del usuario con la pagina, en los casos que se lo invoca desde la pagina como en el segundo caso, no es necesaario.
4|) Ajax unido a un evento de tiempo:
Ajax tambien se puede utilizar con eventos de tiempo para que se autoejecute cada X cantidad de tiempo o despues de cierto tiempo, por ejemplo con la instruccion setInterval o setTimeout.
Por ejemplo, tienes una lista de entradas de un blog pero te gustaria que se actualice solo cada 10 minutos para que en el caso de una nueva entrada aparezca automaticamente, esto se podria hacer con un evento setInterval, un simple ejemplo:
<script language="javascript">
setInterval(function(){
runAjax('Layer1','ajax.php?id=prueba');
}, 300000);
</script>
Y esto se deberia poner al final de la pagina para que se autoejecute en cada intervalo establecido.
En fin, como veran esto es todo el secreto que tiene Ajax. Hay mas metodos y mas instancias que se pueden llegar a utilizar pero lo basico como para que funcione cualquier tipo de pagina, ya sea de listado, de entradas, de catalogo, etc. Lo ideal con esto es evitar que se refresque la pagina con cada accion que tomamos y le da ilusion de que es algo completamente dinamico.
Es una excelente opcion para evitar el uso de Flash, y esto con HTML5 y las acciones y eventos que se pueden utilizar en celulares permiten una flexibilidad unica.
Espero que les sea util y proximamente subire algunas otras acciones que he encontrado y utilizado para espero a partir de Abril empezar a estudiar C y C++ para despues ir subiendo a medida que vaya estudiando.
Gracias por haber llegado a esta ultima linea y espero que te sea util como lo fue en su momento para mi.
