Atualizar div com últimos cadastros no banco em php e ajax

[Alex PHP 0]

Boa noite, preciso listar os ultimos cadastros de uma tabela e mostrar no site ao tempo em que elas forem acrescentadas ao banco mas sem qeu a pagina atualize...como é caso do badoo para quem conhece onde as ultimas fotos cadastradas por membros vao sendo mostradas sequencialmente para todos os usuarios sem que precise atualizar a pagina toda.

sei que isso é via ajax, mas procurei algo na net neste sentido e nao consegui implementar nada, aguardo uma luz para realizar esta funçao, sou bem novato em ajax nao sei o caminho.

abaixo um exemplo dos codigos que ja tenho e oque preciso para melhor entendimento:

 

<style type="text/css">
#servicos{ margin:10px;}
.fotinho{ float:left; margin:10px}
</style>

<div>aqui é a estrutura do site</div>

<!-- // div que eu quero que atualize de tempo em tempo via ajax pegando ultimos registros no banco-->
<div id="servicos">
<?php
//lista todos os serviços de tempo em tempo via ajax
   $sql_pegaNoticias = 'SELECT * FROM servicos ORDER BY estoqueNome ASC';

try{
	$query_pegaNoticias = $conecta->prepare($sql_pegaNoticias);
	$query_pegaNoticias->execute();

	$res_queryPegaNoticias = $query_pegaNoticias->fetchAll(PDO::FETCH_ASSOC);

	}catch(PDOexcetpion $error_noticias){
	  echo 'Erro ao selecionar servicos!';	
	}

	foreach($res_queryPegaNoticias as $resNoticias){
		$estoqueId    = $resNoticias['estoqueId'];
		$estoqueNome    = $resNoticias['estoqueNome'];
		$estoqueTexto    = $resNoticias['estoqueTexto'];
		$estoqueTumb  = $resNoticias['estoqueTumb'];
?>
<div class="fotinho"><a href="#"><img src="midias/<?php echo $estoqueTumb ?>" border="0"></a></div>
<?php } ?>
</div>
<!-- // FIM da div que eu quero que atualize de tempo em tempo via ajax-->

<div>aqui continua o restante do site</div>

[SinoP 0]

Boa tarde.

A função que eu utilizo para ajax é esta:

 

Coloque este código na página princial

<script type="text/javscript">

function extraiScript(texto){
//Maravilhosa função feita pelo SkyWalker.TO do imasters/forum
//http://forum.imasters.com.br/index.php?showtopic=165277
// inicializa o inicio ><
var ini = 0;
// loop enquanto achar um script
while (ini!=-1){
	// procura uma tag de script
	ini = texto.indexOf('<scr'+'ipt', ini);
	// se encontrar
	if (ini >=0){
		// define o inicio para depois do fechamento dessa tag
		ini = texto.indexOf('>', ini) + 1;
		// procura o final do script
		var fim = texto.indexOf('</scr'+'ipt>', ini);
		// extrai apenas o script
		codigo = texto.substring(ini,fim);
		// executa o script
		//eval(codigo);
		/**********************
		* Alterado por Micox - micoxjcg@yahoo.com.br
		* Alterei pois com o eval não executava funções.
		***********************/
		novo = document.createElement("scr"+"ipt")
		novo.text = codigo;
		document.body.appendChild(novo);
	}
}
}

function chamaPagina(){

var req = null;

Url = 'atualizafotos.php';

if(window.XMLHttpRequest){

	req = new XMLHttpRequest();
	if (req.overrideMimeType) 
	{
		req.overrideMimeType('text/xml');
	}
} 
else if (window.ActiveXObject) 
{
	try {
		req = new ActiveXObject("Msxml2.XMLHTTP");
	} catch (e)
	{
		try {
			req = new ActiveXObject("Microsoft.XMLHTTP");
		} catch (e) {}
	}
	}

req.onreadystatechange = function(){

	if(req.readyState == 4){//Request foi aceito
		extraiScript(req.responseText); //Filtra o retorno para aceitar JS dentro da página carregada
		document.getElementById('servicos').innerHTML = req.responseText; //Grava o retorno na div
	}
};

req.open("GET", Url, true); 
req.send(null);

}

</script>

 

 

 

Crie uma página com nome de (atualizafotos.php) com o teu código PHP

 

<?php
//lista todos os serviços de tempo em tempo via ajax
   $sql_pegaNoticias = 'SELECT * FROM servicos ORDER BY estoqueNome ASC';

try{
	$query_pegaNoticias = $conecta->prepare($sql_pegaNoticias);
	$query_pegaNoticias->execute();

	$res_queryPegaNoticias = $query_pegaNoticias->fetchAll(PDO::FETCH_ASSOC);

	}catch(PDOexcetpion $error_noticias){
	  echo 'Erro ao selecionar servicos!';	
	}

	foreach($res_queryPegaNoticias as $resNoticias){
		$estoqueId    = $resNoticias['estoqueId'];
		$estoqueNome    = $resNoticias['estoqueNome'];
		$estoqueTexto    = $resNoticias['estoqueTexto'];
		$estoqueTumb  = $resNoticias['estoqueTumb'];
?>
<div class="fotinho"><a href="#"><img src="midias/<?php echo $estoqueTumb ?>" border="0"></a></div>
<?php } ?>

 

 

Na tua página principal (Onde tu colocou o Código JavaScript)

Coloque a Div

<!-- // div que eu quero que atualize de tempo em tempo via ajax pegando ultimos registros no banco-->
<div id="servicos">
<script type="text/javascript">
//Vai carregar as fotos a cada segundo sem atualizar a página
setInterval('chamaPagina()', 1000);
</script>
</div>
<!-- // FIM da div que eu quero que atualize de tempo em tempo via ajax-->

 

 

Testa ai e posta se ficar com alguma dúvida