Ir para conteúdo
Fórum Script Brasil
  • 0

(Resolvido) Sistema em Ajax + SQL faz travar o browser

robot7p

Perguntado por robot7p,

 Share

Pergunta

robot7p

robot7p

Postado
Postado (editado)

Olá pessoal! Bom, deixa eu explicar o problema só que de uma maneira breve. Bom, tenho de criar um sistema que ao verificar uma alteração de uma determinada tabela no banco de dados, faça uma atualização da página conteudo.php, que está sendo incluída via Ajax. Até hoje eu estou tentando terminar o sistema, mas está difícil, pois ainda estou començando a aprender Ajax.

Já consigo fazer o sistema funcionar parcialmente, mas agora tem um grande problema. Como você verá no código abaixo, o sistema contém um setInterval de 5 segundos, para verificar se algo se alterou no banco de dados. O sistema funciona nos primeiros segundos e depois trava todo o browser, este é o problema agora.

Verifiquei que ao invés de 5 em 5 segundos, o sistema está fazendo a checagem bem mais depressa, tão rápido a ponto de travar o browser. Verifiquei isso ao mostrar os valores de algumas variáveis.

A pergunta é... porque isso está acontecendo? O sitema funciona... mas por pouco tempo, antes que trave tudo.

Antes eu havia tentado passar os valores através do método Get. Mas como não estou muito familiarizado ainda com Ajax, resolvi utilizar sessões em PHP. Eu utilizo sessão para guardar a última alteração dos dados no banco de dados e depois comparar com novos dados fazendo uma nova consulta SQL, para saber se devo atualizar ou não a página.

Eu preciso muito deste sistema, pois atualmente estou fazendo sucessivos refresh na página,também com Ajax, independente se alterou ou não algo na base de dados, o que é muito mal para a navegação do usuário.

Veja o código:

A página conteudo.php contém apenas algumas consultas ao banco de dados, por isso não vale a pena mostrar aqui.

index.php

<?PHP 

    session_start();
        
?>
<html>
<head>
  &lt;script type="text/javascript">
  function getHTTPObject()
  {
    if(window.XMLHttpRequest)
    {
      return new XMLHttpRequest();
    } 
        else
        if(window.ActiveXObject)
        {
          var prefixes = ["MSXML2", "Microsoft", "MSXML", "MSXML3"];
          
          for(var i = 0; i < prefixes.length; i++)
          {
            try
                {
                  return new ActiveXObject(prefixes[i] + ".XMLHTTP");
                } catch (e) {}
          }
        }
  }
  
  function ajax(url,id_conteudo)
  {
        var xmlHttp = getHTTPObject();
        xmlHttp.onreadystatechange = function()
        {
          if (xmlHttp.readyState == 4) 
          {
            var retorno = xmlHttp.responseText;
                document.getElementById(id_conteudo).innerHTML = retorno;
          }
        }
        
        xmlHttp.open("GET", url,true);
        xmlHttp.send(null);
  }

  function atualizar_pags()
  { 
     <?PHP $conteudo = unserialize($_SESSION["dados_online"]); ?>
     var atualizar = '<?PHP echo $conteudo['atualizar']; ?>';
         
     if(atualizar == "sim")
     {
           ajax('conteudo.php','refresh_pag');
           ajax('<?PHP echo $_SERVER["PHP_SELF"]; ?>','refresh_sql');
     }
     else if(atualizar == "não")
     {
           ajax('<?PHP echo $_SERVER["PHP_SELF"]; ?>','refresh_sql');
     }
     setInterval('atualizar_pags()',5000);
  }
        
</script>
</head>
<body onload="atualizar_pags();">

<div id="refresh_sql">

<?PHP 

$conteudo = unserialize($_SESSION["dados_online"]);
$total_distinct = $conteudo["total_distinct"];
$_SESSION["dados_online"] = serialize($conteudo);

if($conteudo["total_distinct"] == null)
{
  $total_distinct = 0;
}

// $total_distinct é uma variável que eu uso para saber ouve alguma alteração no banco de dados,
// se sim, deve atualizar a págia conteudo.php logo abaixo na <div id="refresh_pag"></div>
// Comando SQL -> Retorna uma variável entitulada $atualizar, tomando os valores 'sim' ou 'não'

if (atualizar == 'sim')
{
  $conteudo = unserialize($_SESSION["dados_online"]);
  $conteudo["total_distinct"] = $total_distinct_sql;
  $conteudo["atualizar"] = 'sim'; // Este valor será passado para o Ajax lá em cima, para poder fazer a atualização da página. Preferia que fosse feito com GET,
  // mas não consegui passar o valor com este método, por isso estou usando sessão em PHP.
  $_SESSION["dados_online"] = serialize($conteudo);
}
else
{
  $conteudo = unserialize($_SESSION["dados_online"]);
  $conteudo["total_distinct"] = $total_distinct_sql;
  $conteudo["atualizar"] = 'não';
  $_SESSION["dados_online"] = serialize($conteudo);
}

?>
</div>
<div id="refresh_pag"></div>
</body>
</html>

Editado por robot7p
Link para o comentário
Compartilhar em outros sites

3 respostass a esta questão

Posts Recomendados

  • 0
Jonathan Queiroz

Jonathan Queiroz

Postado
Postado

Há dois probema (o segundo menos importante) aí:

  • O setInterval executa uma função infinitamente durante certo intervalo de tempo (no caso, 5 segundos) até que a função clearInterval interrompa esse ciclo. Como você chama a setInterval a cada execução da função atualizar_pags, é criado um intervalo para cada execução e esse intervalo permanece indefinidamente (ou melhor, até que o programa trave). Ou seja, cada vez que a função atualizar_pags é chamada, um novo ciclo é iniciado e o anterior permanece. As soluções são chamar a setInterval só uma vez, no início do programa, ou utilizar a setTimeout, que executa a função apenas uma vez após passados x segundos.

  • O segundo problema, um pouco menos grave, ocorre devido a utilização de uma requisição assíncrona. O que acontece é o seguinte: a função atualizar_pags chama a função ajax, que cria a requisição (ela não espera a requisição acabar, apenas inicia uma nova requisição e retorna logo depos disso), e depois usa o setInterval para chamar a atualiza_pags novamente. Como a função ajax retorna imediatamente, a contagem de tempo começa assim que a requisição é criada, ou seja, antes que ela termine.
Esses problemas podem ser facilmente solucionados trocando a função setInterval pela setTimeout e a colocando na função que é executada quando a requisição termina.

O código da função ajax ficaria mais ou menos assim:

function ajax(url,id_conteudo)
  {
        var xmlHttp = getHTTPObject();
        xmlHttp.onreadystatechange = function()
        {
          if (xmlHttp.readyState == 4)
          {
                //Retorno
                  var retorno = xmlHttp.responseText;
                  document.getElementById(id_conteudo).innerHTML = retorno;
                 //Como a requisição terminou, chamamos a função "atualizar_pags" daqui a 5 segundos
                 setTimeout(atualizar_pags,5000)
          }
        }
        
        xmlHttp.open("GET", url,true);
        xmlHttp.send(null);
  }
Já a função atualizar_pags pode ficar assim: 
function atualizar_pags()
  {
     <?PHP $conteudo = unserialize($_SESSION["dados_online"]); ?>
     var atualizar = '<?PHP echo $conteudo['atualizar']; ?>';
        
     if(atualizar == "sim")
     {
           ajax('conteudo.php','refresh_pag');
           ajax('<?PHP echo $_SERVER["PHP_SELF"]; ?>','refresh_sql');
     }
     else if(atualizar == "não")
     {
           ajax('<?PHP echo $_SERVER["PHP_SELF"]; ?>','refresh_sql');
     }
  }

Link para o comentário
Compartilhar em outros sites
  • 0
robot7p

robot7p

Postado
  • Autor
Postado (editado)

Ae Jonathan vlw mesmo! Resolveu o meu problema. Eu publiquei esta mesma dúvida em outro fórum há quase 1 mês e até hoje não obtive qualquer resposta, apesar de ser uma coisa tão simples. Eu guardava esta dúvida sobre o funcionamento do Ajax há muito tempo, ficando com diversos sistemas parados por causa disso. E você analizou tudo direitinho, sem se esquecer de nada. Muito pessoal aí que publica respostas em fóruns não analiza o problema direito, querendo publicar logo uma resposta de qualquer jeito, só para aumentar o seu número de "posts"... o que depois é mal porque pode até fazer o usuário ficar com mais dúvidas ainda. Mas você esclareceu tudo direitinho, com uma escrita bem organizada.

Eu antes estava fazendo sucessivas atualizações com Ajax sem fazer nenhuma verificação no banco de dados para ver se alguma coisa habvia sido alterada... pois é, eu sabia que isso não era correto mas eu também ia fazer o quê?... eu não sabia como utilizar corretamente os recursos do Ajax, mas sabia que era possível fazer tal verificação. Por isso comecei a estudar Ajax e então surgiu esta tal dúvida.

Por isso, vlw mesmo! Obrigado por tirar um tempinho para me ajudar e ajudar os outros. Só temos a ganhar com isso, já que quanto mais experiência melhor não é!? Eu também costumo fazer publicações em outro fórum, com mais ênfase no Php, e agora vou participar deste aqui também, porque a primeira impressão foi excelente! :rolleyes:

Editado por robot7p
Link para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.

×
 Share
Ir para lista de Perguntas


  • Estatísticas dos Fóruns

    • Tópicos
      152,3k
    • Posts
      652,3k
×
×
  • Criar Novo...