2

TEntei fazer um código para que eu ao alterar algo em uma div, mudava automaticamente na página em tempo real sem ter que dar refresh nem nada do género, contudo quando eu mudo o conteúdo da div se por acaso der f5, a informação aparece repetida.

function Ajax(){
  var xmlHttp;
  try{    
    xmlHttp=new XMLHttpRequest();// Firefox, Opera 8.0+, Safari
  }
  catch (e){
    try{
      xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); // Internet Explorer
    }
    catch (e){
      try{
        xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
      catch (e){
        alert("No AJAX!?");
        return false;
      }
    }
  }

  xmlHttp.onreadystatechange=function(){
    if(xmlHttp.readyState==4){
      document.getElementById('ReloadThis').innerHTML=xmlHttp.responseText;
      setTimeout('Ajax()',10);
    }
  }
  xmlHttp.open("GET","index.php",true); // aqui configuramos o arquivo
  xmlHttp.send(null);
}

window.onload=function(){
  setTimeout('Ajax()',10); // aqui o tempo entre uma atualização e outra
}
<div style="background-color:#00CED1;" id="ReloadThis"></div>
teste

Ao executar o código se der f5 na página aparece 2x a mensagem "teste".

Queria saber se haveria alguma forma de corrigir isso.

Obrigado

1 Resposta 1

2

Olha, o texto teste está fora da div#ReloadThis, por isto ele não está sendo substituído. então basta mudar o mesmo para dentro da DIV.

//evitar o uso de try-cacth dentro do setTimeout.
var HttpRequest = window.XMLHttpRequest;
var requestConfig = null;

if (!HttpRequest) {
  HttpRequest = ActiveXObject;
  try {
    new ActiveXObject("MSXML2.XMLHTTP.6.0");
    requestConfig = "MSXML2.XMLHTTP.6.0";
  } catch (e) { 
    try {           
      return new ActiveXObject('MSXML2.XMLHTTP.3.0');
      requestConfig = "MSXML2.XMLHTTP.3.0";
    } catch (e) { 
      HttpRequest = null;
      return null;
    } 
  }
}

var ajax = function (url, target){
  var xmlHttp = new HttpRequest(requestConfig);     
  xmlHttp.onreadystatechange=function(){
    if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
      target.innerHTML=xmlHttp.responseText;
      interval(url, target);
    }
  }
  xmlHttp.open("GET", url, true); // aqui configuramos o arquivo
  xmlHttp.send();
}

var interval = function (url, target) {
  setTimeout(function () {
    ajax(url, target)
  }, 10); // aqui o tempo entre uma atualização e outra
}

if (HttpRequest) {
  window.onload=function(){
    var target = document.getElementById('ReloadThis');
    interval("index.php", target);    
  }
}
<div style="background-color:#00CED1;" id="ReloadThis">
  teste
</div>

Também corrigi um problema quanto a sua requisição AJAX, ela não verifica se a mesma terminou com sucesso, por isto adicionei um status == 200

Em todo caso, acredito que a sua solução tem outros problemas, talvez seja melhor você repensar qual conteúdo precisa ser atualizado, quando, e até se cabe usar sockets ou simplesmente procurar apenas pelos conteúdos novos. pois fazer uma requisição a cada 10ms é no minimo uma péssima ideia.

8
  • Diga me uma coisa, Porque mesmo eu colocando coisas fora da div, o site continua a atualizar coisas que não estejam dentro da div em tempo real?
    – Gonçalo
    Commented 23/10/2015 às 17:49
  • o seu AJAX basicamente substituí o conteúdo de div#ReloadThis, acredito que o seu index.php tenha apenas o texto teste, então ao termino da requisição AJAX, ele vai atualizar o conteúdo div#ReloadThis com o texto teste e manter o texto teste de fora da div intacto... Se você escrever no arquivo.php hello world, então na sua pagina vai aparecer hello world teste. Commented 23/10/2015 às 17:53
  • Como faço para só atualizar a div em tempo real sem adicionar mais nada?
    – Gonçalo
    Commented 23/10/2015 às 17:55
  • Gonçalo, a sua div já está sendo atualizada em tempo real, o unico motivo para aparecer o texto teste 2x, é pq o mesmo está inicialmente fora da div a ser atualizada. Commented 23/10/2015 às 17:57
  • Como corrijo isso?
    – Gonçalo
    Commented 23/10/2015 às 17:59

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 .