Ajax History

[Eliseu M. 2]

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" 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

[William Bruno 1501]

=)

sem jquery

http://forum.imasters.com.br/index.php?/topic/403171-pagina-dentro-de-div-ajax-problema-ao-atualizar/page__view__findpost__p__1581230