XMLHttpRequestの非同期ファイル入力がうまくいきません

Question

WEBサーバにローカルなデータファイルからグラフを描画するスクリプトを作成しています。
データは数秒おきに更新されるのですが、XMLHttpRequestの非同期ファイルIOを使用すると、更新されたデータを読んでくれず、最初に読み込んだデータのままになってしまいます。

function updateChart() {
const datafile = 'xxx.txt';
var xhr = new XMLHttpRequest();
xhr.open('GET', datafile, true);
xhr.onload = function() {
var data = xhr.responseText;
＜Data処理＞
chart.update(data);
};
xhr.send(null);
}

同期処理にすると、更新されたファイルからデータを読み込んでくれます。

function updateChart() {
const datafile = 'xxx.txt';
var xhr = new XMLHttpRequest();
xhr.open('GET', datafile, false);
xhr.send(null);
var data = xhr.responseText;
＜Data処理＞
chart.update(data);
}

非同期処理がうまくいかないのはなぜでしょうか？

Answer 1

キャッシュの問題はありませんか？

(()=>{
  const datafile = 'xxx.txt?t='+new Date().getTime();
  var xhr = new XMLHttpRequest();
  xhr.open('GET', datafile, true);
  xhr.addEventListener('load',()=>{
    var data = xhr.responseText;
    console.log(data);
  });
  xhr.send(null);
})();

Comments

[YKawabe]

ご回答有り難うございます。
サーバ側でキャッシュされることを知りませんでした。おそらくそれが原因と思います。
ファイル名を毎回変えることはできないので、キャッシュを無効にするヘッダリクエストを送信する方法でやってみようと思います。