JavaScript XMLHttpRequest 覆盖之前的 responseText

Question

我需要通过 JavaScript 执行两个连续的 XMLHttpRequests，以便在两个不同的 JavaScript 图表上更新数据，显示在这个 php 页面上：

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="canvasjs.min.js"></script>
<script type="text/javascript" src="AJAXrestFunc.js"></script>
<script type="text/javascript">
        window.onload = function () {
            var updateInterval = 1000;  // milliseconds
            var xhttp1, xhttp2
            function getXHR() {
                if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
                    return new XMLHttpRequest();
                }
                else { // code for IE6, IE5
                    return new ActiveXObject("Microsoft.XMLHTTP");
                }
            }
            xhttp1 = getXHR();
            setInterval(function(){updateChart("started", xhttp1)}, updateInterval);
            xhttp2 = getXHR();
            setInterval(function(){updateChart("finished", xhttp2)}, updateInterval);
    }
</script>
</head>
<body>
    <div id="started" style="height:300px; width:100%;"></div>
    <div id="finished" style="height:300px; width:100%;"></div>
</body>
</html>

我尝试使用函数 getXHR 创建两个不同的 XMLHttpRequest。函数 updateChart 中的参数 "started"\"finished" 定义了更新任务所需的 REST 调用。

这是更新图表：

function updateChart (func, xhttp) {
     jsonresponse = restCall(func, xhttp);
     console.log(jsonresponse);
     console.log(func);
     parsed = JSON.parse(jsonresponse);
     dps = [];
     count = 0;
     var sum = 0;
     for (var key in parsed) {
         dps[count] = {label: "TaskExecutor"+key, y: parsed[key]};
         count++;
         sum = sum + parsed[key];
     }

     var totalTask = "Total Tasks "+func+" "+sum;

     var chart = new CanvasJS.Chart(func,{
          theme: "theme4",
          title:{text: "Task "+func},
          axisY: {title: func},
          legend:{
              verticalAlign: "top",
              horizontalAlign: "centre",
              fontSize: 18
          },
          data : [{
              type: "column",
              showInLegend: true,
              legendMarkerType: "none",
              legendText: totalTask,
              indexLabel: "{y}",
              dataPoints: dps
          }]
      });

     chart.render();

  };

其中调用函数restCall()，这里定义：

 function restCall(func, xhttp) {
     xhttp.onreadystatechange = function() {
         if (xhttp.readyState == 4 && xhttp.status == 200) {
             content = xhttp.responseText; //here I get the responseText
         }
     };
     xhttp.open("GET", "/testingREST/monitor/all_"+func, true);
     xhttp.send();
     return content;
     }

我不知道为什么，但是图表从两次 restcall 的 xhttp 对象（就像它被覆盖了）获取并显示了最后一个 responseText（即使我颠倒订单请求，最后一个调用获胜）。

事实上，当我记录响应时（在前三行 updateChart() 中），我得到了类似这样的信息：

"{"1":2,"2":3,"3":10,"5":7,"12":4}" AJAXrestFunc.js:14:4
"started" AJAXrestFunc.js:15:4
"{"1":2,"2":3,"3":10,"5":7,"12":4}" AJAXrestFunc.js:14:4
"finished" AJAXrestFunc.js:15:4
"{"1":2,"2":3,"3":10,"5":7,"12":4}" AJAXrestFunc.js:14:4
"started" AJAXrestFunc.js:15:4
"{"1":2,"2":3,"3":10,"5":7,"12":4}" AJAXrestFunc.js:14:4
"finished" AJAXrestFunc.js:15:4
"{"1":2,"2":3,"3":10,"5":7,"12":4}" AJAXrestFunc.js:14:4
"started" AJAXrestFunc.js:15:4
"{"1":2,"2":3,"3":10,"5":7,"12":4}" AJAXrestFunc.js:14:4
"finished"
...

"{"1":2,"2":3,"3":10,"5":7,"12":4}" 是我得到的 JSON 回复我调用其余函数 "finished"。但是没有 JSON "started" 响应。也许它被覆盖了？有人知道为什么吗？

Answer 1

正如其他用户所指出的，问题是全局变量（内容）的设置在每次调用时都会被覆盖。

JavaScript XMLHttpRequest 覆盖之前的 responseText

JavaScript XMLHttpRequest overwrite previous responseText

javascript

php

ajax

jquery

xmlhttprequest