Seguindo nossa pseudo-série “Como eu gosto de jQuery: é tão simples fazer as coisas com ele!”, segue um código bem simples para fazer uma navegação AJAX, mas antes, caso você queira, veja o exemplo funcionando.
Você também pode baixar os códigos: navegacao_ajax.zip
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <title>Navegação AJAX mamão-com-açúcar</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> var home = "home.html" $(function(){ navegar(home) atribuir() }) atribuir = function() { $("ul#menu li a").click(function(){ navegar($(this).attr("href")) return false }) } navegar = function(pagina) { $("#conteudo").load(pagina) } </script> </head> <body id="index"> <div id="geral"> <div id="topo"> <h1>Navegação AJAX mamão-com-açúcar</h1> <ul id="menu"> <li><a href="home.html" class="home">home</a></li> <li><a href="sobre.html" class="sobre">sobre</a></li> <li><a href="contato.html" class="contato">contato</a></li> </ul> </div> <div id="conteudo"> </div> </div> </body> </html> |
Como podem ver, com pouco código nós conseguimos fazer uma navegação totalmente funcional. Claro que dá para incrementar muito mais, mas o básico está aí!
Até mais!
Não era mais fácil colocar, na função atribuir, um
navegar($(this).attr('href')), não?Falha nossa, valeu por avisar!
No caso eu coloquei desta forma porque quando usamos includes na navegação sem AJAX a página nem sempre é a mesma, mas neste caso fica melhor colocar o href mesmo.
Posso carregar codigos HTML + JavaScript?
Estou procurando essa solução, mas não estou achando.
Nunca tentei nada do tipo Marcelo. Talvez a lógica do modo como você está pensando não esteja certa, tente encontrar outra solução mais simples
A solução que cheguei foi criar um MEGA Arquivo JS com todas as funções JavaScript que utilizarei. Isso é ruim pela demora ao carregar esse arquivo na inicialização(Quando falo em demora digo os meus clientes que ainda usam conexão discada).
Enviar o pedaço HTML + JavaScript fica mais rápido e mais seguro.
Ainda estou na “caça” dessa solução.
No exemplo citado, as páginas que são carregadas não possuem caracteres com acento, no caso quando colocamos palavras na nossa lingua as palavras ficam diferentes. Tem alguma solução em jquery para padronizar os caracteres com acentos e ç ??
Igor, basta salvar as páginas no encoding correto (geralmente utilizo UTF-8).
Mas… onde eu defino o encoding ?
Igor, isso depende do seu editor, você precisa verificar se o editor está salvando o arquivo com o encoding correto. Dê uma pesquisada a respeito de encodes para entender melhor.
Se eu tivesse uma mesma imagem em duas páginas diferentes, ao mudar de uma página para a outra a imagem seria carregda novamente?
(considerando que ela estivesse no mesmo lugar div, etc…)
Grato se alguém responder!
Messias, após a imagem ser carregada pela primeira vez, ela vai para o cache do browser. Então na próxima vez (mesmo sendo uma página diferente) a imagem virá do cache e não do servidor.
E se eu quiser que o menu fique ativo, como faço? É Java?
É melhor colocar uma url diferente na hora de carregar uma pagina em ajax, para não ter problemas com o Cache do navegador,
isso e muito simples, veja um exemplo:
function Atualiza (Type){
var Data = new Date();
$(’#'+Type).html(’Aguarde…’);
$(’#'+Type).load(’chart.php?type=cpu&date=’+Data.getTime());
}
Basta carregar algum get no arquivo, asim o navegador verá que não e o mesmo, e então não utilizará o cache..
Boa noite!! estou com uma duvida, se eu quiser usar pra varios digamos assim atributos na pagina pode? por exemplo nesse trecho abaixo:
atribuir = function()
{
$("ul#menu li a").click(function(){
navegar($(this).attr("href"))
return false
})
$("a").click(function(){
navegar($(this).attr("href"))
return false
})
}
se eu quiser colocar a tag ‘a’ para que aconteca a chamada da pagina sem refresh eu posso?tu
tentei fazer dessa forma, mas nao funcionou, inseri um id no css, mas tbm nao deu certo, pode me ajudar?
vlw e parabens pelo tutorial