jQuery funktioniert nicht mit XMLHttpRequest-Objekt

Question

Ich habe eine index.php Seite, die info.php durch AJAX lädt. Der info.php Inhalt wird wie folgt geladen:

<script> 
function loadDoc() { 
    var xhttp = new XMLHttpRequest(); 
    xhttp.onreadystatechange = function() { 
    if (this.readyState == 4 && this.status == 200) { 
     document.getElementById("data").innerHTML = this.responseText; 
    } 
    }; 
    xhttp.open("GET", "info.php", true); 
    xhttp.send(); 
} 

(function() { 
    loadDoc() 
})(); 
setInterval ("loadDoc()", 5000); 
</script> 

Die info.php Datei hat den folgenden Code ein zu tun, von Count Up/Down/zu einer bestimmten Nummer.

<div class="timer count-title count-number" data-from="2000" data-to="300" data-speed="1500"></div> 

<script src='includes/jquery-3.2.1.min.js'></script> 
<script src="includes/counter.js"></script> 

Als ich info.php direkt der Zähler besuchen funktioniert völlig in Ordnung. Jedoch, wenn ich index.php besuche, wird der Zähler nicht einmal angezeigt. Ich hatte das gleiche Problem mit anderen jQuery-Skripten. Auch wenn index.php jQuery und die anderen Skripte enthält, funktioniert es immer noch nicht. Ich möchte, dass die Nummer den AJAX-Anruf durchläuft, da sie ständig aktualisiert wird.

Gibt es eine einfache Lösung?

Answer 1

Sie es von JQuery wie tun können, wie folgt ...

function loadDoc(){ 
      console.log("call done"); 
      $("#data").load("info.php", function() { 
       console.log("Load done."); 
      }); 

     }; 
     $(function(){loadDoc();}); 
     setInterval (loadDoc, 5000); 

denke ich, ihr Problem mit der Funktion Anweisung prüft dies für das folgende Skript ...

function loadDoc() { 
    var xhttp = new XMLHttpRequest(); 
    xhttp.onreadystatechange = function() { 
    if (this.readyState == 4 && this.status == 200) { 
     document.getElementById("data").innerHTML = this.responseText; 
    } 
    }; 
    xhttp.open("GET", "info.php", true); 
    xhttp.send(); 
} 

$(function(){loadDoc();}); 
setInterval (loadDoc, 5000);