Mensagem de Carregando… com Ajax e jQuery

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

Mensagem de Carregando… com Ajax e jQuery

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!");
?>

Melhores celulares Xiaomi para comprar agora

Conteúdo relacionado

Melhores celulares da Xiaomi para comprar em 2021
Xiaomi

Melhores celulares da Xiaomi para comprar em 2021

Qual marca consegue oferecer modelos de celular que sejam bons e que não custe tanto? É provável que você tenha pensado na Xiaomi, e sim, você está certo. Confira a nossa lista de melhores modelos da empresa para comprar atualmente!

Formulário de contato em php
Programação

Formulário de contato em php

Guia do PHP: Aprenda a fazer um formulário em PHP que envia via SMTP autenticado o e-mail para um destinatário.

Portfolio image slider com CSS e JQuery
Programação

Portfolio image slider com CSS e JQuery

Com o lançamento do IPAD e da sua falta de suporte para flash, que despertou uma série de debates sobre o futuro do flash. Com isto em mente, eu acredito que é prudente criar widgets simples como o controle deslizante de imagem usando HTML / CSS / Javascript, e deixar mais aplicações interativas para o flash, se necessário.