それではサーバー上のテキストファイルを読み込みページ上に表示してみます。テキストファイルはopen()メソッドで最初の引数に"GET"を指定し、二番目の引数に読み込むファイル名を指定します。三番目の引数は同期、非同期を示すフラグです。trueを指定するか省略すると非同期通信、falseを指定すると同期通信になります。データの読み込みが完了したらresponseTextプロパティの値を表示すれば文字が表示されます。
ところが、日本語を含むテキストファイルの場合には問題が発生します。以下のスクリプトを、いろいろな環境で
実行すると分かりますが、BOM (Bye Order Mark : 文字コードを認識するための先頭情報) 付きのUTF-8以外は、うまく表示されません。（実行結果を
キャプチャーしたデータを用意してあります。また、高橋登史朗さんのページに
文字コード調査の結果がありますので参考にしてみてください。対処方法も掲載されています。）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=shift_jis">
<title>サーバー上のテキストファイルを読み込む</title>
<script type="text/javascript" src="xmlhttp.js"></script>
<script type="text/javascript"><!--
function loadTextFile(fName)
{
httpObj = createXMLHttpRequest(displayData);
if (httpObj)
{
httpObj.open("GET",fName,true);
httpObj.send(null);
}
}
function displayData()
{
if ((httpObj.readyState == 4) && (httpObj.status == 200))
{
document.ajaxForm.result.value = httpObj.responseText;
}else{
document.ajaxForm.result.value = "Loading...";
}
}
// --></script>
</head>
<body>
<h1>サーバー上のテキストファイルを読み込む</h1>
<p>このHTMLファイルはSHIFT JISコードです</p>
<form name="ajaxForm">
<input type="button" value="英数字のみのファイルを読み込み" onClick="loadTextFile('data.txt')"><br>
<input type="button" value="SHIFT JIS読み込み" onClick="loadTextFile('shift_jis.txt')"><br>
<input type="button" value="EUC読み込み" onClick="loadTextFile('euc.txt')"><br>
<input type="button" value="UTF-8読み込み" onClick="loadTextFile('utf8.txt')"><br>
<input type="button" value="UTF-8 (BOMあり)読み込み" onClick="loadTextFile('utf8bom.txt')"><br>
<input type="button" value="UTF-16読み込み" onClick="loadTextFile('utf16.txt')"><br>
<textarea name="result" cols="40" rows="5"></textarea>
</form>
</body>
</html>
日本語を含む場合には、基本的にはBOM付きのUTF-8を使えば大半の環境では何とかなります。安全を追うなら以後の項で説明するresponseXML、XML形式のデータを読み込む方がよいでしょう。
上記のサンプルではフォームのテキストエリアに文字を表示していますが、多くの場合普通の文字として表示することが多いはずです。このような場合にはdivタグで文字を表示するブロックを用意します。このdivタグのid属性に名前を指定します。名前は英文字で始まり2文字目以降は英数字の組み合わせにします。日本語は使用しないでください。id名を指定したらdocument.getElementById("id名")としてdivタグにアクセスすることができます。文字を表示するにはinnerTextまたはinnerHTMLを使います。innerTextは普通のテキストとして処理され、innerHTMLはHTMLタグとして処理されます。innerTextでは読み込んだ文字はそのまま表示されますが、innerHTMLではHTMLタグが反映されます。どちらを使うかは状況次第ですが、処理速度を求めるのであればinnerTextで表示する方が高速です。
実際のスクリプトは以下のようになります（サンプルを
実行する）。
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=shift_jis">
<title>サーバー上のテキストファイルを読み込みページ上に表示する</title>
<script type="text/javascript" src="xmlhttp.js"></script>
<script type="text/javascript"><!--
function loadTextFile(fName)
{
httpObj = createXMLHttpRequest(displayData);
if (httpObj)
{
httpObj.open("GET",fName,true);
httpObj.send(null);
}
}
function displayData()
{
if ((httpObj.readyState == 4) && (httpObj.status == 200))
{
document.getElementById("resultData").innerText = httpObj.responseText;
}else{
document.getElementById("resultData").innerText = "Loading...";
}
}
// --></script>
</head>
<body>
<h1>サーバー上のテキストファイルを読み込みページ上に表示する</h1>
<form name="ajaxForm">
<input type="button" value="data.txtファイル読み込み" onClick="loadTextFile('data.txt')"><br>
</form>
<div id="resultData"></div>
</body>
</html>
最近ではdocument.getElementById()と記述するのは長いので関数名$を使って短く記述することがあります。まず、以下のような関数を定義しておきます。
function $(tagId)
{
return document.getElementById(tagId);
}
これをライブラリ内に入れておけば以下のように短く記述することができます。（ここではxmlhttp.js内に上記関数を指定してあります）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=shift_jis">
<title>サーバー上のテキストファイルを読み込みページ上に表示する(2)</title>
<script type="text/javascript" src="xmlhttp.js"></script>
<script type="text/javascript"><!--
function loadTextFile(fName)
{
httpObj = createXMLHttpRequest(displayData);
if (httpObj)
{
httpObj.open("GET",fName,true);
httpObj.send(null);
}
}
function displayData()
{
if ((httpObj.readyState == 4) && (httpObj.status == 200))
{
$("resultData").innerText = httpObj.responseText;
}else{
$("resultData").innerText = "Loading...";
}
}
// --></script>
</head>
<body>
<h1>サーバー上のテキストファイルを読み込みページ上に表示する(2)</h1>
<form name="ajaxForm">
<input type="button" value="data.txtファイル読み込み" onClick="loadTextFile('data.txt')"><br>
</form>
<div id="resultData"></div>
</body>
</html>
それでは次にHTMLファイルの内容を読み込んでページ内に表示します。
[
8:サーバー上のHTMLファイルを読み込みページ上に表示するへ]
[
目次へ]
(2005.12.22)