Seguindo nosso tutorial sobre navegação AJAX, vamos agora criar a parte do javascript para fazer a navegação AJAX propriamente dita. No tutorial anterior fizemos a navegação via includes, que é o primeiro passo para conseguirmos aplicar o javascript de modo que mesmo sem ele o usuário (ou o Google) consiga navegar tranquilamente no site.

Para fazer funcionar a navegação AJAX nós precisamos resolver os seguintes problemas:

1 - Saber qual link deve levar para qual página e carregar assincronamente (se é que essa palavra existe) a página que se quer abrir clicando no link
2 - Colocar o conteúdo da mesma dentro da div principal
3 - Trocar o título da página no “<title>” (opcional)
4 - Trocar o ID do body (opcional)
5 - Fazer com que, de algum modo, o usuário possa por exemplo enviar o endereço da página “contato” para outra pessoa, e quando esta pessoa abrir o endereço enviado caia já na página contato

Vou explicar aqui como resolver estes 5 problemas básicos para criar a navegação. Para auxiliar no desenvolvimento dessa navegação, eu utilizei a biblioteca jQuery, que vocês já devem conhecer de outros posts aqui no blog.

É interessante criar uma pasta “js” na pasta do seu site, para colocar nossos arquivos javascript. Coloque então nessa pasta o jquery.js, e também crie um arquivo chamado “navigation.js”, ou o nome que você preferir. Depois disso, vamos incluir os dois javascripts no nosso index:

<script src="/js/jquery.js" type="text/javascript"></script> 
<script src="/js/navigation.js" type="text/javascript"></script>

Certo, vamos começar a escrever o navigation.js, criando primeiramente o código que vai atribuir aos links do menu, no evento click, a ação de carregar a página via AJAX:

$(function(){
	$("ul#menu li a").click(function(){
		if(this.className.match(/vaipra_/)) {
			carregaPagina(this.className.replace("vaipra_",""))
			return false
		} else {
			return true
		}
	})
})

Observe que os links do seu menu deverão ter uma classe com a estrutura “vaipra_nomedapagina”, exemplo: “vaipra_contato”, sendo “contato” o nome da página. Não esqueça de mudar o caminho para os links dependendo do seu html alí onde está “ul#menu li a”, o seletor funciona da mesma forma que no CSS.

A função “carregaPagina” é a que se encarregará de carregar a página dentro da div principal. Aquele “return false” serve para evitar que o href do link seja aberto após a execução do script. Já caso o link não tenha a classe “vaipra_pagina” nós retornamos true, para que ele funcione normalmente.

Perceba que eu não utilizei ponto-e-vírgula no código javascript. O ponto-e-vírgula no javascript é opcional, e eu sinceramente prefiro não utilizar, afinal odeio ponto-e-vírgula (viva Ruby, Python e outras linguagens livres disso).

Vamos criar a função que carrega a página:

carregaPagina = function(pagina)
{
	if(pagina != '') {
		location.hash = pagina
		show_loading()
 
		var pagina_sem_hash = pagina.replace("#","")
		$("#conteudo_principal").load("/"+pagina_sem_hash+".php", function(){
			hide_loading()
		})
 
		document.body.setAttribute("id", pagina_sem_hash)
	}
}

Linha 4 - Defino que o hash do location será o nome da página que queremos carregar (mais adiante explico isso direito)
Linha 5 - Chamo o show_loading(), que irá exibir o “carregando”
Linha 8 - Aqui chamo a função “load” do jQuery na div principal, passando como parâmetros o nome da página (sem o “#” e acrescentando o “.php”), também digo para o jQuery executar a função hide_loading() após a página estar carregada, esta função vai esconder o “carregando”
Linha 12 - Altero o ID do body

Vamos resolver os últimos problemas agora. Primeiro, queremos que ao abrir, por exemplo, “www.exemplo.com.br/#contato”, já abra o site carregando imediatamente a página “serviços”, então vamos alterar algo no nosso primeiro código:

$(function(){
	if(location.hash != '') {
		carregaPagina(location.hash)
	}
 
	$("ul#menu li a").click(function(){
		if(this.className.match(/vaipra_/)) {
			carregaPagina(this.className.replace("vaipra_",""))
			return false
		} else {
			return true
		}
	})
})

Acrescentei uma verificação alí: caso haja um hash no endereço (tipo www.exemplo.com/#servicos), será carregada a página definida no hash. Legal isso, não? Só pra não me chamarem de chato, vamos criar então o “carregando” com um fade in pra dar um estilo.

Primeiro crie uma div oculta no seu html, formatando-a com CSS a gosto, mas não esquecendo de por um display:none para ela ficar escondida por padrão. Minha div ficou assim (HTML e depois CSS):

<div id="ajax_loader">Carregando, aguarde...</div>

div#ajax_loader { 
	font:10px/201px 'Trebuchet MS', arial, helvetica, sans-serif; 
	color:#333; 
	text-align:center; 
	text-transform:uppercase; 
	position:absolute; 
	left:35%; 
	top:50%; 
	width:300px; 
	height:200px; 
	margin:-100px 0 -150px 0; 
	border:5px solid #4292DD; 
	background:#FFF url(imagens/ajax-loader.gif) no-repeat center center; 
	display:none; 
}

Agora vamos criar as funções show/hide loading, que irão mostrar e esconder o loader, e esconder e mostrar o conteúdo do site com um efeito de fade out/in:

show_loading = function()
{
	$("#ajax_loader").fadeIn()
	$("#conteudo_principal").animate({'opacity' : 'hide'}, 'fast')
}
 
hide_loading = function()
{
	$("#ajax_loader").fadeOut()
	$("#conteudo_principal").animate({'opacity' : 'show'}, 'slow')
}

Por hoje é só pessoal, creio que vocês tenham percebido que não é nada de outro mundo criar uma navegação AJAX eficiente, e que funciona pra todo mundo, mesmo quando o javascript não está disponível. A importância dela funcionar mesmo sem javascript é principalmente pelos robôs de busca, mas também incluí pessoas que usam leitores de tela e alguns celulares, então sempre que possível é bom fazer a coisa funcionar sem depender de javascript.

Até a próxima!