Como mostrar un mensaje de carga mientras de procesa una solicitud ajax, usando el framework xajax.
Este artículo se engloba dentro del manual de Ajax en PHP utilizando Xajax. Es importante que se sepa que hasta el momento en este manual estamos tratando siempre la versión 0.2.5 de Xajax, que es la que está publicada como estable y, por tanto, es la que se aconseja en el momento de escribir este artículo para entornos en producción. Para versiones posteriores de Xajax (en concreto la 0.5) estas indicaciones cambian, pero podéis ver cómo hacerlo en Update de script a Xajax 0.5.
Primero veamos una función de PHP que se invocaría por Ajax que tardaría en procesarse un cierto tiempo:
function funcion_lenta()
{
//retenemos el procesamiento por 3 segundos
sleep(3);
$objResponse = new xajaxResponse();
$objResponse->addAssign("capa_actualiza","innerHTML","Finalizado");
return $objResponse;
}
Esta función, que sería la más simple que se podría hacer, tardará al menos 3 segundos en procesarse. Para asegurarnos de ello hemos hecho que el procesamiento de PHP se detenga por 3 segundos con la función sleep(3).
Para llamar a esta función por medio de xajax haremos algo como esto:
<a href="javascript:void(xajax_funcion_lenta())">Llamar por ajax a una función lenta usando xajax</a>!
|
Nota: hay una serie de líneas de código que serían necesarias para que esto funcionase con xajax, como el processRequests() o el printJavascript(), que no estoy comentando porque hemos visto en capítulos anteriores del manual. De todos modos muestro el código completo de este ejemplo previo, que es sólo una prueba para enseñar el efecto producido por una espera en el procesamiento ajax.
<? |
Ahora podemos ver como funciona este ejemplo en una página aparte.
Código para mostrar un mensaje de carga con Xajax
Xajax tiene unas utilidades específicas en la versión 0.2.5 para mostrar los mensajes de "Cargando" que vamos a utilizar, que nos van a simplificar bastante la vida.
Para crear el mensaje de carga primero debemos colocar una capa donde aparecerá el texto "Cargando " o la típica imagen de carga, esa que es como una rueda que va moviéndose.
<div id="MensajeCarga" style="display: none;">
Cargando!...
</div>
Hay que señalar que la cama tiene el estilo display: none; para que no se muestre en la página, en un principio y hasta que no lo indiquemos con xajax.
Ahora, en el framework Xajax simplemente tenemos que especificar con Javascript dos propiedades del objeto xajax, que se ha instanciado implícitamente al hacer el $xajax->printJavascript(). Son las siguientes:
xajax.loadingFunction = [function para mostrar el mensaje de carga];
xajax.doneLoadingFunction = [function para ocultar el mensaje de carga];
A ambas propiedades debemos asignarles como valores sendas funciones javascript que serán las encargadas de mostrar y ocultar el mensaje de carga. Esto lo podremos hacer con un código como este, que tendremos que colocar después del printJavascript().
xajax.callback.global.onResponseDelay = muestra_cargando;
xajax.callback.global.onComplete = oculta_cargando;
<script type="text/javascript">
<!--
function muestra_cargando(){
xajax.$('MensajeCarga').style.display='block';
}
function oculta_cargando(){
xajax.$('MensajeCarga').style.display='none';
}
xajax.loadingFunction = muestra_cargando;
xajax.doneLoadingFunction = oculta_cargando;
// --></script>
Como se puede ver, hemos creado dos funciones muestra_cargando() y oculta_cargando(), a las que hemos colocado dos códigos para cambiar la propiedad display de los estilos CSS de la capa "MensajeCarga". En muestra_cargando() hacemos display='block' para que se muestre la capa y en oculta_cargando() hacemos display='none' para ocultarla.
Luego hemos asignado esas funciones a xajax.loadingFunction y xajax.doneLoadingFunction, tal como habíamos especificado.
Eso es todo! Ahora se invocará xajax.loadingFunction automáticamente cuando se realice una llamada a Ajax por medio de Xajax. También automáticamente se invocará a xajax.doneLoadingFunction cuando se termine de procesar la solicitud Ajax.
Podemos ver la funcionalidad completa en marcha en una página aparte.
El código PHP del ejemplo completo lo podemos ver a continuación:
<?
require ('xajax/xajax.inc.php');
function funcion_lenta()
{
sleep(3);
$objResponse = new xajaxResponse();
$objResponse->addAssign("capa_actualiza","innerHTML","Finalizado");
return $objResponse;
}
$xajax = new xajax();
$xajax->registerFunction('funcion_lenta');
$xajax->processRequests();
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Ejemplo de mostrar un aviso de carga de la página</title>
<?
$xajax->printJavascript("xajax/");
?>
<script type="text/javascript">
<!--
function muestra_cargando(){
xajax.$('MensajeCarga').style.display='block';
}
function oculta_cargando(){
xajax.$('MensajeCarga').style.display='none';
}
xajax.loadingFunction = muestra_cargando;
xajax.doneLoadingFunction = oculta_cargando;
// --></script>
</head>
<body>
<div id="capa_actualiza">
<a href="javascript:void(xajax_funcion_lenta())">Llamar por ajax a una función lenta usando xajax</a>!
</div>
<div id="MensajeCarga" style="display: none;">
Cargando!...
</div>
</body>
</html>
De nuevo, dejo el enlace para ver el ejemplo completo en funcionamiento.
Miguel Angel Alvarez
Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...