Ajax wait for request to end

Question

Ajax wait for request to end

Navigation

#1 by (5 votes)

5

I'm using the script below to feed some fields into a form.

When you do a search for the badge, it takes a few seconds to find the value, but if the person gives an "enter," he passes the "Searching ..." values to all fields in the database. What can I do to make the system crash while it does not return the value found in the database?

Code

/**
  * 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);
 }

javascript ajax

asked by anonymous 25.06.2015 / 22:16

1 answer

How to access SDCARD on Android 4.4 (API 19) MER - Cardinality temporal confusion

score 5 · Accepted Answer

I suggest you create a flag to see if there is an active ajax call and avoid other requests during this period. Each time getDados() is called, if requestActive of true it cancels the function call. If requestActive der false it raises the flag to true and makes the call.

Here is a code suggestion, plus DRY because you have a lot of code repeated ...

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);
}