Manuales Gratis
Ajax en jQuery, modificando un ejemplo
anterior, para crear un mensaje de carga mientras que el usuario espera
la respuesta Ajax del servidor.
Queremos ver algunas cosas típicas que podríamos desear hacer con Ajax
en una página web, facilitando el proceso de desarrollo con el
framework Javascript jQuery. En esta línea de artículos ya publicamos
hace poco un artículo sobre el uso de .
En el mencionado artículo vimos cómo hacer una llamada Ajax con 1 sola
línea de código (el Ajax en si era una línea de código, aunque se
necesitan varias instrucciones más para asociar las acciones Ajax como
respuesta a eventos en la página).
Una de las cosas que más habitualmente podríamos desear hacer cuando se
realiza una llamada Ajax es la creación de un mensaje de carga, que
podemos colocar con un simple texto "cargando..." o con la típica
imagen de Ajax Loader. En este artículo veremos cómo crear ese mensaje de carga al realizar una solicitud Ajax con jQuery.
Para los interesados, se puede .
Por qué un mensaje de carga al hacer Ajax
Cuando hacemos una solicitud por Ajax, los resultados de dicha llamada
a veces tardan en llegar. Durante ese tiempo el usuario puede no ver
ninguna reacción por parte del navegador, lo que le puede confundir y
pensar que no ha hecho clic correctamente en el enlace o botón. Sería
normal en ese caso que el usuario pulse repetidas veces un enlace o un
botón de envío de formulario, generando repetidas e innecesarias
llamadas al servidor, lo que puede derivar en diversos problemas.
Así pues, es conveniente mostrar un mensaje de carga para advertir
que su solicitud fue realizada y el proceso está en marcha y esperando
respuesta del servidor.
Vamos a explicar la implementación de este mensaje de carga,
pero siempre teniendo en cuenta que nuestra intención en este ejemplo
es mantener un código pequeño que se pueda entender fácilmente. Aunque
queremos remarcar que las cosas se podrían hacer de otra manera, algo
mejorada, cuando sepamos más cosas sobre el framework Javascript jQuery
y pongamos en marcha algunas prácticas aconsejables de programación
orientada a objetos.
Preparando el código HTML
Como un primer paso, vamos a mostrar el código HTML que tendremos en la página que hará la solicitud Ajax.
<a href="#" id="enlaceajax">Haz clic!</a>
<div id="cargando" style="display:none; color: green;">Cargando...</div>
<br>
<div id="destino"></div>
Como se puede ver, tenemos tres elementos: 1) el enlace, que
activará la llamada a Ajax cuando se haga clic sobre él. 2) una capa
con id="cargando" que es donde está el mensaje de carga (nosotros hemos
colocado un texto, pero se podría colocar cualquier cosa, como el
típico gif animado que muestra que se está procesando la solicitud
(conviene fijarse también que esa capa cargando está oculta de momento,
gracias al atributo de estilo CSS display:none). 3) la capa "destino",
donde mostraremos la respuesta recibida tras la solicitud Ajax.
Llamada a Ajax con jQuery y el mensaje de carga
En este
punto vamos a describir cómo se tendría que hacer la llamada al
servidor con Ajax, pero lo cierto es que este proceso ya lo explicamos
con detalle anteriormente, por lo que os refiero al artículo ,
donde encontraréis unas explicaciones que voy a dar por sabidas en este
caso. Lo que explicaré en este artículo es cómo se tiene que mostrar el
mensaje de carga cuando se inicia la llamada y como eliminarlo una vez
hemos recibido la respuesta por Ajax.
Otra cosa que el lector deberá conocer para poder entender este ejemplo es .
$(document).ready(function(){
$("#enlaceajax").click(function(evento){
evento.preventDefault();
$("#cargando").css("display", "inline");
$("#destino").load("pagina-lenta.php", function(){
$("#cargando").css("display", "none");
});
});
})
Voy comentando línea a línea el código anterior.
En la primera línea se está especificando un método ready()
sobre el objeto document, que sirve para generar un código a ser
ejecutado cuando la página está lista para recibir instrucciones
Javascript que trabajen con el DOM.
En la segunda línea se accede al elemento con identificador
"enlaceajax" (es decir, el enlace que activará el Ajax) para definir un
evento "click".
En la siguiente línea se ejecuta el método preventDefault()
sobre el evento producido al hacer clic sobre el enlace. Esto se hace
para anular el comportamiento típico del enlace.
Ahora viene la parte en la que se mostrará el mensaje de carga:
$("#cargando").css("display", "inline");
Simplemente se muestra la capa con id="cargando", con un simple
cambio en el atributo CSS display de la capa. Ese cambio de atributo lo
hacemos con el método css() sobre el elemento que queremos alterar, tal
como se vio en el artículo .
Ahora, con la siguiente línea de código:
$("#destino").load("pagina-lenta.php", function(){
Se hace la llamada Ajax, con el método load() sobre la capa que
queremos actualizar con el contenido traído por Ajax, que es la capa
con id="destino". Este método recibe la URL de la página a cargar y una ,
que se ejecutará después que el método load() se haya terminado de
procesar, esto es, después de que la solicitud Ajax se haya recibido y
se haya mostrado su contenido en la capa que recibe el método.
Entonces, en esa función callback, tenemos que ocultar la capa
con el mensaje de carga, puesto que cuando se ejecute esta función ya
se habrá realizado todo el procesamiento Ajax. Eso lo conseguimos con
el método css(), alterando la propiedad display, de manera similar a
como lo habíamos realizado para mostrar la capa cargando.
$("#cargando").css("display", "none");
Esto es todo. Realmente no tiene ninguna complicación especial.
Aunque, como decía, estas cosas se podrán hacer de una manera más
elegante cuando aprendamos un poquito más sobre jQuery.
Por si sirve para aclarar las cosas, dejo a continuación el código completo de la página que hace la solicitud con jQuery:
<html>
<head>
<title>Ajax Simple</title>
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$("#enlaceajax").click(function(evento){
evento.preventDefault();
$("#cargando").css("display", "inline");
$("#destino").load("pagina-lenta.php", function(){
$("#cargando").css("display", "none");
});
});
})
</script>
</head>
<body>
Esto es un Ajax con un mensaje de cargando...
<br>
<br>
<a href="#" id="enlaceajax">Haz clic!</a>
<div id="cargando" style="display:none; color: green;">Cargando...</div>
<br>
<div id="destino"></div>
</body>
</html>
Código de la página PHP que se invoca por Ajax
El código de la página PHP que traemos por ajax "pagina-lenta.php" es el siguiente:
<?php
sleep(3);
echo ("He tardado 3 segundos en ejecutar esta p&aactute;gina...");
?>
En realidad no tiene nada en especial. Simplemente hacemos un
sleep(3) para ordenarle a PHP que espere 3 segundos antes de terminar
de procesar la página y enviarla al cliente. Así consigo que la
solicitud http tarde un poco es ser respondida y podamos ver el mensaje
de carga durante un poco más de tiempo en la página.
Finalmente, pongo de nuevo el .
Si te ha interesado este ejemplo y quieres obtener una ayuda
adicional para crear tus propios scripts en Ajax, te recomendamos ver
el .
Enlaces: |
