Resolvendo o problema do botão “voltar” em aplicações Ajax
Segunda, 9 de Maro de 2009 às 21:18Quem 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&id=2 em URL/?section=fotos&id=2
-
* */
-
var splits = currentAnchor.substring(1).split(‘&’);
-
var section = splits[0];
-
delete splits[0];
-
var params = splits.join(‘&’);
-
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 elemento 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:
-
$pagina = "paginas/".$section.".php";
-
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:
-
<a href="#fotos">Veja fotos</a>
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!
Links Rápidos:
Fotos no Gtalk: Você poderá adicionar fotos ao Gtalk do seu gmail, deixando com cara igual ao do programa Gtalk, bem legal.
Super Estrelas
Responda a todos
Férias!!!
Gadget do Google Docs