5

Estou usando o script abaixo para alimentar alguns campos em um formulário.

Quando se faz uma pesquisa pelo crachá, ele demora alguns segundos até achar o valor, mas se a pessoa dá um "enter", ele passa os valores "Pesquisando..." para todos campos no banco. O que posso fazer para o sistema dar uma "travada" enquanto não retornar o valor encontrado no banco?

Código

/**
  * Função para criar um objeto XMLHTTPRequest
  */
 function CriaRequest() {
     try{
         request = new XMLHttpRequest();
     }catch (IEAtual){

         try{
             request = new ActiveXObject("Msxml2.XMLHTTP");
         }catch(IEAntigo){

             try{
                 request = new ActiveXObject("Microsoft.XMLHTTP");
             }catch(falha){
                 request = false;
             }
         }
     }

     if (!request)
         alert("Seu Navegador não suporta Ajax!");
     else
         return request;
 }

 /**
  * Função para enviar os dados
  */
 function getDados() {

     // Declaração de Variáveis
     /* Caso for necessário passar mais parametros além do nome
      * basta adicionar uma variável aqui e editar no GET
      */
     var nome   = document.getElementById("cracha").value; //CAMPO QUE VEM DO INDEX.PHP
     var result = document.getElementById("content"); //DIV DE RETORNO DOS DADOS
     var xmlreq = CriaRequest();

     // Exibe a mensagem de progresso
     //result.innerHTML = '<img src="images/Progresso.gif"/>';
     document.getElementById("nomefunc").value = 'Pesquisando...';
     document.getElementById("entrada1").value = 'Pesquisando...';
     document.getElementById("saida1").value = 'Pesquisando...';
     document.getElementById("entrada2").value = 'Pesquisando...';
     document.getElementById("saida2").value = 'Pesquisando...';
     document.getElementById("entrada3").value = 'Pesquisando...';
     document.getElementById("saida3").value = 'Pesquisando...';

     // Iniciar uma requisição
     // Se for colocar mais variáveis, é aqui. Exemplo: processa.php?txtnome=" + nome + '&admissao=' + admissao
     xmlreq.open("GET", "processa.php?cracha=" + nome, true);

    // Atribui uma função para ser executada sempre que houver uma mudança de estado
     xmlreq.onreadystatechange = function(){

         // Verifica se foi concluído com sucesso e a conexão fechada (readyState=4)
         if (xmlreq.readyState == 4) {

             // Verifica se o arquivo foi encontrado com sucesso
             if (xmlreq.status == 200) {
                 if (xmlreq.responseText == "") {
                      document.getElementById("cracha").focus();
                      document.getElementById("cracha").value = '';
                      document.getElementById("nomefunc").value = 'NÃO ENCONTRADO!';
                      document.getElementById("entrada1").value = 'NÃO ENCONTRADO!';
                      document.getElementById("saida1").value = 'NÃO ENCONTRADO!';
                      document.getElementById("entrada2").value = 'NÃO ENCONTRADO!';
                      document.getElementById("saida2").value = 'NÃO ENCONTRADO!';
                      document.getElementById("entrada3").value = 'NÃO ENCONTRADO!';
                      document.getElementById("saida3").value = 'NÃO ENCONTRADO!';

                 }else{

                   //Aqui recebe os dados do processa.php, abre e aplica nos campos desejados
                   var dados = JSON.parse(xmlreq.responseText);
                   document.getElementById("nomefunc").value = dados.nome;
                   document.getElementById("entrada1").value = dados.entrada1;
                   document.getElementById("saida1").value = dados.saida1;
                   document.getElementById("entrada2").value = dados.entrada2;
                   document.getElementById("saida2").value = dados.saida2;
                   document.getElementById("entrada3").value = dados.entrada3;
                   document.getElementById("saida3").value = dados.saida3;
                 }
             }else{
                 result.innerHTML = "Erro: " + xmlreq.statusText;
             }
         }
     };
     xmlreq.send(null);
 }
5
  • você realmente precisa fazer essa requisição com javascript puro? 25/06/2015 às 20:35
  • Sim, pois na situação que ele será usado a página ficará o tempo todo no index.php, ele passa o cracha na leitora, faz a busca e retorna os dados para verificação antes de dar ok....Poderia fazer no PHP que vai receber os dados, mas gostaria algo mais "elegante" como solução...
    – Diego
    25/06/2015 às 20:36
  • Conhece o jQyery? É possível Ajax e realizar ações apenas quando a requisição terminar, é simples fazer manipulação de atributos. 25/06/2015 às 20:45
  • O que eu quero saber é se vc precisa de javascript puro ou se tem a possibilidade de usar algum framework para javascript 25/06/2015 às 20:48
  • Na verdade não estou usando framework nenhum, estou fazendo tudo "no braço". No Javascript não existe nada que poderia fazer essa "pausa"? Testei até um while no meio da função, mas é muita gambiarra...
    – Diego
    25/06/2015 às 20:50

1 Resposta 1

5

Sugiro criares uma flag para saber se há uma chamada ajax ativa e evitar outros pedidos durante esse periodo. Cada vez que getDados() fôr chamado, se requestActive der true ele cancela a chamada da função. Se requestActive der false ele levanta a flag para true e faz a chamada.

Aqui fica uma sugestão de código, mais DRY pois tens imenso código repetido...

var requestActive = false;
function getDados() {
    if (requestActive) return;
    requestActive = true;
    // Declaração de Variáveis
    /* Caso for necessário passar mais parametros além do nome
     * basta adicionar uma variável aqui e editar no GET
     */
    var ids = ["nomefunc", "entrada1", "saida1", "entrada2", "saida2", "entrada3", "saida3"];
    var nome = document.getElementById("cracha").value; //CAMPO QUE VEM DO INDEX.PHP
    var result = document.getElementById("content"); //DIV DE RETORNO DOS DADOS
    var xmlreq = CriaRequest();

    // Exibe a mensagem de progresso
    //result.innerHTML = '<img src="images/Progresso.gif"/>';
    ids.forEach(function (id) {
        document.getElementById(id).value = 'Pesquisando...';
    });

    // Iniciar uma requisição
    // Se for colocar mais variáveis, é aqui. Exemplo: processa.php?txtnome=" + nome + '&admissao=' + admissao
    xmlreq.open("GET", "processa.php?cracha=" + nome, true);

    // Atribui uma função para ser executada sempre que houver uma mudança de estado
    xmlreq.onreadystatechange = function () {

        // Verifica se foi concluído com sucesso e a conexão fechada (readyState=4)
        if (xmlreq.readyState == 4) {

            // Verifica se o arquivo foi encontrado com sucesso
            if (xmlreq.status == 200) {
                if (xmlreq.responseText == "") {
                    document.getElementById("cracha").focus();
                    document.getElementById("cracha").value = '';
                    ids.forEach(function (id) {
                        document.getElementById(id).value = 'NÃO ENCONTRADO!';
                    });

                } else {

                    //Aqui recebe os dados do processa.php, abre e aplica nos campos desejados
                    var dados = JSON.parse(xmlreq.responseText);
                    dados.nomefunc = dados.nome; // se puderes corrige isto no servidor para não ter de fazer isto aqui e as chaves do objeto retornado serem iguais às IDs
                    ids.forEach(function (id) {
                        document.getElementById(id).value = dados[id];
                    });
                }
            } else {
                result.innerHTML = "Erro: " + xmlreq.statusText;
            }
        }
        requestActive = false;
    };
    xmlreq.send(null);
}
1
  • 1
    Pois é, nem pensei em otimização dele. Muito obrigado Sérgio, já é a 3º vez que vc me salva...kkk
    – Diego
    26/06/2015 às 11:55

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .