Aquí os dejo un código JavaScript que actualiza el contenido de una capa mediante Ajax. La transición entre el contenido de la capa y el nuevo se hace mediante un efecto de difuminado con Scriptaculous. El efecto se repite cíclicamente.
Usa Protoype y Scriptaculous.
La capa que se actualiza debe llamarse “capa”:
<div id="capa"></div> |
y en la etiqueta body debemos añadir:
<body onload="start_fading();"> |
<script language="javascript" type="text/javascript"><!-- function start_fading(){ var fade=setTimeout("fadeout()",4000); } function fadeout(){ new Effect.Opacity("capa", {duration:0.5, from:1.0, to:0.0}); var fade=setTimeout("change()",600); } function change(){ new Ajax.Request('/script.php', { method:'get', onSuccess: function(transport){ var response = transport.responseText || "no response text"; $('specials_sidebox').innerHTML = response; new Effect.Opacity("capa", {duration:0.5, from:0.0, to:1.0}); var fade=setTimeout("fadeout()",4000); }, onFailure: function(){ } }); } //--></script> |
El funcionamiento es el siguiente:
1) El evento onload() de la etiqueta body llama a la función start_fading() que pone en marcha un cronómetro que llamará a la función fadeout() al de 4000 milisegundos.
2) La función fadeout() hace que el elemento “capa” vaya desapareciendo difuminándose. Además establece un nuevo cronómetro que llamará al de 600 milisegundos a la función change.
3) La función change hace una llamada al fichero ‘script.php’ mediante ajax para cambiar el contenido de capa (que está todavía oculto). Cuando se ha terminado de ejecutar script.php se ejecuta automáticamente la función dentro de ‘onSuccess’.
4) Esta función sustituye el contenido de ‘capa’ por lo que haya devuelto script.php, hace un fade in (vuelve a mostrar capa) y establece un nuevo cronómetro para empezar el proceso de nuevo.
NOTAS:
* Hay que tener en cuenta que cada vez que se repite el proceso se hace una llamada a script.php. Si este script consume muchos recursos podemos estar sobrecargando el servidor (cada usuario que tenga la ventana abierta estará haciendo llamadas cada 4600 milisegundos aproximadamente.
* Si es posible quizá fuera mejor precargar los disintos contenidos de ‘capa’ e ir rotándolos en cada ciclo sin hacer una llamada Ajax (eso os lo pongo otro día).