Ajax jQuery com mensagem de carregamento

Vejamos mais possibilidades de Ajax em jQuery, modificando um exemplo anterior, para criar uma mensagem de carregamento enquanto o usuário espera a resposta Ajax do servidor.

Por Miguel Angel Alvarez - Tradução de Celeste Veiga


Publicado em: 10/11/10
Valorize este artigo:
Vamos ver algumas coisas típicas que podemos desejar fazer com Ajax em uma página web, facilitando o processo de desenvolvimento com o framework Javascript jQuery. Nesta linha de artigos publicamos há pouco tempo um sobre o uso de Ajax em jQuery simplificado. No mencionado artigo vimos como fazer uma chamada Ajax com 1 só linha de código (o próprio Ajax era uma linha de código, embora sejam necessárias mais instruções para associar as ações Ajax como resposta a eventos na página).

Uma das coisas que habitualmente podemos querer fazer ao realizar uma chamada Ajax é a criação de uma mensagem de carregamento, que podemos colocar com um simples texto "carregando..." ou com a típica imagem de Ajax Loader. Neste artigo veremos como criar essa mensagem de carregamento ao realizar uma solicitação Ajax com jQuery.

Aos interessados, recomenda-se ver este exemplo de Ajax em uma página à parte.

Por que uma mensagem de carregamento ao fazer Ajax

Quando fazemos uma solicitação por Ajax, os resultados de tal chamada, às vezes, demoram a chegar. Durante esse tempo o usuário pode não ver nenhuma reação por parte do navegador, o que pode confundi-lo e levá-lo a pensar que não clicou corretamente no link ou no botão. É normal, nesse caso, que o usuário clique repetidas vezes um link ou em um botão de envio de formulário, gerando repetidas e desnecessárias chamadas ao servidor, o que pode acarretar diversos problemas.

Assim, é conveniente mostrar uma mensagem de carregamento para indicar que sua solicitação foi realizada e o processo está em andamento e esperando resposta do servidor.

Vamos explicar a implementação desta mensagem de carregamento, mas sempre tendo em conta que nossa intenção neste exemplo é manter um código pequeno que possa ser entendido facilmente. Queremos assinalar, no entanto, que as coisas podem ser feitas de outra maneira, algo melhoradas, quando saibamos mais coisas sobre a framework Javascript jQuery e coloquemos em funcionamento algumas práticas aconselháveis de programação orientada a objetos.

Preparando o código HTML

Como um primeiro passo, vamos mostrar o código HTML que teremos na página que fará a solicitação Ajax.

<a href="#" id="linkajax">Clique aqui!</a>
<div id="carregando" style="display:none; color: green;">Carregando...</div>
<br>
<div id="destino"></div>

Como se pode ver, temos três elementos: 1) o link, que ativará a chamada Ajax ao clicar sobre ele. 2) uma camada com id="carregando" que é onde está a mensagem de carregamento (nós colocamos um texto, mas se pode colocar qualquer coisa, como o típico gif animado que mostra que a solicitação está sendo processada (convém perceber que também essa camada carregando está oculta no momento, graças ao atributo de estilo CSS display:none). 3) a camada "destino", onde mostraremos a resposta recebida depois da solicitação Ajax.

Chamada Ajax com jQuery e a mensagem de carregamento

Neste ponto vamos descrever como se teria que fazer a chamada ao servidor com Ajax, porém o certo é que este processo já foi explicado com detalhes anteriormente, motivo pelo qual remeto ao artigo Uso de Ajax muito simples com jQuery, onde vocês encontrarão explicações que vou dar por sabidas neste caso. O que explicarei neste artigo é como se deve mostrar a mensagem de carregamento quando se inicia a chamada e como eliminá-la uma vez que tenhamos recebido a resposta por Ajax.

Outra coisa que o leitor deverá conhecer para poder entender este exemplo é Mostrar e ocultar elementos da página com jQuery.

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

Vou comentando linha a linha o código anterior.

Na primeira linha se está especificando um método ready() sobre o objeto document, que serve para gerar um código a ser executado quando a página estiver preparada para receber instruções Javascript que trabalhem com o DOM.

Na segunda linha se acessa o elemento com identificador "linkajax" (ou seja, o link que ativará o Ajax) para definir um evento "click".

Na linha seguinte se executa o método preventDefault() sobre o evento produzido ao clicar sobre o link. Isto se faz para anular o comportamento típico do link.

Agora vem a parte na que se mostrará a mensagem de carregamento:

$("#carregando").css("display", "inline");

Simplesmente se mostra a camada com id="carregando", com uma simples troca no atributo CSS display da camada. Essa troca de atributo é feita com o método css() sobre o elemento que queremos alterar, tal como se viu no artigo Mostrar e ocultar elementos da página com jQuery.

Agora, com a seguinte linha de código:

$("#destino").load("pagina-lenta.php", function(){

Faz-se a chamada Ajax, com o método load() sobre a camada que queremos atualizar com o conteúdo trazido por Ajax, que é a camada com id="destino". Este método recebe a URL da página a ser carregada e uma função callback, que será executada depois que o método load() tenha terminado de ser processado, isto é, depois que a solicitação Ajax tenha sido recebida e tenha mostrado seu conteúdo na camada que recebe o método.

Então, nessa função callback, temos que ocultar a camada com a mensagem de carregamento, posto que quando se execute esta função já se terá realizado todo o processamento Ajax. Isso é conseguido com o método css(), alterando a propriedade display, de maneira similar à que havíamos realizado para mostrar a camada carregando.

$("#carregando").css("display", "none");

Isto é tudo. Realmente não há nenhuma complicação especial. Embora, como disse, estas coisas possam ser feitas de uma maneira mais elegante quando aprendamos um pouco mais sobre jQuery.

Caso sirva para esclarecer as coisas, deixo a seguir o código completo da página que faz a solicitação com jQuery:

<html>
<head>
   <title>Ajax Simples</title>
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>   
<script>
$(document).ready(function(){
   $("#linkajax").click(function(evento){
      evento.preventDefault();
      $("#carregando").css("display", "inline");
      $("#destino").load("pagina-lenta.php", function(){
         $("#carregando").css("display", "none");
      });
   });
})
</script>
</head>

<body>
Isto é um Ajax com uma mensagem de carregando...
<br>
<br>

<a href="#" id="linkajax">Clique aqui!</a>
<div id="carregando" style="display:none; color: green;">Carregando...</div>
<br>
<div id="destino"></div>

</body>
</html>

Código da página PHP invocado por Ajax

O código da página PHP que trazemos por ajax "pagina-lenta.php" é o seguinte:

<?php
sleep(3);
echo ("demorou 3 segundos para executar esta pagina...");
?>

Na realidade não tem nada de especial. Simplesmente fazemos um sleep(3) para ordenar a PHP que espere 3 segundos antes de terminar de processar a página e enviá-la ao cliente. Desse modo, consigo que a solicitação http demore um pouco em ser respondida e possamos ver a mensagem de carregamento durante um pouco mais de tempo na página.

Finalmente, ponho de novo o link para ver este exercício em funcionamento.





Comentários do artigo
Foram enviados 3 comentários ao artigo
3 comentários não revisados
0 comentários revisados

Usuários :    login / registro

Manuais relacionados
Categorias relacionadas
O autor

Home | Sobre nós | Copyright | Anuncie | Entrar em contato