Resolvendo o problema do botão voltar em aplicações Ajax

Diego Pessoa — Tue, 10 Mar 2009 00:18:27 +0000

Quem aqui sempre sonhou em fazer aplicações em Ajax na qual o usuário pode navegar livremente utilizando o botão voltar e avançar, e além disso, pode adicionar seções específicas ao seu bookmark. Na teoria, isto não seria possível, visto que, o “Ajax” em si, utilizando pela maioria, é utilizado para recarregar apenas alguns blocos da página, mantendo aquela página ativa, e consequentemente, impossibilitando o uso do botão voltar ou de bookmarks, do contrário teríamos a boa e velha requisição da página inteira.

Mas então, como o GMAIL funciona? Ele é totalmente em ajax e mesmo assim, você consegue navegar utilizando o botão voltar, e se colocar um link como http://mail.google.com/mail/#compose na barra de endereços, ele irá abrir a tela de composição de e-mails normalmente. O grande segredo está nas #âncoras.
Navegação Orientada a Âncoras

Uma coisa muito interessante das chamadas Âncoras, é que elas permitem que você use o botão voltar e avançar, por exemplo, sem gerar nenhuma requisição e sem precisar sair daquela página, então, o que poderíamos fazer?

A primeira coisa seria criar um arquivo Javascript que irá ficar toda hora verificando se alguma âncora está ativa, caso esteja, ele envia a requisição ajax chamando a seção específica, baseada no nome da âncora, que será carregada dentro do bloco principal, simples não?

Como já é de praxe para Javascript hoje em dia, usaremos Jquery, portanto, lembrem-se de incluir o arquivo da biblioteca na sua aplicação.

Teríamos então, um arquivo de nome “core.js”, assim:

/**
* Ao carregar a página, o temporizador é iniciando para checar se há uma nova âncora ativa a cada 300ms
*/
$().ready(function(){
setInterval("checkAnchor()", 300);
});
var currentAnchor = null;
/**
* Metodo que checa se há alguma mudança de âncora, se houver, envia a requisição ajax
*/
function checkAnchor(){
if(currentAnchor != document.location.hash){
currentAnchor = document.location.hash;
/**
* Se não há nenhuma âncora ativa, a seção default é carregada
*/
if(!currentAnchor)
query = "section=home";
else
{
/**
* Cria a string de resultado. Convertendo a url: URL/#fotos&amp;id=2 em URL/?section=fotos&amp;id=2
* */
var splits = currentAnchor.substring(1).split(‘&amp;’);
var section = splits[0];
delete splits[0];
var params = splits.join(‘&amp;’);
var query = "section=" + section + params;
}
/**
* Envia a requisição
*/
$.get("callbacks.php",query, function(data){
$("#bloco_principal").html(data);
});
}
}

Ok, o conteúdo será carregando no eleme nto de ID “bloco_principal” através do resultado das requisições Ajax que estão sendo enviadas para a página “callbacks.php” em formato de querystring GET.
Para pegarmos, teríamos algo desse tipo:

$section = addslashes(strip_tags($_GET[’section’]));
$pagina = "paginas/".$section.".php";
if (file_exists($pagina)) {
include($pagina);
}

Com isso, bastaria uma pasta “paginas” contendo as páginas com os mesmos nomes das âncoras.

E para chamar cada seção, bastaria uma simples página html com links do tipo:

http://meusite.com/#fotos

que seria detectado pelo método “checkAnchor()” do javascript, que chamará uma requisição php carregando a página de nome fotos.php dentro do diretorio paginas, que será exibida dentro do bloco #bloco_principal que está contido na mesma página do link clicado, e o melhor de tudo, você pode voltar, avançar e adicionar as seções que quiser aos favoritos, à vontade.

Para ilustrar melhor o exemplo, fiz uma cópia descarada (haha), do site do evento php-pb.net, com a única diferença de possuir navegação em ajax através de âncoras (o original possui navegação normal). Acessem pelo link: http://www.diegopessoa.com/php-pb-ajax

Se quiserem baixar o exemplo funcionando, cliquem aqui!

Diego Pessoa » Javascript

Resolvendo o problema do botão voltar em aplicações Ajax