Double Error Message Javascript Ajax

Question

Double Error Message Javascript Ajax

Navigation

#1 by (2 votes)

2

I made a code so that when I changed something in a div, it automatically changed the page in real time without having to give refresh or anything, however when I change the contents of the div if by chance f5, the information appears repeatedly.

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 f5 is given on the page, the message "test" appears 2x.

I wondered if there was any way to fix this.

Thank you

javascript ajax

asked by anonymous 23.10.2015 / 19:36

1 answer

Search in SqlServer with Query How to fill null with value from the previous line?

score 2 · Answer 1

Look, the text teste is outside of the # ReloadThis div, so it is not being replaced. so just change the same 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 have also fixed a problem with your AJAX request, it does not check if it has successfully ended, 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 use sockets or simply look for new content only. because making a request every 10ms is at the very least a bad idea.