Criar links amigáveis e rastreáveis utilizando AJAX pushState()

[peterlink 1]

Bom galera, estava lendo esse artigo sobre AJAX+SEO+HTML5 e como sou noob ainda nessa area nao consegui entender direito como utilizar.

 

Para entenderem melhor segue artigo que estou falando.

 

https://www.ibm.com/developerworks/mydeveloperworks/blogs/fd26864d-cb41-49cf-b719-d89c6b072893/entry/criando_links_amig_C3_A1veis_e_rastre_C3_A1veis_utilizando_ajax_pushstate?lang=en

 

Se resume em usar AJax com tecnicas de SEO.

 

porem não entendi direito como usar a função

 

$('nav a').click(function(e) {
      url = $(this).attr("href");
 
      //This function would get content from the server and insert it into the id="content" element
      $.getJSON("content.php", {contentid : url},function (data) {
            $("#content").html(data);
      });
 
      //This is where we update the address bar with the 'url' parameter
      window.history.pushState('object', 'New Title', url);
 
      //This stops the browser from actually following the link
      e.preventDefault();
}

 

 

Mais precisamente não consegui entender essa parte,

 

 $.getJSON("content.php", {contentid : url},function (data) {
   $("#content").html(data);
 });

 

Sei que se baseia mais na compreensão de getJson mas se puderem me ajudar não entendi muito na documentação.

 

Pelo que entendi ela vai buscar o arquivo content.php e escrever no elemento com id content, porem estava fazendo os testes e não consegui fazer funcionar, pra que serve contentid : url ?

 

Se não for pedir muito se alguém puder postar aqui ou no github o código de um exemplo dessa utilização.

 

[William Bruno 1501]

essa parte: contentid : url, serve para enviar um get para o teu arquivo php.

O mesmo que:

 

content.php?contentid=url

 

assim, o teu content.php processaria esse $_GET, e devolveria o conteudo para ser inserido.

Só que isso não é bem necessário, e vc pode, no lugar do getJSON fazer assim:

$("#content").load( url + ' #content');

entendeu ?

[peterlink 1]

Acho que clareou mais um pouco. mas isso pra ele processar o GET seria opcional no caso certo? seu fizesse essa pagina com um simples texto html ele ja carregaria o texto normalmente ?

 

no código que voce colocou o trecho

+ ' #content'

 

seria o elemento aonde ele iria ler e retornar na pagina?

[William Bruno 1501]

Esse + ' #content', é um contexto que estou passando para o .load().

 

Assim mesmo que tenha outras áreas no arquivo requisitado, o .load() vai fazer o parser do html e inserir apenas o conteudo do elemento com id="content" daquele arquivo que pedi.

[peterlink 1]

Beleza cara, muito obrigado... vou fazer os testes aqui.

[peterlink 1]

Willian, estou tentando fazer pelo metodo load. Ele carrega normalmente a pagina e cria o path também.

 

Porem quando utilizo o botão voltar ele troca apenas a url mas nao o conteúdo da pagina. consegue me ajudar?

$(function() {

	$('nav a').click(function(e) {

	     url = $(this).attr("href");
	     loadContent(url);
	     
             window.history.pushState('object', 'New Title', url);
	     
             e.preventDefault();
	});
				
	window.onpopstate = function(event) {
					
	   console.log("pathname: "+location.pathname);
	   loadContent(location.pathname);
	};
	
});
		
function loadContent(url){
				
	$("#content").load(url);
		
}

[William Bruno 1501]

ai vc precisa implementar o evento onPopState

[peterlink 1]

Então mas eu estou utilizando, esta errado dessa forma?

window.onpopstate = function(event) {
					
	   console.log("pathname: "+location.pathname);
	   loadContent(location.pathname);
	};