trocar de páginas usando DIV sem usar AJAX

[George]

e aí pessoal! estou fazendo um site onde me pediram para fazer um sistema de mudança de páginas por DIV (isto é, para que não recarregue a página toda quando clicar num link). Eu não sei nada de AJAX, mas creio que tem jeito de fazer isso só com JS e CSS. Eu poderia colocar todas as páginas dentro de DIVs com display:none/inline/block, mas não sei se essa é a melhor forma de fazer isso, já que em um só arquivo teria o conteúdo de todas as páginas e ficaria pesado pra carregar na primeira vez. Qual a melhor forma de fazer isso então?

[KaKarotto]

George, Ajax não é nenhum bixo de 7 cabeças. Aliás, ele é uma solução e não uma complicação.

Se tentasse fazer isso apenas com javascript, sem usar ajax, veria o quão difícil é.

Faça a sua página sem pensar no Ajax, seja em php ou asp, faça seu site normalmente. O ajax é apenas uma função de 15 linhas ou menos que fará com que seu site não loadeie toda a página. Só.

Não precisa mudar a forma de fazer site nem nada disso. Só não se esqueça de lembrar que o Ajax manda o url, o servidor pega e devolve o conteúdo como uma página normal, o Javascript vai colocar o conteúdo dentro de uma div.

Quando precisar do Ajax você avisa que eu te ajudo.

Akeleabraço

[Eric Freitas]

ajax. cara.. ajax não é dificil

não precisa chamar um XML, ler nós filhos, netos, bisnetos etc..

vou te dar uma função bem explicada de como você pode fazer isso.

ai vai...

organize tudo em pag. html.

//-> Esta função inicia a conexão assincrona com o servidor e deve ser instanciada dentro de outra sempre para q esta seja realizada

function IniciaAjax(){
    if(window.ActiveXObject) var ajax = new ActiveXObject('Microsoft.XMLHTTP');
    else var ajax = new XMLHttpRequest();
    return ajax;
}

// esta e a função q será passada no link para chamar o ajax q irá buscar a página
function telaLogin(){
    ajax = IniciaAjax(); // aqui instanciei o ajax
    ajax.onreadystatechange = formLogin; //função q irá receber os dados assim q estiver pronta a busca
    ajax.open('GET', 'login.html'); // passei aonde será buscado e o método
    ajax.send(null); //enviei os dados
//obs.. você pde até abrir uma div dizendo q está carregando aqui
}
function formLogin(){
    if(ajax.readyState == 4){ //verifico o estagio se for 4 é porque está terminado daí você pode fexa a div do "carregando"
// verifica se não ouveram erros na conexão e joga o texto da pag buscada dentro da var conteúdo        
if(ajax.status == 200) var conteudo = ajax.responseText;  
//mostra mensagem dizendo qual o erro q houve com a conexão
        else conteudo = ajax.statusText; //
// escreve conteúdo na div indicada
        document.getElementById('conteudo').innerHTML = conteudo;
    }
}

pronto... para cada seção será necessário uma dessas. você pode chamar páginas php também passar parametros e tal.. (isso por GET).. por post é um pouco diferente.. mas acho q isso já te ajuda =D