Como criar um site sem recarregar a cada clique

Como criar um site sem recarregar a cada clique

27 de setembro de 2017 0 Por Ramos de Souza Janones
Como vender Software - Seja desktop, web ou MobilePowered by Rock Convert
Powered by Rock Convert

Como criar um site sem recarregar a cada clique com o uso de Javascript e Ajax. Com diversos exemplos de uso utilizando o Ajax.

De uma maneira conceptual, tem três opções:

#1 – Arquivo único sem AJAX

Neste caso pode ter todo o conteúdo na mesma página. O conteúdo que não é para mostrar deve estar escondido com, por exemplo, display: none;

<div id="menu">
<div id="a">A</div>
<div id="b">B</div>
<div id="c">C</div>
</div>
<div id="conteudo">
<div class="a visivel">Conteudo A
<div class="b">Conteudo B</div>
<div class="c">Conteudo C</div>
</div>

CSS

#conteudo > div{
display: none;

}
#conteudo > div.visivel{
display: block;
}

Exemplo

#2 -Arquivo único sem AJAX com tudo visível e com scroll

Neste caso pode ter um menu onde clicando dispara um scroll. Para isso precisa de ter âncoras para poder disparar um scroll até ali. Também dá para disparar o scroll procurando a posição/tamanho dos elementos mas é menos prático:

Powered by Rock Convert

<div id=”menu”>
<div><a href=”#a”>A</a></div>
<div><a href=”#b”>B</a></div>
<div><a href=”#c”>C</a></div>
</div>
<div id=”conteudo”>
<div class=”a visivel”>Conteudo A
<div class=”b”>name=”b”>Conteudo B
<div class=”c”>name=”c”>Conteudo C
</div>

LEIA TAMBÉM:  O que é TypeScript e quais os seus benefícios?

Exemplo

#3 – Ficheiros multiplos com AJAX

Neste caso tem ficheiros diferentes do lado do servidor e vai buscá-los via AJAX. Na função de resposta do AJAX carrega esse HTML na arte da página pretendida. Apagando o conteúdo inicial desse elemento/parte da página.

HTML

<div id=”menu”>
<div id=”a”>A</div>
<div id=”b”>B</div>
<div id=”c”>C</div>
</div>
<div id=”conteudo”>

jQuery

$(‘#menu > div’).on(‘click’, function (e) {
e.preventDefault(); // para impedir o link de ser seguido
url = ‘/shmD9/show’; // usado para o meu exemplo
var aClasse = this.id;
$.ajax({
url: url,
// aqui um parametro “data: variável,” é necessário
success: function (returnhtml) { // função corrida no sucesso do ajax
var tempText = (returnhtml.split(”))[1].split(”)[0]; // só util no meu exemplo
var divEnscolhido = $(‘

‘).append(tempText).find(‘.’ + aClasse); // só util
$(‘#conteudo’).html(divEnscolhido); // esta é a parte importante, onde o conteudo da div é substituído pelo novo
}
});
});

LEIA TAMBÉM:  Face-api.js: reconhecimento facial em JavaScript

Exemplo

Considerações a ter em conta:

Ambos os métodos 1 e 3 são SEO un-friendly. Isto quer dizer que por exemplo o Google quando tentar indexar conteúdos da página vai ter problemas. Se a sua página não for bem indexada pelo Google então não tem conteúdo para mostrar nas buscas e vai ter menos visibilidade/visitas. No caso do Google ele faz indexação de conteúdo escondido, mas não é garantido que outros façam. (E no caso da opção 3 é ainda pior)

Powered by Rock Convert
Siga os bons!
Últimos posts por Ramos de Souza Janones (exibir todos)
vote
Article Rating
LEIA TAMBÉM:  CoffeeScript, TypeScript, JavaScript e o Angular