#xmlHttpRequestでファイル読み込みを行う
javascriptでどうにかローカルファイルを読み込みたくて、
xmlHttpRequestで実装することにした。以下の点で、困ったので
記録として残しておこうと思います。
下記コードでファイル読み込み実施したが、古いファイル内容が読み込まれる
時が多々あり、困っていた。
原因は頻繁に発生するリクエストはキャッシュに保存され、ファイルが更新
されていてもキャッシュからデータを取得することで古いデータしか取得できなかった。
var rawFile = new XMLHttpRequest();
var allText = "";
rawFile.open("GET", file, true);
rawFile.onreadystatechange = function (){
if(rawFile.readyState === 4){
if(rawFile.status === 200){
allText = rawFile.responseText;
}else{
alert("データ取得失敗")
}
}
}
rawFile.send(null);
キャッシュからデータを取得しない設定を下記のように実施し、改善できた。
var rawFile = new XMLHttpRequest();
var allText = "";
var file ="xxx.txt"
rawFile.open("GET", file, true); //false:同期通信 true:非同期通信
//以下３行はキャッシュから取得しない設定
rawFile.setRequestHeader('Pragma', 'no-cache');
rawFile.setRequestHeader('Cache-Control', 'no-cache');
rawFile.setRequestHeader('If-Modified-Since', 'Thu, 01 Jun 1970 00:00:00 GMT');
rawFile.onreadystatechange = function (){
if(rawFile.readyState === 4){
if(rawFile.status === 200){
allText = rawFile.responseText; //取得完了時の処理
}else{
alert("データ取得失敗")
}
}
}
rawFile.send(null); //上記設定でリクエストを送信
問題発生時は、全く原因がわからず、キャッシュというキーワードにたどり着くまで、
長い闘いでした。
原因探索のために、対象のファイルパスを削除してもファイルがリードされ、
何が何やらわからなかった。とりあえず、解決できてよかった。
今回、ついでに勉強になったこと。。。
同期通信で取得すると、データを受信するまで、クライアント側の処理がストップする
ため、非同期で取得するほうがいい。