Mudar de página usando DIV sem ser por AJAX

[GeorgeLOL 0]

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?

[Vadio 13]

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 é pq 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 tbm passar parametros e talz.. (isso por GET).. por post é um pouco diferente.. mas acho q isso ja te ajuda =D

[GeorgeLOL 0]

obrigado pela preocupação. bom, eu li alguns tutoriais de AJAX depois que você me deu sua resposta. E aproveitando o assunto, tenho uma dúvida. E se eu quiser fazer em POST, qual seria a diferença no funcionamento e no script?

[Vadio 13]

ajax.open('POST','usuarios.php?secao=cliente&op=incluir'); // setar como post

// colocar este "título"

ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=iso-8859-1");

 

//carrega todos os dados que serão enviados pelo post

var dados = "nome="+nome;

dados += '&email='+email;

dados += '&cep='+cep;

dados += '&endereco='+endereco;

dados += '&bairro='+bairro;

dados += '&cidade='+cidade;

dados += '&uf='+uf;

dados += '&ddd='+ddd;

dados += '&fone='+tel;

dados += '&fax='+fax;

dados += '&site='+site;

dados += '&obs='+obs;

 

// ao invés de mandar null você envia os dados como mandei ai... pensa no & como no get nome=valornome&email=valoremail assim por diante

ajax.send(dados);

[GeorgeLOL 0]

ah legal obrigado. só uma última dúvida: existe alguma diferença na prática entre usar GET ou POST? quer dizer, algum método é melhor que o outro?

[Vadio 13]

sim!

se não me engano passar dados por GET vai só até uns 250char não sei ao certo se isso é verdade.

 

eu costumo usar get pra atualizar o conteúdo da div (mudar seção) e post pra dados...

 

mas e ae, achou dificil? conseguiu? espero que sim! =D

[GeorgeLOL 0]

obrigado pela dica! pois é, consegui aprender AJAX (o basicão) graças à sua dica. e realmente é fácil como você disse. dá uma olhada no site que estou fazendo assim: http://pixelmasters.com.br/layouts/onlyone/

[RickSk8 0]

george tava vendo ese site ae seu gostei como você faiz ese eskema de atualizaçao ??? no meio