Quando se trabalha com AJAX o que mais se deseja fazer é mostrar a mensagem de "Carregando…", ou em forma da texto ou através de uma imagem, que pode ser criada ou adquirida no site Ajax Load . Neste artigo veremos como criar uma página de carregamento com essa mensagem usando AJAX e jQuery.

Ao se fazer uma chamada via AJAX a resposta pode demorar um pouco e durante esse tempo o usuário pode pensar que a página travou ou não existe, deixando confuso. Com a mensagem de carregamento sendo mostrada, ele saberá que o conteúdo desejado poderá ser visto.

Veremos um código simples, com poucas linhas, facilitando o entendimento. O código apresentado pode ser trabalhado e ganhar outros efeitos, isso eu deixarei por conta da criatividade e força de vontade de vocês.

O primeiro passo é criar o código HTML que teremos na página que fará a solicitação via AJAX.

Clique Aqui!
Carregando…



Caregando…



Temos 3 elementos na página:
1) o link, que ativará a chamada AJAX ao ser clicado.
2) um bloco com o texto "Carregando…", identificado por id="carregando". É bom lebrar que o bloco inicia como oculto, através do CSS display:none.
3) o bloco "destino", identificado por id="destino", que é onde será aberto o conteúdo após o carregamento.

Vamos fazer agora a chamada utilizando AJAX e jQuery e a mensagem de carregamento.

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



Entendendo o código:
1- iniciamos a leitura das funções com jQuery com o método ready() sobre o documento atual
2- instanciamos uma função para o evento click do link "Clique Aqui!"
3- evento responsável por fazer o click, anulando o comportamento típico do link
4- é mostrada a mensagem de carregamento
5- é feita a chamada AJXA através do método load(), com uma função de callback, que será executada ao final do carregamento
6- esconde a mensagem de carregamento, mostrando o conteúdo carregado
7, 8, 9 - fecham as funções

E isso é tudo o que se deve fazer. Não existe nenhuma complicação especial, como já disse, pode ser feita de outras maneiras mais elegantes com um pouco mais de conhecimento sobre jQuery.

Veja abaixo o código completo para que possa executar em seu computador.



"Carregando…" com Ajax e jQuery





Isto é uma requisição AJAX com mensagem de carregamento.





Clique Aqui!
Carregando…







Código da página que será chamada pelo Ajax, cujo nome é pagina-lenta.php


sleep(3);//fará com a página demore 3 segundos para ser processada e enviada para o cliente.
echo ("Esta página demorou 3 segundos para ser carregada!");
?>