Navegação sem refresh

[LeoO_DF 22]

Eu queria saber qual o tipo de navegação que o youtube e facebook usam, ela é rápido, no caso do facebook o chat não é recarrega diferente de quando você atualiza a pagina e como se tivesse refresh que se clicar na setinha de voltar do navegador ela volta a pagina anterior, o esc cancela a navegação, creio que seja personalizada, qual seria essa navegação?

[xanburzum 169]

você pode usar AJAX ou jQuery.

 

http://wbruno.com.br/ajax/navegacao-sem-refresh-carregando-conteudo-ajax-em-div/

[William Bruno 1501]

Oi @xanburzum,

 

Qndo copiar o código/explicação de algum blog, pelo menos poste a fonte.

 

http://wbruno.com.br/ajax/navegacao-sem-refresh-carregando-conteudo-ajax-em-div/

[xanburzum 169]

É que estamos acostumado em copiar e ele já vir com a fonte embaixo, tipo aquele leia mais... Mas obrigado por colocar

 

E aqui um exemplo em JQeury.

 

 

$(document).ready(function (){
$(“#conteudo”).load(“index.html”); //Aqui ele faz com que a página carregue o arquivo index.html na div conteudo assim que ele carregar, você pode usar o nome de arquivo que quiser eu deixei este no exemplo para ficar mais intuitivo
$(“.links”).click(function(){ //Evento de clique em algum item do menu
$(“#conteudo”).fadeOut(10); //Aqui faz a div conteudo dar um efeito de fade out 
$(“#conteudo”).load($(this).attr(“href”)); //Aqui par carregar o conteúdo pelo atributo href do link pode ser por exemplo um span com um atributo name ai você pode usar do modo que quiser.
$(“#conteudo”).fadeIn(1000); //Aqui faz um efeito de fade in na div conteúdo com o conteudo já carregado
return false; //Aqui ele faz com que o link não seja carregado, assim ele só carrega o conteudo do arquivo na div aqui no caso a div conteudo
});
});

 

 

Abaixo as DIV´s

 

 

<div id=”root”>//Div para servir de caixa para segurar todos os elementos
<div id=”menu”> //Div para guardar os links
<a href=”index.html” style=”background:#f0f0f0;”>Home</a> //Link home ele começa com a cor diferente

<a href=”contato.html”>Contato</a>//Link de contato mais pode ser qualquer um.
</div>//Fecha a div menu
<div id=”conteudo”> //Div que vai receber os dados
</div> //Fecha a div conteudo
</div>//Fecha a div root

[LeoO_DF 22]

Mais tipo o youtube utilizar alguma navegação personalizada? porque a deles fica cada pagina no histórico e disponibiliza o botão de voltar no navegador.

[William Bruno 1501]

@LeoO_DF,

 

Para isso leia sobre pushState e popState

https://developer.mozilla.org/en-US/docs/Web/API/Window.onpopstate

[xanburzum 169]

vc consegue o mesmo efeito em js, ASP, ASP.Net

[LeoO_DF 22]

Entendi, uma ultima dúvida, a url tem que ser a original eu não posso usar a da url amigável ou posso?

[William Bruno 1501]

Pode usar amigável sim.

[xanburzum 169]

nunca usei com url amigáveis, mas acredito que irá se comportar normal, e você pode chamar o método AutoSave em ASP.NET e jQuery