JavaScript XMLHttpRequest覆盖以前的responseText
JavaScript XMLHttpRequest overwrite previous responseText
我需要通过JavaScript执行两个特殊的XMLHttpRequest,以便在两个不同的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}"是我调用rest函数"finished"时得到的JSON响应。但是没有JSON"启动"响应。也许它被覆盖了?有人知道为什么?
正如其他用户所指出的,问题在于全局变量(内容)的设置,该变量在每次调用时都会被覆盖。
相关文章:
- xmlhttp.responseText不显示文本
- 使用json_encode通过xmlhttp.responseText发送特殊字符(即caron)
- xmlhttp.responseText中显示的标记
- 为什么我得到responseText(通过Ajax从Servlet到javaScript)和额外的字符
- xmlHttp.responseText未知错误定义
- 如何将数据POST到节点服务器并从中获取responseText
- servlet-为什么XMLHttpRequest responseText始终为空
- 无法从IE中的data.responseText获取结果,但在其他浏览器中工作
- XMLHttpRequest.responseText
- 无法从jquery中的函数返回ajax responseText
- xmlhttp.responsetext无法正常工作
- Ionic框架:从responseText解析xml
- 正在尝试用responseText替换行的innerhtml
- responseText数组解析不正确
- PHP文件不返回.responseText中的文本
- ajax responseText验证功能冻结页面内容(async)
- XMLHttpRequest-当将responseText返回到另一个函数时,它返回undefined
- 正在从xmlhttp.responseText获取数据
- $.ajax():responseText 是正确的,但报告了错误.为什么
- 正在从XMLHttpRequest responseText获取数据