Atualizar resultado sem refresh na pagina

[misterviralata]

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! 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. :lol:

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? :blush:

Obrigado!

Editado Fevereiro 9, 2008 por misterviralata

[KaKarotto]

Afff...<_<

Eu e meus posts tardios....

Você pode usar um efeito fade usando alguma biblioteca javascript ou pegando um pronto, eu fiz um lá nos códigos prontos, tá na primeira página entitulado "$fade..."

Aquele abraço

[misterviralata]

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']; 
?>

[misterviralata]

Opa!! a parte dos caracteres estranhos resolvi

usei a função mb_convert_encoding(); do PHP no ajax não consegui de jeito nehum!!!

pagina.php

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

echo $nome=mb_convert_encoding($vetor['nome'],"utf-8");
?>

Agora falta o problema do IE que fica mostrando erro na barra de estatus, se alguém souber da uma ajuda ....

[KaKarotto]

Liga o depurador do ie, para ele mostrar o erro na tela, ele diz a linha e a coluna do código de onde está o erro. É só ir em opções de internet e avançado, você vai lá e aciona o depuramento de script.

Abraço

[Guest Natascha]

Olá!

Tentei usar o código acima e não deu certo!

Alguma me explica essa parte:

document.getElementById("mensagem").value = document.getElementById("mensagem").value;

Porque não existe a propriedade .value para document.getElementById.

E outra, esse código não faz sentido porque é idêntico dos dois lados do sinal de igual......