Atualizar resultado da busca sem refresh

[misterviralata 0]

Ola Amigos!

 

Estou fazendo uma Consulta no Banco MYSQL e retornando o resultado dentro de uma div

 

 

$sql=mysql_query("SELECT * FROM tabela WHERE MONTH(aniversario) = MONTH(NOW()) ORDER BY RAND() ASC")
$vetor=mysql_fetch_array($sql);
echo'<div><img src="'.$vetor['foto'].'" border="0"><br>$vetor['nome']';

 

Eu gostaria de um jeito de refazer esta mesma consulta a cada 10 segundos e retornar o novo resultado sem dar refresh na pagina.

 

 

É bem provável que alguém vai dizer:

Faça isso usando AJAX!

 

Mas já faz algum tempo que estou procurando um exemplo no google e não encontrei nada que me ajuda-se, mesmo porque não manjo nada de ajax

 

Encontrei um exemplo na web que faz o que estou precisando mas não manjo de AJAX e o script era parte de um sistema de cadastro...

tá funcionando direitinho mas não sei se tem codigo sobrando ...

Se alguém puder da uma verificada agradeço

 

index.php

 

<script>
setInterval("messages()", 5000);
function messages(){
var body = "";

		if (window.XMLHttpRequest) {
				xmlhttp = new XMLHttpRequest();
		} else if (window.ActiveXObject) {
				xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
		} else {
			alert("Seu navegador não suporta XMLHttpRequest.");
				return;
		}

	xmlhttp.open("POST", "pagina.php", true);
	xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");
	xmlhttp.setRequestHeader("Cache-Control", "no-store, no-cache, must-revalidate");
	xmlhttp.setRequestHeader("Cache-Control", "post-check=0, pre-check=0");
	xmlhttp.setRequestHeader("Pragma", "no-cache");

	xmlhttp.onreadystatechange = processReqChange;
	xmlhttp.send(null);

}

function processReqChange() {
	if (xmlhttp.readyState == 4) {
			if (xmlhttp.status == 200) {
				document.getElementById("texto").innerHTML = xmlhttp.responseText;
				document.getElementById("mensagem").value = document.getElementById("mensagem").value;
				} else {
					alert("Problemas ao carregar o arquivo.");
				}
	}
}
//-->
</script>

<div id="texto">
<?php
include('conecta.php');
$sql=mysql_query("SELECT * FROM tabela WHERE MONTH(aniversario) = MONTH(NOW()) ORDER BY RAND() ASC")
$vetor=mysql_fetch_array($sql);

echo'<img src="'.$vetor['foto'].'" border="0">';
echo $vetor['nome'];	
?>
</div>

 

pagina.php

<?php
include('conecta.php');
$sql=mysql_query("SELECT * FROM tabela WHERE MONTH(aniversario) = MONTH(NOW()) ORDER BY RAND() ASC")
$vetor=mysql_fetch_array($sql);
echo'<img src="'.$vetor['foto'].'" border="0">';
echo $vetor['nome'];	
?>

Tive que repetir a consulta dentro da div texto porque ela iniciava em branco.

 

Ta funcionando mas se aguem puder ta uma olhada se o scritp ta certo agradeço. http://forum.imasters.com.br/public/style_emoticons/default/grin.gif

 

E aproveitando eu gostaria de saber se tem jeito de fazer com que o nome e a foto do usuario aparecer devagar como se estivesse surgindo ... eu nem sei como devo pesquisar pra fazer isso? :blink:

 

Obrigado!

[DSerma 19]

1) O Código está correto ( eu faria mais enxuto, mas está até q bom )

2) O efeito que você qr é o "FadeIn". Estude um pouco de JQuery www.jquery.com, pois ele faz isso muito bem..

 

Abraços...

[misterviralata 0]

Valeu pela dica Darkdemo !!!

 

Obrigado!!!

[misterviralata 0]

Ola Amigos!

 

Acabei de ver uma coisa, o script ta funcionando no mozilla, mas no IE fica mostrando que a pagina está com erro na barra de estatus!!!!

 

Também tem outro problema, quando a string tem algum acento tipo João José, tanto no mozilla como no IE ele retorna uns caracteres estranhos, troquei no codigo

 

xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");

por

xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=ISO-8859-1");

 

mas não funcionou, continua vindo os caracteres estranhos

 

O que está errado no codigo? O que devo fazer pra concertar isso?

 

index.php

<script>
setInterval("messages()", 5000);
function messages(){
var body = "";

		if (window.XMLHttpRequest) {
				xmlhttp = new XMLHttpRequest();
		} else if (window.ActiveXObject) {
				xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
		} else {
			alert("Seu navegador não suporta XMLHttpRequest.");
				return;
		}

	xmlhttp.open("POST", "pagina.php", true);
	xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");
	xmlhttp.setRequestHeader("Cache-Control", "no-store, no-cache, must-revalidate");
	xmlhttp.setRequestHeader("Cache-Control", "post-check=0, pre-check=0");
	xmlhttp.setRequestHeader("Pragma", "no-cache");

	xmlhttp.onreadystatechange = processReqChange;
	xmlhttp.send(null);

}

function processReqChange() {
	if (xmlhttp.readyState == 4) {
			if (xmlhttp.status == 200) {
				document.getElementById("texto").innerHTML = xmlhttp.responseText;
				document.getElementById("mensagem").value = document.getElementById("mensagem").value;
				} else {
					alert("Problemas ao carregar o arquivo.");
				}
	}
}
//-->
</script>

<div id="texto">
<?php include('pagina.php');?>
</div>

 

 

pagina.php

<?php
include('conecta.php');
$sql=mysql_query("SELECT * FROM tabela ORDER BY RAND() ASC");
$vetor=mysql_fetch_array($sql);

echo $vetor['nome'];
?>

[ktinho 0]

Estou com o mesmo problema quero atualizar uma pagina dentro da div sem refresh e um chat que ta pegando dados de uma tabela e mostrando na div so que a unica coisa que se acha no google sobre xmlhttprequest e os tal combox que nao serve para nos em uma eu tenho um formulario em html que grava os dados no bd e na outra tenho as funçoes php que recupera os dados e mostra na pagina so que eu to usando set timeout para dar refresh a cada 1 segundo e quero que ela nao de refresh para nao ficar piscando que nem vagalume e sim so mostra os dados na tela da div.