javascript - Api调用Ajax n秒GET请求

Question

API 显示实时值并且更改非常频繁，因此我尝试每秒进行一次调用并将其显示到网页。

我尝试使用 set_interval() 每 N 秒调用一次 get 请求，但值仅加载一次，并且不会再次调用。

<p id="val"></p>
<p id="val2"></p>
<p id="val3"></p>

<script>
var xhttp = new window.XMLHttpRequest();
xhttp.open("GET", "http_url_link", true);
xhttp.send();
xhttp.onreadystatechange = myFunction(xhttp);

function myFunction() {
    if (xhttp.readyState == 4) {
        var xmlDoc = xhttp.responseXML;
        var val1= xmlDoc.getElementsByTagName('value_1')[0].childNodes[0];
        var val2 = xmlDoc.getElementsByTagName('value_2')[0].childNodes[0];
        var val3 = xmlDoc.getElementsByTagName('value_3')[0].childNodes[0];
        document.getElementById('val3').innerHTML =
        v3.nodeValue;
        document.getElementById('val').innerHTML =
        v1.nodeValue;
        document.getElementById('val2').innerHTML =
        v2.nodeValue;
    }
}
myFunction();
setInterval(myFunction, (1000));
</script>

Answer 1

var xhttp = new window.XMLHttpRequest();

这里 xhttp 对象在脚本运行时创建一次，并且您一次性获得正确的输出。所以你需要在 1 秒后调用它。

function myFunction() {
   var xhttp = new window.XMLHttpRequest();
   xhttp.open("GET", "http_url_link", true);
   xhttp.send();
   xhttp.onreadystatechange = function(){
      if (xhttp.readyState == 4) {
       var xmlDoc = xhttp.responseXML;
       var val1=xmlDoc.getElementsByTagName('value_1'[0].childNodes[0];
       var val2 = xmlDoc.getElementsByTagName('value_2')[0].childNodes[0];
       var val3 = xmlDoc.getElementsByTagName('value_3')[0].childNodes[0];
       document.getElementById('val3').innerHTML=v3.nodeValue;
       document.getElementById('val').innerHTML=v1.nodeValue;
       document.getElementById('val2').innerHTML=v2.nodeValue;
    }
  }

setInterval(myFunction,(2000));

祝你编码愉快:)