Ajax: Importing Data

MDN Learn
#1

First, a great big thanks to @chrisdavidmills and his most valuable help in the thread Array.prototype.pop() Return last element of an Array (Success!). :100:

So in carrying on of this learning project, I have some questions concerning Ajax and importing data.

First, the below code works wonderfully, as for what Iā€™m wanting it to do, however, the timeData gets ā€œstuckā€ so to speak when I come back to the html after some time, next day for example. As if the timeData from the referenced dcs-time.txt is ā€œstuckā€ in the browsers cache (I suspect). If I clear the browsers cache data the script will start to work and update the time in 6 second intervals as expected (Iā€™m using firefox).

As can be seen Iā€™ve added meta lines into the .html <head> in differing combination, but nothing seems to work. Any help please?

Iā€™ve other questions, however, one at a time :upside_down_face: .

Working example here on github (although itā€™s static as the dcs-time.txt file is not actively being wrote onto). Github code repository import-time-data.html and import-time-data.js links.

<!-- These lines are added as an attempt to force the time data to refresh in the client browser. I'm Having a issue where the time data
      being loaded into the browser will be from what appears to be a "stuck" cached data, causing the time not the become updated on the html page 
	  from the current time-data.txt file as this script is being run. This happens when revisiting the html page after sometime has passed,
	  the next day for example. -->
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">
<meta http-equiv="Vary" content="*">

And the js.

const fullData = document.getElementById('writeData');
const lastData = document.getElementById('lastStamp');
const worldTime = document.getElementById('postTime');
const progressTime = document.getElementById('timeBar');

function fetchData() {
  
  console.log('Fetching updated data.');
  let xhr = new XMLHttpRequest();
  xhr.open("GET", "../data/dcs-time.txt", true);
  xhr.onload = function() {
    updateDisplay(xhr.response);
  }
  xhr.send();
  
}

function updateDisplay(text) {
  
  // This line is added to empty the browsers cache, not sure it really does anyting though.
  document.getElementById('writeData').innerHTML = "";
  
  fullData.textContent = text;

  let timeArray = text.split('\n');
  
  // included because some file systems always include a blank line at the end of text files.
  if(timeArray[timeArray.length-1] === '') {
    timeArray.pop();
  }
  
  lastData.textContent = timeArray[timeArray.length-1];
  sliceTime = timeArray[timeArray.length-1].slice(6, -1);
  
  getTime = Number(sliceTime); // This is in secounds value.
  startTime = 21600 // This is in a secounds value (in this example, starting off the mission @ 0600).
  calTime = ( startTime + getTime ) / 60 ; // This is the current time in total minutes.
  hourTime = Math.floor(calTime / 60); // This returns the largest whole hour value.
  minuteTime = Math.floor(calTime % 60); // This returns any minutes to the largest whole minute.
  
  if (minuteTime < 10) {minuteTime = '0' + minuteTime}; // Configures the time format to 00:00.
  if (hourTime < 10) {hourTime = '0' + hourTime};
  
  worldTime.textContent = hourTime + ':' + minuteTime;
  
  // If the mission is exited, then the DCS World Time will display "Server Off-Line".
  if (lastData.textContent === 'EXIT') {worldTime.textContent = 'Server Off-Line'};
  
  // The progress bar is caculated in secounds, for time cycles of 8 hour duration.
  progressTime.value = getTime;
}

setInterval(fetchData, 6000); // This refreshes the data in 6 second intervals.