Mostrar Mensaje “Cargando” Con Prototype y PHP

Buscando por todos lados para lograr el efecto de Gmail cuando esta cargando el contenido me propuse hacer el siguiente tutorial para hacerlo usando Ajax, esto con el fin de informar de manera visual al usuario que “algo” esta sucediendo, lo que pasa es uno de los principales efectos de usar Ajax es que el usuario no sabe o no se da cuenta de que una petición se esta ejecutando de manera asíncrona.

Para esta guía usé el framework Prototype y esta probado en la mayoria de los navegadores. Solo en IE 6 no funciona de manera adecuada.

Así pues, nos hacemos la siguiente pregunta:

Pregunta: ¿Cómo muestro un gif animado con el mensaje “cargando…” mientras se procesa la respuesta con AJAX?

A lo que respondemos:

Respuesta: Este ejemplo es muy similar al efecto que hace gmail cuando se borra o carga un correo. (un mensaje en la ezquina superior derecha)

yo le he puesto ademas un gif animado para indicar el progreso.

Primero el código CSS:

.msgStatus {
position:fixed;
top:1px;
right:1px;
border:1px solid #FF6600;
background-color:#FEEB9D;
color:#333;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:14px;
width:auto;
height:auto;
display:none;
}


Puedes colocar este codigo directamente en tu pagina o hacer un archivo de estilos. (te recomiendo lo último)

Ahora el HTML de la página donde se hará uso del efecto.

Código HTML:

<!--Esto en el header de la pagina -->
<script language="javascript" type="text/javascript">
Ajax.Responders.register(globalCallbacks);
</script>

<!--Esto dentro del body -->
<div class="msgStatus" id="status"><center><img src='img/ajax-loader.gif' border='0' align='absmiddle'>Procesando tu solicitud.</center></div>


Yo uso el siguiente gif:
http://mypage.bluewin.ch/yuppi/image…jax-loader.gif

Ahora la solicitud por AJAX.

Código AJAX:

// Generalmente tenemos un archivo .js con las funciones javascript/ajax, poner esto
var globalCallbacks = {
onCreate: function(){$('status').style.display = 'block';},
onComplete : function(){
if (Ajax.activeRequestCount == 0){
$('status').style.display = 'none';
}
}
}
// despues de esto hacer cualquier petición con ajax por ejemplo:
function MiFuncionAjax(list_params){
var parametros = 'parametros=' + list_params;
new Ajax.Request('script.php', {method: 'post', parameters: parametros });
}

Y ya!

¿Cómo funciona? La variable globalCallbacks contiene dos funciones anonimas onCreate y onComplete, cuando el objeto ajax se crea el div se activa, y con onComplete se oculta.
Para que esto funcione se debe de colocar en el header de la pagina el responder: Ajax.Responders.register(globalCallbacks); que constatemente monitorea el comportamiento de la pagina, cuando se detecta que hay una petición Ajax pues le avisa a globalCallbacks que hay trabajo que hacer

Hecho esto, practicamente cualquier petición hecha con ajax es detectada y proceso visual con el div hace el resto.

Nota: Esto funciona usando Prototype.