Ajax / Metodo basico de implementacion…

Bienvenidos a un nuevo post, hoy abordaremos el tema de Ajax mas a fondo, haremos una breve explicación, como lo utilizo habitualmente y una buena opcion para utilizarlo, como dije en la Introduccion de Ajax, se hace un llamado a traves de Javascript a un programa (o pagina) que se ejecuta en un servidor (en general. es PHP pero se puede utilizar otro lenguaje como por ejemplo ASP) y el resultado puede ser volcado en un Div, Layer, Celda de tabla, etc. esto signifca utilizar cualquier elemento identificable con id, veamos como lo hago habitualmente:

1°) Primero utilizo esta funcion de Javascript

function runAjax(objeto,server)
{
	var xmlHttp;
 	xmlHttp=null;
	if (window.XMLHttpRequest)
	{
 		xmlHttp=new XMLHttpRequest();
 	} else if (window.ActiveXObject) {
 		xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
 	}

	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");
 	}
	xmlHttp.send(null);
}

Una breve explicacion de la funcion, primero declaramos el nombre de la funcion con dos variables (objeto y server), las cuales deben ser informadas cuando se llame a esta funcion, luego declaramos una variable (xmlHttp) y a esta le asignamos el valor null, despues hacemos un chequeo para saber cual libreria debemos utilizar:

if (window.XMLHttpRequest) { xmlHttp=new XMLHttpRequest(); }

Este if verifica si el objeto declarado entre parentesis es verdadero (si se puede crear) procede a crear un nuevo objeto y lo asigne a la variable xmlHttp, esto es para la mayoria de los navegadores (Internet Explorer 9+, Edge, Firefox, Chrome, Opera, Safari), y en caso de que no sea verdadero procede con la otra comparacion:

else if (window.ActiveXObject) {
 		xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
 	}

En este caso como en el anterior trata de crear un objeto y en caso de ser verdadero se lo asigna como nuevo objeto a la variable xmlHttp, esto es para mantener en algunos navegadores antiguos la compatibilidad, en este caso van del Internet Explorer 5.5 al 8 y creo que algunos navegadores en primeras versiones como el chrome u opera. En el caso de un fallo y no pueda crearlo nos va a dar un mensaje de error el cual veremos mas adelante, veamos el siguiente chequeo:

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

En caso de exito de la comparacion anterior, xmlHttp deja de ser null, ahora creamos una variable llamada obj y a este le vamos ha asignar el elemento con id para ser utilizado como salida, como dijimos al principio nombramos dos variables una llamada objeto y otra server, en este caso va a asignar el elemento para mostrar la salida de la ejecucion (objeto), despues utilizamos al objeto designado (xmlHttp) para ejecutar el programa del lado del servidor utilizamos la funcion open donde le pasamos primero el metodo (GET) y luego el archivo de PHP para realizar la accion, en este caso asignado en la variable server, ahora utilizamos un evento que chequea el readystatechange (es decir el cambio del estado a listo) y este va verificando hasta que la propiedad readyState sea igual a cuatro (es decir completo) y el status sea igual a doscientos (tambien significa completo) si esto es verdadero al elemento designado para la salida se le escribira en formato HTML la devolucion del programa del lado del servidor en nuestro cliente, ahora pasemos a la otra parte:

 	} else {
 		alert("Este Browser no soporta AJAX");
 	}

Ya vimos el caso de donde chequea si existe el conector de xml en cualquiera de sus dos opciones en caso de fallar no hace nada, el chequeo posterior verifica que no sea null pero como vemos aca arriba si llega a esta instancia nos va a alertar por medio de alert, dandonos un mensaje donde nuestro browser es incompatible con Ajax, esto es muy importante porque me ha pasado en algunos browsers muy viejos que no son compatibles, por ejemplo Internet Explorer 4, Chromium en versiones viejas de Debian, el navegador de la Playstation 3, de la Playstation Portable y de la PS Vita.

Con esto completamos la explicacion de la funcion donde se produce la «magia» y ahora veremos la forma para llamarlo y esta es bastante simple, aca les dejo la estructura:

runAjax('objeto receptor','url pagina PHP');

Esto recomiendo hacerlo al final de la pagina creada y llamar todas instancias que sean necesarias.

2°) Estructura basica de como utilizarlo:

<html>
....
<script language="javaascript">
function runAjax(objeto,server)
{
... instrucciones ...
}
</script>

....

<div id="Layer1">"&gt;</div>

....

<script language="javaascript">runAjax('Layer1','ajax.php?id=prueba');</script>

</html>

Las paginas se 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 pero por que de esta manera?, porque me ha sucedido que si se 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:

Para nuestro siguiente caso vamos a ver otra forma de invocar una funcion de Ajax, en las paginas puede ser atraves de un link o un boton. Con estos elementos se debe hacer con el 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 vimos hasta ahora se debe tener una funcion runAjax en Javascript, y un objeto (p.e. Layer1) para visualizarlo, asi como les mostre en el segundo caso, lo otro fundamental para el caso donde hay una accion (link o Boton) es utilizar el return false despues de invocar la funcion de Ajax, esto es para evitar la recarga de la pagina por la accion utilizada y se pierda la data del Ajax, recuerden, el return false es utilizado para los eventos de interaccion del usuario con la pagina, en los casos donde se invoca desde la pagina como en el segundo caso, no es necesario.

4|) Ajax unido a un evento de tiempo:

Ajax tambien se puede utilizar con eventos de tiempo para ser autoejecutado 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 se necesita un chequeo cada 10 minutos para ver si existe un post nuevo y este aparezca automaticamente, esto se podria hacer con un evento setInterval en Javascript, veamos un simple ejemplo:

setInterval(function()
{
 	runAjax('Layer1','ajax.php?id=entradas');
}, 600000);

Y esto se deberia poner al final de la pagina para que se autoejecute en cada intervalo establecido, en este caso refrescando las entradas del blog.

Esto es Ajax, como se vio es una vinculacion entre Javascript en el browser y algunas paginas (o programas) en el server, se procesa la informacion y su respuesta representada por la funcion de Javascript en un elemento HTML.

Hay metodos mas complejos y completos pero lo visto hasta ahora es lo mas basico como para empezar cualquier tipo de pagina, ya sea de listado, de entradas, de catalogo, etc. y no fracasar en el intento, lo ideal con esto es evitar que se refresque la pagina con cada accion tomada y tambien evitando el exceso de informacion circulando por la red, es una excelente opcion para evitar el uso de Flash, y con HTML5, las acciones y eventos, se pueden utilizar en celulares permitiendo una flexibilidad unica y dando portabilidad entre los distintos browsers (entre computadores y moviles) dado que con una sola pagina podriamos adaptarla a nuestras necesidades, les recomiendo este post donde explico como hacer una pagina con Ajax, espero les haya sido util sigueme en Twitter o Facebook para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.