what does the term order of precedence mean in excel tvs excel super price in trichy levitra expre delivery revista online natura ciclo 08/2013 tesco pharmacy ventolin

Una de las cosas más habituales que 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 capítulo vamos a ver como crear dicho mensaje de carga al realizar una solicitud de Ajax con JQuery.

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 no puede ver ninguna reacción por parte del navegador, lo que le puede confundir y pensar que no ha hecho click correctamente en el enlace o botón de envío del formulario, generando repetidas e innecesarias llamadas al servidor, lo que puede derivar en diversos problemas, por lo que 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.

Preparando el código HTML

Como primer paso vamos a mostrar el código HTML que habrá 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 observar, hay 3 elementos:

  • El enlace, el cual activará la carga a Ajax cuando se haga clic sobre él.
  • Una capa id="cargando" que es donde está el mensaje de carga (aquí se ha colocado texto, pero se puede colocar cualquier cosa que necesitemos, como puede ser el típico gif animado que muestra que se está procesando la solicitud), como se puede observar, dicha capa está oculta de momento, gracias al atributo display:none;.
  • La capa id="destino" donde mostraremos la respuesta recibida tras la solicitud de Ajax.

Llamada a Ajax con JQuery y el mensaje de carga

En este punto vamos a explicar como se tiene que mostrar el mensaje de carga cuando se inicia la llamada, y como eliminarlo una vez hemos recibido la respuesta por Ajax.

Veamos el código necesario.

$(document).ready(function(){
$("#enlaceajax").click(function(evento){
evento.preventDefault();
$("#cargando").css("display","inline");
$("#destino").load("pagina-lenta.php",function(){
$("#cargando).css("display","none");
});
});
});

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 el id="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 click 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 el id="cargando" con un simple cambio en el atributo CSS display de la capa, dicho cambio de atributo se hace con el método css() sobre el elemento que queremos alterar.

Veamos 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 el 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.

En dicha función callback, tenemos que ocultar la capa con el mensaje de carga, puesto que cuando se ejecute dicha 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");

Código completo

Veamos la sintaxis completa del código que hemos ido explicando.

<!DOCTYPE html>
<html>
<head>
<title>Ejm Jquery y Ajax</title>
<scriptsrc="https://code.jquery.com/jquery-3.6.0.js"></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>
<h2>Ejm Ajax con un mensaje cargando</h2>
<ahref="#"id="enlaceajax">Haz clic</a>
<br/>
<divid="cargando"style="display:none; color:green;">Cargando...</div>
<br/>
<divid="destino"></div>
</body>
</html>

Código de la página PHP que se invoca por Ajax

El código de la página PHP a la que denominamos pagina-lenta.php tiene el siguiente código

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<?php
sleep(3);
echo "Se han tardado 3 segundos en ejecutar la p&aacute;gina";
?>
</body>
</html>

Lo que hace esta página es hacer un sleep(3) para ordenarle a PHP que espere 3 segundos antes de terminar de procesar la página y enviarla al cliente. Así conseguimos que la solicitud http tarde un poco en ser respondida, y de esta manera podamos ver el mensaje de carga un poco más de tiempo en la página.