I need to do two squential XMLHttpRequests via JavaScript, for data update on two different JavaScript charts, displayed on this php page:
<!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>
I tried to create two different XMLHttpRequest with the function getXHR. The paramater "started"\"finished" in the function updateChart, defines the REST call that I need for the update task.
Here is the updateChart:
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();
};
which calls the function restCall(), here defined:
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;
}
I don't know why, but the chart gets and display the last responseText from the xhttp object (like It's overwritten) of the two restcall (even if I reverse the order request, the last call wins).
Infact, when I log the response (in the first three rows updateChart()), I got something like:
"{"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}" is the JSON response which I got when I call the rest function "finished". But there isn't the JSON "started" response. Maybe it's overwritten? Someone knows why?
As other users pointed out, the problem was the setting of a global variable (content) which was overwritten at each call.