progress bar em consulta sql

[AllNet]

Olá pessoal, estou fazendo uma pagina para cadastro de pessoas, e preciso da ajuda de vocês;

//envio o charset para evitar problemas
        header("Content-Type: text/html; charset=ISO-8859-1");

        $con = mysql_connect('localhost', 'user', 'pass');//faço a conexão com o banco
        mysql_select_db('banco', $con);//seleciono a tabela no banco

        $sql = "SELECT * FROM usuarios WHERE usuario= '$usuario' ";//monto a query

        $q =  mysql_query( $sql );//executo a query


        if( mysql_num_rows( $q ) > 0 )//se retornar algum resultado
                echo 'Usuário já existe!';
        else
                echo 'Usuário está disponivel!';

no formulario quando o foco deixa o campo Usuario, esse codigo faz a consulta no banco pra ver se já existe algum usuario igual com o que o cara digitou no formulario. a questão é:

como faço para colocar tipo "carregando" no momento em que esta sendo feito a consulta, e na hora de mostrar o resultado final o carregando seja apagado.

Obs: coloquei como titulo "progress bar", mais estive lendo, notei que é meio complicado colocar um progress bar, pois o codigo não sabe o tamanho da consulta, então seria mais aconselhavel colocar uma imagem tipo "carregando". acho que era isso, hehe.

Obrigado pela ajuda.

[Willian Gustavo Veiga]

A sua dúvida envolve JavaScript. Pesquise sobre AJAX.

Um abraço.

[Freon.M]

Como o cara de cima disse, envolve Ajax. (vai no site da w3c que lá tem uns tutoriais muito bons de Ajax pra iniciantes)

Mas olha. Por cima é mais ou menos assim.

Quando o cursor sair do campo nome (onblur), deverá carregar uma imagem de loading em um span ou div. Então inicia-se a pesquisa usando o Ajax.

Quando chegar a resposta, você troca essa imagem pra um "OK" por exemplo, ou faz o que quiser.

Tá ai, mastigado :)

index.html

<input type="text" name="nome" id="nome" onblur="blurNome(this)" /> &nbsp; <img src="branco.jpg" id="load" name="load"><!-- branco.jpg é uma imagem de 1x1 pixel branco.-->

<script>
function blurNome(Campo){
    var nome = new String(Campo.value);
    document.images["load"].src = "carregando2.gif";
    pesquisanome(Campo.value);
}

function xmlHTTP(){
    try{
        var request = new XMLHttpRequest();
    }catch(e1){
        try{
            request = new ActiveXObject("Msxml2.XMLHTTP");
        }catch(e2){
            try{
                request = new ActiveXObject("Microsoft.XMLHTTP");
            }catch(e3){
                request = false;
            }
        }
    }
    return request;
}


function pesquisanome(campo){
    xmlhttp = xmlHTTP();
    xmlhttp.onreadystatechange=function(){
        if (xmlhttp.readyState==4 && xmlhttp.status==200){//ira execeutar ao receber dados do servidor
            if(this.responseText != null){
            dados = this.responseText;
            if(dados == "Usuário já existe!"){
                document.images["load"].src = "erro.jpg";
            }else if(dados == "Usuário está disponivel!"){
                document.images["load"].src = "ok.jpg";
            }else{
                alert("Ocorreu um erro. Não houve resposta válida do servidor.");
            }    
        }
        }
    }
    xmlhttp.open("GET","pesquisarnome.php?nome="+campo,true); <!--Onde pesquisarnome.php é a pagina que você postou, com o código de pesquisa-->
    xmlhttp.send();
}
</script>

pesquisarnome.php

<?php

$usuario = $_GET['nome'];
        
$con = mysql_connect('localhost', 'user', 'pass');//faço a conexão com o banco
mysql_select_db('banco', $con);//seleciono a tabela no banco
$sql = "SELECT * FROM usuarios WHERE usuario= '$usuario' ";//monto a query
$q =  mysql_query( $sql );//executo a query

if( mysql_num_rows( $q ) > 0 )//se retornar algum resultado
  echo 'Usuário já existe!';
else
  echo 'Usuário está disponivel!';

?>

Não testei, mas deve funcionar.

Editado Janeiro 27, 2011 por Freon.M

[AllNet]

é isso ai Freon.M, funcionou certinho.

Obrigado.