外部に用意したテキストファイルを簡単に読み込んで表示させることは出来ないかな～
ってことで探していたら、
OPEN SPACE様（http://www.openspc2.org/）のサイトに「非同期通信でテキストファイルを読み込む」というのがあったのでお借りしてみました。
で、自分の場合、ページを表示するときに複数のテキストファイルを読み込んで一緒に表示したいので、ちょっと加工してみました。
サンプル(zip) [Download]
【doc_onload.js】
function createXMLHttpRequest(cbFunc) {
var XMLhttpObject = null;
try {
XMLhttpObject = new XMLHttpRequest();
} catch(e) {
try {
XMLhttpObject = new ActiveXObject("Msxml2.XMLHTTP");
} catch(e) {
try {
XMLhttpObject = new ActiveXObject("Microsoft.XMLHTTP");
} catch(e) {
return null;
}
}
}
if (XMLhttpObject) XMLhttpObject.onreadystatechange = cbFunc;
return XMLhttpObject;
}
function loadDocFile(fName, idName) {
this.idName = createXMLHttpRequest(function() {
document.getElementById(idName).innerHTML = ((this.readyState == 4) && (this.status == 200)) ? this.responseText : "Loading...";
});
if (this.idName) {
this.idName.open("GET", fName, true);
this.idName.send(null);
}
}
function setOnload() {
// loadDocFile(ファイル名, 出力先id)
loadDocFile("doc1.dat", "result1");
loadDocFile("doc2.dat", "result2");
loadDocFile("doc3.dat", "result3");
}
window.onload = setOnload;
----- ここまで -----
出力用の id を付けた div や p タグ等を用意します。
setOnload() 内のloadDocFile(ファイル名, 出力先id)を実行すると、指定したファイルを読み込んで id の付いたタグに表示します。
上記の場合、doc1.dat を読み込んで id=result1 に出力、doc1.dat を読み込んで id=result2 に出力・・・
といった感じです。
更新情報の表示とかちょっとしたものには使えるかな？
ただ、日本語を含む読み込むテキストファイルはBOM付のUTF-8じゃないとNGだそうです・・・
この記事へのコメント
Yoichiro Sekino