Double Message Error Javascript Ajax

Question

I tried to make a code so that when I changed something in a div, I would automatically change the page in real time without having to refresh or anything like that, however when I change the content of the div if it happens to be F5, the information appears repeated.

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

When executing the code if you give F5 on the page appears 2x the message "test".

I was wondering if there was any way to fix this.

Thank you

Answer 1

Look, the text teste is out of the Div#Reloadthis, so it is not being replaced. then just change it into the 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>

I also fixed an issue regarding your AJAX request, it does not check if it ended successfully, so I added a status == 200

In any case, I believe that your solution has other problems, maybe you should rethink what content needs to be updated, when, and even if you should use sockets or just search for new content. because making a request every 10ms is at least a bad idea.