Ajax jQuery con mensaje de carga

  • Por
Vemos más posibilidades de 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 Ajax en jQuery simplificado. 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 ver este ejemplo de Ajax en una página aparte.

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 Uso de Ajax muy sencillo con jQuery, 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 Mostrar y ocultar elementos de la página con jQuery.

$(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 Mostrar y ocultar elementos de la página con jQuery.

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 función callback, 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 enlace para ver este ejercicio en marcha.

Si te ha interesado este ejemplo y quieres obtener una ayuda adicional para crear tus propios scripts en Ajax, te recomendamos ver el vídeo donde explcamos a hacer Ajax con jQuery.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

jorge_Peru

02/7/2009
Ajax jQuery con Mensaje
excelente articulo tambien excelente lo de las rutas con gmaps un saludo desde peru

elrafae

12/12/2009
como reutilizar la funcion
muy bueno el articulo, pero una pregunta como hacer un especie de funcion reutilizable donde se pueda pasar por parametro el id del div y el nombre de la pagina

henry

03/2/2010
No entiendo
tengo que tener instalado otro programa para poder correrlo desde mi servidor apache o que tengo que hacer porque copio el código y no me corre igual que el ejemplo

Marcos

30/3/2010
mensaje de carga en formulario para recomendar web a un amigo
Muy interesante el ariculo..quiero ponerlo en practica para un sencillo formulario para recomendar la pagina web....el formulario que tengo actualmente en html esta en metodo POST, action = recomendar . php /// al hacer click en el boton de recomendar quiero que cargue el php y envie la peticion de recomendar al amigo...y quiero que al ejecutarse aparezca el mensaje en ajax...he querido combinar este script en el archivo web pero no me envia los datos: mi formulario en html es:

<script src="js/jquery-1.3.2.min_recomendar.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$("#enlaceajax").click(function(evento){
evento.preventDefault();
$("#cargando").css("display", "inline");
$("#destino").load("php/recomendar.php", function(){
$("#cargando").css("display", "none");
});
});
})
</script>

<form id="recomendar" action="php/recomendar.php" method="post">

mi nombre:
<input name="nombre" id="nombre" type="text" class="text" size="15" value="" />
escriba su correo:
<input name="remitente" id="email" type="text" class="text required email" size="25" value="" />
Ecriba el correo de su amigo:
<input name="destinatario" type="text" class="text required email" size="25" value="" />

///aca viene la DIV del Ajax ///
<a href="#" id="enlaceajax">
<input type="submit" class="submit" name="submit" value="Recomendar" /> </a>

<div id="cargando" >Enviando...</div> //// Este es el mensaje al hacer click
<div id="destino"> </div>

</form>

y el codigo php es :::

<?php
$destinatario = $_POST['destinatario'];
$remitente = $_POST['email'];
$nombre = $_POST['nombre'];
$mensaje = $_POST['mensaje'];

$message = "
Hola ".$nombre."
visita la siguiente pagina link: www.dominio.com ".$mensaje."";

mail($destinatario,"Un amigo te recomienda que visites una pagina web",$message, "From: $remitente");

sleep(3);
echo ("Gracias por recomendarnos...");
?>

podrian decirme que tengo malo ..porque no me envia la solicitud al correo ?

BlackEmpire

22/4/2010
metodo load y respuesta
Sería posible con el método load recibir 2 respuestas (mas bien dividir la respuesta) para actualizar dos capas, digamos, devolver el valor a #destino y otro valor a #cargando, para decir algo como: "Cargado" para luego hacerle un .fadeout()

esto sería posible? o se debería usar otro métedo.

Gracias por estos artículos.

Mike

03/3/2011
Duda
Muy bueno el tutoria, y muy bueno el ejemplo y el codigo; sin embargo tengo una duda importante:
Como hago para que la url que carga por medio del ajaxjq no sea fijo sino que tome la direccion que debe cargar desde un link en la pagina, asi de esta manera si hiciera click en el link1 cargara el contenido1, y si hiciera click en el link2 cargara el contenido2; que es basicamente el objetivo principal de ajax, porque asi como esta no es util. Osea no es util usar ajax para recagar solo una pagina, y hacer un codigo para cada link es termina siendo menos efectivo que el mismo ajax basico.

En si, estoy interesado en aprender un poco de ajax con jquery ya que ajax simlpe no entiende scripts y en cambio el jq si, pero al no saber mucho sobre jq tengo q buscar en internet como hacer pero solo encuentro estos ejemplos asi y nunca se explica como se debe hacer funcionar este ajaxjq como si fuera normal, osea para todos o varios links de la pagina, y que cada link traiga un contenido diferente.

Pero bueno, espero que me puedan responder, ya que siempre me fueron utiles los tutoriales de este sitio; y desde ya gracias.

Sergio

20/4/2011
Felicitaciones
Felicidades y muchas gracias, un tutorial, claro y sencillo, qué más se puede pedir. Un abrazo desde Barcelona.

Mar

27/7/2011
Gracias
Me ha ayudado mucho

Carlos

05/9/2011
Muchas gracias por el aporte
Pues eso, un millon de gracias por la aclarión, te debo una

moises cuervo

15/9/2011
una duda
muy buen aporte...yo lo hacia de una forma mucho mas complicada y esto me alegra la vida, pero tengo una duda:

si tengo un formulario que carga una respuesta "php" y quiero que al darle clik en el boton submit de este form me carge la respuesta "php" en un contenedor por medio de ajax (asi como en ejemplo), como se haria esto?

en otras palabras para los q no me entendieron, como cargar contenido con ajax desde un boton de un formulario, ya que en el ejemplo lo muestra con un hipervinculo.

mil gracias, y estare atento a la respuesta!

Diego

19/3/2012
Respuesta a Mike (comentario anterior)
Es muy fácil cargar cualquier enlace, de entre varios.
Para ello juntaremos todos los enlaces que deseemos puedan ser cargados dentro de un div (o span):

<div id="enlaces">
<a href="..." //aqui pondremos todos los enlaces
<a href="..."
<a href="..."
<a href="..."
</div>

Y luego en el código jquery filtraremos los clicks a "#enlaces a" (con el id del div y el a de enlace) y cargaremos el enlace this.href, que será el que se clique:

<html>
<head>
<title>Carga enlaces</title>
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$("#enlaces a").click(function(evento){
evento.preventDefault();
$("#cargando").css("display", "inline");
$("#destino").load(this.href, function(){
$("#cargando").css("display", "none");
});
});
})
</script>
</head>

daniel

01/4/2013
no me resulta igual que el ejemplo
Hola, copie el codigo tal cual esta aqui pero el mensaje de "cargando" bajo el enlace apenas me aprece al cargar la pagina,luuego al presionar el enlace todo funciona normal.
que puedo hacer para que no salga el mensaje al comenzar?

Luis Aguila

01/7/2016
Como como?
Realmente no se si soy estupido pero no entendí se que es un grán aporte pero lo del principio hay que crear otro html ??

asbel

09/2/2017
tengo una duda hno
buen dia sabes hice todo lo que dices en el tutorial del ajax basico de carga loading y no me funciona xq sera?