Ajax History

Bom dia/tarde/noite galera, beleza?

Para quem não entendeu o título, a parada é simples: quando uma página é carregada com Ajax, in natura mode nada é feito para controlar a URL porque essa tarefa não parece ser fácil. É por isso que eu vou postar um script que eu peguei de um website do qual eu não me lembro porque não tem nenhuma informação de copyright. Vamos lá:

As funções foram feitas em jQuery então o código é menor, porém é necessário referenciar a biblioteca (baixe no site a última versão).

Explicando o funcionamento

****

Quando a página é carregada, a primeira função checkURL() é ativada para verificar o hash da URL (aquela informação que fica junta à cerquilha). Se ela não existir, o conteúdo default é carregado normalmente. Se existir, a cerquilha é removida e alguma DIV carrega o conteúdo de acordo com o nome desse hash, exemplo:

http://www.meusite.com.br/

O conteúdo default aparece.

http://www.meusite.com.br/#pagina1

pagina1.(extensão) é carregada

Simples, não?

O jQuery tem framework para trabalhar com Ajax, então o entendimento do código ficará mais fácil:

var default_content = ""; // conteúdo padrão (é melhor não mexer)
var pageContent = "#pageContent"; // elemento onde o conteúdo será carregado
var loading = "#loading"; // elemento que contém a mensagem de carregamento

$(document).ready(function () {

 checkURL(); // checa se a URL contém hash

 $('a').click(function (e) {
 checkURL(this.hash);
 });

 default_content = $(pageContent).html();
 setInterval("checkURL()", 250);

});

var lasturl = "";

function checkURL(hash) {
 if (!hash) {
 hash = window.location.hash;
 }

 if (hash != lasturl) {
 lasturl = hash;

 if (hash == "") {
 $(pageContent).html(default_content);
 } else { // se houver hash, a outra função é chamada para tratá-lo e executar o Ajax
 loadPage(hash);
 }
 }
}

function loadPage(url) { // o parâmetro é o HREF do link HTML, exemplo: href="#pagina1"

 url = url.replace('#', ''); // remove a cerquilha

 $(loading).css('visibility', 'visible');

 $.ajax({ // configurações Ajax
 type: "GET",
 url: url + ".php", // extensão PHP, se quiser definir a extensão da página via atributo HREF, é só deixar somente a variável "url" aqui <<< e colocar href="#pagina.(extensao)"
 timeout: 5000,
 dataType: "html",
 success: function (msg) {
 if (parseInt(msg) != 0) {
 $(pageContent).html(msg);
 $(loading).css('visibility', 'hidden');
 }
 },
 error: function () { // manipula a mensagem de erro
 $(pageContent).html("Error: couldn't receive page content. Please, check out browser URL.");
 $(loading).css('visibility', 'hidden');
 }
 });

}Acho que os comentários foram suficientes. Agora só falta criar um teste (todos gostamos de testes):

<script src="[http://code.jquery.com/jquery-1.4.2.min.js"](http://code.jquery.com/jquery-1.4.2.min.js) type="text/javascript"></script>
<a href="#pagina1">Carregar "pagina1.php"</a> <a href="#pagina2">Carregar "pagina2.php"</a>
<div id="loading">Carregando...</div>
<div id="pageContent">Conteúdo da página inicial</div>Acabou! Agora é só brincar com sua URL, desde o IE6 ao Chrome6 =D