Vemos cómo hacer un aviso cargando típico de Ajax, utilizando el framework Xajax en su versión 0.5.
En esta serie de artículos estamos trabajando con Ajax y PHP utilizando el framework Xajax, que venimos publicando en el Manual de Xajax.
A modo de introducción, debemos decir que en los primeros artículos del manual creado por desarrolloweb.com estuvimos trabajando sobre la versión 0.2 de Xajax. Ahora, con la publicación de la versión 0.5 algunas cosas han cambiado en cuanto a modo de trabajo y sintaxis del framework.
Para actualizar los scripts a la nueva versión del framework publicamos el artículo Actualizar Xajax 0.2 a Xajax 0.5. No obstante, estamos retomando algunos scripts creados anteriormente para actualizarlos nosotros mismos a la versión 0.5, de modo que sirva de muestra a los lectores de DesarrolloWeb.com. En este caso le toca el turno al artículo Mensaje de carga con ajax usando xajax, en el que vimos cómo crear un pequeño mensaje "Cargando" cuando se realizaba una solicitud Ajax, para advertir al usuario que los contenidos solicitados estaban cargando.
Vamos a transformar por tanto el sistema que propone Xajax para incluir un mensaje de carga para la versión 0.5 de Xajax. Además, vamos a realizar unos pequeños cambios al script para que podamos aprender cosas nuevas con el framework y de paso atender a uno de los comentarios publicados por los usuarios, en el que expresaba una duda sobre cómo se podría incluir el mensaje de carga en la propia capa donde se van a mostrar los resultados de la solicitud Ajax.
Para hacernos una idea exacta de lo que vamos a realizar en este artículo podéis ver el ejemplo en marcha.
Así pues, sería extremadamente recomendable comenzar la lectura por el artículo Mensaje de carga de solictud Ajax usando Xajax, puesto que hay muchas cosas comentadas en el mencionado artículo que aquí no vamos a explicar.
El código adaptado a Xajax 0.5
Vamos a ver directamente el código de este ejemplo, adaptado a la sintaxis del framework Xajax versión 0.5. Es muy parecido al explicado en el anterior artículo. Voy a resaltar en negrita las líneas de código donde se han realizado cambios y luego los explicaremos.
<?
require ('xajax/xajax_core/xajax.inc.php');
function funcion_lenta()
{
sleep(3);
$objResponse = new xajaxResponse();
$objResponse->Assign("capa_actualiza","innerHTML","Finalizado");
return $objResponse;
}
$xajax = new xajax();
$xajax->register(XAJAX_FUNCTION, 'funcion_lenta');
$xajax->processRequest();
?>
<!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.dom.create("capa_actualiza","div", "cargando");
xajax.$('cargando').innerHTML='<img src="loading.gif" alt="cargando..." width="16" height="16" border="0">';
}
function oculta_cargando(){
alert("cargado");
}
xajax.callback.global.onResponseDelay = muestra_cargando;
xajax.callback.global.onComplete = oculta_cargando;
// --></script>
</head>
<body>
<div id="capa_actualiza">
<a href="javascript:void(xajax_funcion_lenta())">Llamar con ajax a una función que tarda en cargar</a>!
</div>
</body>
</html>
Hemos visto que los cambios no son muchos y es de agradecer. Pero vamos a verlos uno a uno, aunque recordamos que están explicados casi todos estos cambios en el artículo Actualizar Xajax 0.2 a la versión 0.5.
Veamos pues, línea a línea, los cambios resaltados de este script.
require ('xajax/xajax_core/xajax.inc.php');
Esto ha cambiado porque ahora las librerías de Xajax están en carpetas distintas.
$objResponse->Assign("capa_actualiza","innerHTML","Finalizado");
El método addAssign del objeto de la clase xajaxResponse ahora se llama simplemente Assign.
$xajax->register(XAJAX_FUNCTION, 'funcion_lenta');
La función registerFunction ahora se llama register y debemos especificar qué es lo que estamos registrando.
$xajax->processRequest();
Esta función también ha cambiado el nombre. Antes era $xajax->processRequests() y ahora $xajax->processRequest() (hemos quitado la "s" final).
Ahora viene lo más interesante, que son las funciones que servirán para mostrar el mensaje de carga. Estas dos funciones que hemos creado sirven para realizar las acciones necesarias para mostrar y ocultar el mensaje de carga. Por darle algo más de interés a este artículo de desarrollo web com no nos hemos limitado a traducirlas a Xajax 0.5, sino que además hemos hecho un par de cambios en su comportamiento.
El cambio principal, que decíamos fue pedido por un lector, consiste en que el mensaje de carga aparece en la propia capa donde vamos a colocar el contenido traído por Ajax. Antes teníamos una capa con el mensaje de carga que simplemente mostrábamos al iniciar la carga y luego la ocultábamos al terminarse.
En este código hemos utilizado unas funciones de Xajax, de la librería de funciones Javascript llamadas xajax_core.js. Estas funciones sirven para realizar cosas con Javascript y en concreto hemos utilizado varias para alterar los contenidos del DOM de la página, es decir, los objetos del navegador que sirven para alterar dinámicamente los contenidos de la página.
Veamos el código del que estoy hablando:
function muestra_cargando(){
xajax.dom.create("capa_actualiza","div", "cargando");
xajax.$('cargando').innerHTML='<img src="loading.gif" alt="cargando..." width="16" height="16" border="0">';
}
function oculta_cargando(){
alert("cargado");
}
xajax.callback.global.onResponseDelay = muestra_cargando;
xajax.callback.global.onComplete = oculta_cargando;
En la función muestra_cargando lo que hago es crear una nueva etiqueta DIV e insertarla en la capa que se va a actualizar con los contenidos de la solicitud Ajax. Esto se hace con la función xajax.dom.create(), que recibe la capa donde se va a crear el nuevo elemento HTML, el nombre del elemento o etiqueta que se va a crear y el identificador que se va a asignar a dicho elemento creado.
Luego con xajax.$('cargando').innerHTML lo que se consigue es asignar un código HTML a la capa recién creada. xajax.$('cargando') es una referencia a la capa que se acaba de crear y con su propiedad innerHTML accedemos al código HTML que tiene dentro. Simplemente asignamos un código para mostrar una imagen.
En la siguiente función oculta_cargando(), simplemente muestro un mensaje de alerta para que se sepa que se ha terminado de cargar. Esta función no hacía mucha falta en este ejemplo, puesto que la solicitud Xajax realizada por la función PHP funcion_lenta() iba a sustituir el contenido de la "capa_actualiza" y por tanto desaparecerán con ellos la imagen de carga generada con la función muestra_cargando(). No obstante, la he colocado para que sirva de ejemplo y por si el lector la quiere utilizar para cualquier cosa que necesite.
Por último las líneas:
xajax.callback.global.onResponseDelay = muestra_cargando;
xajax.callback.global.onComplete = oculta_cargando;
Simplemente hacen que se asocien este par de funciones a las solicitudes de Ajax que se realicen. En xajax.callback.global.onResponseDelay asignamos la función que se debe ejecutar al inicio de la solicitud y en xajax.callback.global.onComplete asignamos la función a ejecutar cuando finalice.
Con esto he terminado todo lo que había que resaltar del script adaptado a Xajax 0.5. Para acabar, se puede ver el ejemplo en marcha.
A modo de introducción, debemos decir que en los primeros artículos del manual creado por desarrolloweb.com estuvimos trabajando sobre la versión 0.2 de Xajax. Ahora, con la publicación de la versión 0.5 algunas cosas han cambiado en cuanto a modo de trabajo y sintaxis del framework.
Para actualizar los scripts a la nueva versión del framework publicamos el artículo Actualizar Xajax 0.2 a Xajax 0.5. No obstante, estamos retomando algunos scripts creados anteriormente para actualizarlos nosotros mismos a la versión 0.5, de modo que sirva de muestra a los lectores de DesarrolloWeb.com. En este caso le toca el turno al artículo Mensaje de carga con ajax usando xajax, en el que vimos cómo crear un pequeño mensaje "Cargando" cuando se realizaba una solicitud Ajax, para advertir al usuario que los contenidos solicitados estaban cargando.
Vamos a transformar por tanto el sistema que propone Xajax para incluir un mensaje de carga para la versión 0.5 de Xajax. Además, vamos a realizar unos pequeños cambios al script para que podamos aprender cosas nuevas con el framework y de paso atender a uno de los comentarios publicados por los usuarios, en el que expresaba una duda sobre cómo se podría incluir el mensaje de carga en la propia capa donde se van a mostrar los resultados de la solicitud Ajax.
Para hacernos una idea exacta de lo que vamos a realizar en este artículo podéis ver el ejemplo en marcha.
Así pues, sería extremadamente recomendable comenzar la lectura por el artículo Mensaje de carga de solictud Ajax usando Xajax, puesto que hay muchas cosas comentadas en el mencionado artículo que aquí no vamos a explicar.
El código adaptado a Xajax 0.5
Vamos a ver directamente el código de este ejemplo, adaptado a la sintaxis del framework Xajax versión 0.5. Es muy parecido al explicado en el anterior artículo. Voy a resaltar en negrita las líneas de código donde se han realizado cambios y luego los explicaremos.
<?
require ('xajax/xajax_core/xajax.inc.php');
function funcion_lenta()
{
sleep(3);
$objResponse = new xajaxResponse();
$objResponse->Assign("capa_actualiza","innerHTML","Finalizado");
return $objResponse;
}
$xajax = new xajax();
$xajax->register(XAJAX_FUNCTION, 'funcion_lenta');
$xajax->processRequest();
?>
<!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.dom.create("capa_actualiza","div", "cargando");
xajax.$('cargando').innerHTML='<img src="loading.gif" alt="cargando..." width="16" height="16" border="0">';
}
function oculta_cargando(){
alert("cargado");
}
xajax.callback.global.onResponseDelay = muestra_cargando;
xajax.callback.global.onComplete = oculta_cargando;
// --></script>
</head>
<body>
<div id="capa_actualiza">
<a href="javascript:void(xajax_funcion_lenta())">Llamar con ajax a una función que tarda en cargar</a>!
</div>
</body>
</html>
Hemos visto que los cambios no son muchos y es de agradecer. Pero vamos a verlos uno a uno, aunque recordamos que están explicados casi todos estos cambios en el artículo Actualizar Xajax 0.2 a la versión 0.5.
Veamos pues, línea a línea, los cambios resaltados de este script.
require ('xajax/xajax_core/xajax.inc.php');
Esto ha cambiado porque ahora las librerías de Xajax están en carpetas distintas.
$objResponse->Assign("capa_actualiza","innerHTML","Finalizado");
El método addAssign del objeto de la clase xajaxResponse ahora se llama simplemente Assign.
$xajax->register(XAJAX_FUNCTION, 'funcion_lenta');
La función registerFunction ahora se llama register y debemos especificar qué es lo que estamos registrando.
$xajax->processRequest();
Esta función también ha cambiado el nombre. Antes era $xajax->processRequests() y ahora $xajax->processRequest() (hemos quitado la "s" final).
Ahora viene lo más interesante, que son las funciones que servirán para mostrar el mensaje de carga. Estas dos funciones que hemos creado sirven para realizar las acciones necesarias para mostrar y ocultar el mensaje de carga. Por darle algo más de interés a este artículo de desarrollo web com no nos hemos limitado a traducirlas a Xajax 0.5, sino que además hemos hecho un par de cambios en su comportamiento.
El cambio principal, que decíamos fue pedido por un lector, consiste en que el mensaje de carga aparece en la propia capa donde vamos a colocar el contenido traído por Ajax. Antes teníamos una capa con el mensaje de carga que simplemente mostrábamos al iniciar la carga y luego la ocultábamos al terminarse.
En este código hemos utilizado unas funciones de Xajax, de la librería de funciones Javascript llamadas xajax_core.js. Estas funciones sirven para realizar cosas con Javascript y en concreto hemos utilizado varias para alterar los contenidos del DOM de la página, es decir, los objetos del navegador que sirven para alterar dinámicamente los contenidos de la página.
Referencia: Podemos saber lo que es el DOM en el taller de trabajo con el DOM publicado en DesarrolloWeb.com.
Veamos el código del que estoy hablando:
function muestra_cargando(){
xajax.dom.create("capa_actualiza","div", "cargando");
xajax.$('cargando').innerHTML='<img src="loading.gif" alt="cargando..." width="16" height="16" border="0">';
}
function oculta_cargando(){
alert("cargado");
}
xajax.callback.global.onResponseDelay = muestra_cargando;
xajax.callback.global.onComplete = oculta_cargando;
En la función muestra_cargando lo que hago es crear una nueva etiqueta DIV e insertarla en la capa que se va a actualizar con los contenidos de la solicitud Ajax. Esto se hace con la función xajax.dom.create(), que recibe la capa donde se va a crear el nuevo elemento HTML, el nombre del elemento o etiqueta que se va a crear y el identificador que se va a asignar a dicho elemento creado.
Luego con xajax.$('cargando').innerHTML lo que se consigue es asignar un código HTML a la capa recién creada. xajax.$('cargando') es una referencia a la capa que se acaba de crear y con su propiedad innerHTML accedemos al código HTML que tiene dentro. Simplemente asignamos un código para mostrar una imagen.
En la siguiente función oculta_cargando(), simplemente muestro un mensaje de alerta para que se sepa que se ha terminado de cargar. Esta función no hacía mucha falta en este ejemplo, puesto que la solicitud Xajax realizada por la función PHP funcion_lenta() iba a sustituir el contenido de la "capa_actualiza" y por tanto desaparecerán con ellos la imagen de carga generada con la función muestra_cargando(). No obstante, la he colocado para que sirva de ejemplo y por si el lector la quiere utilizar para cualquier cosa que necesite.
Por último las líneas:
xajax.callback.global.onResponseDelay = muestra_cargando;
xajax.callback.global.onComplete = oculta_cargando;
Simplemente hacen que se asocien este par de funciones a las solicitudes de Ajax que se realicen. En xajax.callback.global.onResponseDelay asignamos la función que se debe ejecutar al inicio de la solicitud y en xajax.callback.global.onComplete asignamos la función a ejecutar cuando finalice.
Con esto he terminado todo lo que había que resaltar del script adaptado a Xajax 0.5. Para acabar, se puede ver el ejemplo en marcha.
Miguel Angel Alvarez
Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...