Carregar página em DIV com Ajax e QueryString php.

Jhonei · Maio 29, 2012

Gostaria de saber se averia alguma possibilidade de poder utilizar o Ajax para fazer a requisição assíncrona das páginas carregadas pelo QueryString php em uma div. Pois o QueryString possibilita que alem de carregar a página ele também inseri o código da página carregada no código fonte do index que recebeu o conteúdo.

Esta inserção de códigos no index da página que recebeu o conteúdo com QueryString, melhoraria e muito as pesquisas dos buscadores com o SEO.

Desta forma seria a junção perfeita da rapidez da requisição Ajax com a perfeição da inserção de conteúdo com o QueryString.

Grato desde já pela ajuda dos senhores...

Gabriel Heming · Maio 30, 2012

Sim, há possibilidade. Mas, na maioria dos casos, não vejo utilidade e nem real necessidade.

Esses dias conversando com um amigo (Front-End), ele me comentou que o google está ignorando, ou ignorará, a indexação de páginas onde o DOM era alterado por javascript.

No tópico abaixo, você poderá ver que, o google só indexará conteúdo carregado por ajax quando a url for alterada e, o site, permitir acesso direto pela url. É explicado que o motor de busca necessita ver a url e então acessá-la.

Does Google index content generated using javascript?

---------

Bom, vamos ao assunto em questão.

Definimos QueryString: É o padrão que o protocolo HTTP utiliza para transportar informações do cliente para o servidor.

Ajax: todos cansados de saber o que é.... Uma delas, segundo Wiki, é: "Recuperação assíncrona de dados usando o objeto XMLHttpRequest e XMLHttpResponse"

Basicamente, e grossamente, envia uma requisição(de forma assíncrona) ao servidor, que retorna a resposta à requisição.

Se você for carregar o conteúdo, via ajax, utilizando querystring ao carregar a página (F5/síncrona):

- O cliente enviará a requisição ao servidor;

- Retornará o conteúdo, solicitado através da requisição, ao navegador;

- O cliente receberá o conteúdo e o javascript verificará a requisição ajax feita pela querystring anteriormente enviada ao servidor;

- Realizará a requisição assíncrona;

- O servidor irá retornar o conteúdo da segunda requisição;

- O cliente incluirá o conteúdo no lugar determinado.

Duas consulta, menores que uma é claro. Entretanto, sempre deve ser avaliado o real propósito do uso do ajax. Eu utilizei query string e carregamento ajax, em um site que necessitava de paginação e seu conteúdo era um pouco vasto. Reduziu e muito o carregamento para a troca de páginas (o carregamento do site continuou o mesmo), além de utilizar o history para alterar a url. History, não é uma nova funcionalidade. Entretanto, navegadores com html 5, possuem mais recursos do que navegadores legados.

Cada caso é um caso. Se for apenas para carregar um certo conteúdo dentro da página, utilize a forma convencional. Será uma única requisição, uma única resposta, e tenha a certeza de que será melhor visto pelos motores de busca. Mas em casos mais específicos, vale a pena avaliar a situação. Mas sempre existirá briga entre SEO, Front-End e desenvolvedor server-side. A que eu vejo mais comum é: "aonde deve ser incluso o javascript e como deve ser incluso (síncrono/assíncrono).

Jhonei · Maio 30, 2012

Eu tinha feito esta pergunta porque a Query String eu já tenho, mais não sei como fundi-la da forma certa para que o Ajax faça a requisição assíncrona juntamente com o Query String php. Desta forma podendo ser implementado o código fonte da pagina carregada na index!!

<?php
$pagina = isset($_GET['pagina']) ? strip_tags(trim($_GET['pagina'])) : '';

if ($pagina == $pagina) {
$Pg = 'arquivos/'.$pagina.'.php';
}
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Query String</title>
</head>
<body>

<div id="topo"><h1>Titulo</h1></div>

<ul id="menu">
   <li><a href="index.php?pagina=home">Home</a></li>
   <li><a href="index.php?pagina=perfil">Perfil</a></li>
   <li><a href="index.php?pagina=fotos">Fotos</a></li>
   <li><a href="index.php?pagina=videos">Videos</a></li>
   <li><a href="index.php?pagina=faleconosco">Fale Conosco</a></li>
</ul>

<div id="conteudo">
 <?php
   if( (isset($Pg)) and (file_exists($Pg)) ) {
     include($Pg);
   } else {
     include ("arquivos/home.php");
   }
 ?>
</div>

<div id="rodape"><h3>Roda pé</h3></div>

</body>
</html>

Preciso de uma luz, uma dica, um exemplo, ou ate mesmo, quais as ferramentas que eu devo utilizar no Ajax!!

Gabriel Heming · Maio 30, 2012

ferramentas para ajax existem várias. Se você só utiliza ajax e tem um bom conhecimento de javascript, sugiro que crie com javascript puro. É um pouco mais trabalhoso, mas não irá precisar de uma biblioteca inteira.

Caso queira algo simples de utilizar, jQuery é a melhor opção. Com apenas uma linha de código, você carrega páginas via ajax (através do método load).

Vamos ao código. Você possui isso, vai ser parecido:

<div id="conteudo">
 <?php
   if( (isset($Pg)) and (file_exists($Pg)) ) {
     include($Pg);
   } else {
     include ("arquivos/home.php");
   }
 ?>
</div>

New code:

Apenas a div em branco:

<div id="conteudo"></div>

Utilizarei jQuery, pois é mais rápido de explicar e, no final das contas, a lógica é a mesma.

Você deverá utilizar uma função em javascript que, chamará o ajax e incluirá o conteúdo

<script type="javascript/text">
 <?php
   //Se você está passando os atributos por javascript, poderia pegá-los por ele.
   //Mas é bem mais fácil por php '-'
   if( !isset($Pg) ) {
       $Pg = "arquivos/home.php";
   }
 ?>
   carregarPagina( <?php $Pg; ?> );
</script>

E vamos a função:

<script type="javascript/text">
   carregarPagina( pagina ) {
       $('div#conteudo').load( pagina );
   }
</script>

E é isso pessoal. Lembre-se que necessita da biblioteca jQuery.

A explicação é bem simples:

- Uma div em branco, sem conteúdo algum;

- Via php, define-se qual a página vai ser chamada e imprime a chamada da função;

- Via função javascript, chama-se o método ajax que inclui o retorno na div de id conteudo.

Jhonei · Maio 31, 2012

Muito obrigado pela ajuda "Gabriel Heming", eu sou um pouco leigo quando se fala de jquery, mas fiz o que mandou e o script não rodou!!

eu não compreendi esta linha do código :

carregarPagina( pagina ) {

E gostaria de saber como é que fica os link's. como você não tinha comentado nada sobre eles, então eu não os alterei!!

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Query String</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script type="javascript/text">
 <?php
   if( !isset($Pg) ) {
       $Pg = "home.php";
   }
 ?>
   carregarPagina( <?php $Pg; ?> );
</script>

<script type="javascript/text">
   carregarPagina( pagina ) {
       $('div#conteudo').load( pagina );
   }
</script>

</head>
<body>

<div id="topo"><h1>Titulo</h1></div>

<ul id="menu">
   <li><a href="index.php?pagina=home">Home</a></li>
   <li><a href="index.php?pagina=perfil">Perfil</a></li>
   <li><a href="index.php?pagina=fotos">Fotos</a></li>
   <li><a href="index.php?pagina=videos">Videos</a></li>
   <li><a href="index.php?pagina=faleconosco">Fale Conosco</a></li>
</ul>

<div id="conteudo"></div>

<div id="rodape"><h3>Roda pé</h3></div>

</body>
</html>

Gabriel Heming · Maio 31, 2012

Bom, o principal problema do seu código é que o javascript segue uma "hierarquia".

carregarPagina é uma função. Uma função é, basicamente, o menor processo, ou o processo mais simples, para reutilização código. Uma vez definido um código numa função, você não possui mais a necessidade de escrevê-lo novamente.

Essa, é a minha função:

carregarPagina( pagina ) {
  $('div#conteudo').load( pagina );
}

essa é a chamada da função:

carregarPagina( <?php $Pg; ?> );

Agora ao problema da hierarquia.

O javascript trabalha de "cima para baixo" em tempo de execução, diferente de outras linguagens, pois ele não é compilado.

Seu código está assim:

<script type="javascript/text">
 <?php
   if( !isset($Pg) ) {
       $Pg = "home.php";
   }
 ?>
   carregarPagina( <?php $Pg; ?> );
</script>

<script type="javascript/text">
   carregarPagina( pagina ) {
       $('div#conteudo').load( pagina );
   }
</script>

Você chama a função carregarPagina e depois "cria" ela. Mas quando você chama ela, a função não existe, logo ela não vai funcionar.

Existe duas soluções para isso. Colocar a função acima da sua chamada:

<script type="javascript/text">
 <?php
   if( !isset($Pg) ) {
       $Pg = "home.php";
   }
 ?>
   carregarPagina( pagina ) {
       $('div#conteudo').load( pagina );
   }
   carregarPagina( <?php $Pg; ?> );
</script>

Ou, utilizando jQuery, uma função da jQuery. Que executará os scripts somente após toda a estrutura do site (DOM) estiver carregar. Dessa forma, a hierarquia se torna irrelevante:

<?php
if( !isset($Pg) ) {
  $Pg = "home.php";
});
?>
<script type="javascript/text">
$(document).ready( function() {
   carregarPagina( <?php $Pg; ?> );
});
</script>

<script type="javascript/text">
$(document).ready( function() {
   carregarPagina( pagina ) {
       $('div#conteudo').load( pagina );
   }
}
</script>

Eu deixei os códigos acima separados, para demonstrar que não importa a ordem que serão declarados. Ele só será executado quando TUDO estiver carregado. Poderia ser assim também:

<script type="javascript/text">
$(document).ready( function() {
   carregarPagina( <?php $Pg; ?> );
   carregarPagina( pagina ) {
       $('div#conteudo').load( pagina );
   }
});
</script>

Também separei o php, para mostrar que é indiferente aonde ele fica, somente deve ficar acima do código javascript.

Jhonei · Junho 2, 2012

Gabriel Heming, utilizando a sua lógica, fiz este script!!! Mas não esta funfando!!

você poderia me informa onde está o erro??

<?php
$pagina = isset($_GET['pagina']) ? strip_tags(trim($_GET['pagina'])) : '';

$Pg = $pagina.'.php';

?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html"; charset="utf-8" />
<title>Ajax com Query String</title>

<script type="text/javascript">
function ajax() {
var xmlRequest;
if (window.XMLHttpRequest) {
	xmlRequest = new XMLHttpRequest();
} else if (window.ActiveXObject) {
	xmlRequest = new ActiveXObject("Microsoft.XMLHTTP");
} else if (window.ActiveXObject) {
	xmlRequest = new ActiveXObject("Msxml2.XMLHTTP");
}

var url = <?php
	if( (isset($Pg)) and (file_exists($Pg)) ) {
	echo($Pg);
	} else {
	echo("home.php");
	}
	?>;

xmlRequest.open("GET",url,true);
xmlRequest.onreadystatechange = mudancaEstado;
xmlRequest.send(null);

return url;
}

function mudancaEstado(){
  if (xmlRequest.readyState == 4){
     document.getElementById("conteudo_mostrar").innerHTML = xmlRequest.responseText;
  }
}
</script>

</head>
<body>

<ul id="menu">
   <li><a href="index.php?pagina=home">Home</a></li>
   <li><a href="index.php?pagina=perfil">Perfil</a></li>
   <li><a href="index.php?pagina=fotos">Fotos</a></li>
   <li><a href="index.php?pagina=videos">Videos</a></li>
   <li><a href="index.php?pagina=faleconosco">Fale Conosco</a></li>
</ul>

<div id="conteudo_mostrar"></div>

</body>
</html>

Gabriel Heming · Junho 4, 2012

Veja no console do navegador qual é o erro retornado.

O Firebug também pode ser utilizado.

Arquivado

Carregar página em DIV com Ajax e QueryString php.

Recommended Posts

Jhonei 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Gabriel Heming 766

Compartilhar este post

Link para o post

Compartilhar em outros sites

Jhonei 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Gabriel Heming 766

Compartilhar este post

Link para o post

Compartilhar em outros sites

Jhonei 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Gabriel Heming 766

Compartilhar este post

Link para o post

Compartilhar em outros sites

Jhonei 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Gabriel Heming 766

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fixar div até atingir uma certa altura

Ajuda com Extends e envio para o banco

PHP+Codeginiter - Orientação para Impressão

Fóruns

Tempo Real

Informação importante