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.
No hay comentarios:
Publicar un comentario