Navegação em AJAX usando âncoras

Estudando alguns frameworks em javascript percebi que alguns, inclusive o Angular JS, usam um mecanismo de rotas baseado na âncora da url do site para gerenciar a navegação, a vantagem de usar âncoras é que o navegador cuida dela como uma espécie de mini requisição do site, gerando histórico e estados de navegação, o que permite que você faça bom uso dos botões voltar e avançar do navegador.

Essa característica é perfeita para criar um sistema full AJAX, você pode associar cada âncora a um controller que faz chamada a um arquivo no servidor, compilar a resposta em um template e exibir na tela.

Para fazer o tratamento das alterações de âncora no JQuery, usamos o evento 'hashchange' dessa forma:



E para ler o valor da âncora basta acessar o atributo 'hash' da global 'location'.



Lembrando que o atributo 'hash' retorna o character '#' incluso no nome da âncora, então uma forma mais tranquila de pegar a informação seria fazendo um replace desse character:



Agora você pode fazer load de algum arquivo do servidor se baseando nas âncoras do usuário, sem ter que se preocupar com tratamento de voltar e avançar, toda vez que a âncora for alterada no navegador o evento é disparado e você controla tudo ali.

Share on Facebook Share on Twitter Share on Google Plus

Sobre Unknown

Sou um entusiasta de linguagens de programação e arquitetura de software. Vejo os projetos de software como partidas de xadrez onde as linguagens, os padrões e as técnicas devem ser usados com maestria para efetuar boas jogadas.