■Ajax : サーバー上のテキストデータを読み込み表示する

 もっともシンプルなものとしてサーバー上にあるテキスト(プレーンテキスト)を読み込みページ内に表示させるスクリプトです。ここでは確実に表示させるためにテキストは英数字のみで日本語は書かれていないものとします。
 まず、Safari, Firefox, Mozilla, Netscape 6以降で以下のスクリプトを実行してみてください。

サンプルを実行する
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Ajax Basic Sample</title>
<script type="text/javascript"><!--
function getIndex(getFile) {
xmlhttp = new XMLHttpRequest();
if (xmlhttp) {
xmlhttp.onreadystatechange = check;
xmlhttp.open('GET', getFile, true);
xmlhttp.send(null);
}
}
function check() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("disp").innerHTML = xmlhttp.responseText;
}
}
// --></script>
</head>
<body>
<a href="javascript:getIndex('sample.txt')">sample.txtファイル読み込み</a>
<div id="disp"></div>
</body>
</html>

 sample.txtの内容が読み込まれページ内に表示されます。このサンプルではWindows版のInternet Explorer (以下IE)では動作しません(Mac版IE5ではAjaxは動作せず対象外)。そこでXMLHttpsRequest()の部分を書き換え以下の赤字のようにします。

サンプルを実行
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Ajax Basic Sample</title>
<script type="text/javascript"><!--
function getIndex(getFile) {
xmlhttp = new ActiveXObject ("Microsoft.XMLHTTP");
if (xmlhttp) {
xmlhttp.onreadystatechange = check;
xmlhttp.open('GET', getFile, true);
xmlhttp.send(null);
}
}
function check() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("disp").innerHTML = xmlhttp.responseText;
}
}
// --></script>
</head>
<body>
<a href="javascript:getIndex('sample.txt')">sample.txtファイル読み込み</a>
<div id="disp"></div>
</body>
</html>

 IEと、それ以外のブラウザでの違いは、この1行だけです。実際には細かい部分での動作の違いや日本語が含まれる場合には文字コードによる違いで問題が発生することがあります(詳しくは高橋さんのサイトで検証が行われています。[XMLの場合] [プレーンテキストの場合])。

 1行しか違わないのでブラウザ分岐による方法で処理するかtry, catchのエラー処理を利用して生成するオブジェクトを変更するなどして対処する必要があります。Opera 8に関しては現時点では未チェックです。Opera 8以前ではエラーで動作しないので対象外となります。

 データをやりとりするオブジェクトを生成したら通信のための設定を行います。まず、通信時および通信終了までの処理を行いますが、これはreadyStateChangeイベントを利用しイベントハンドラ(イベント発生時の処理)を指定します。匿名関数を使って定義しても構いませんし、通常の関数を指定しても構いません。サンプルではイベント発生時にcheckという関数を呼び出すようにしています。
 次に取得するデータを指定します。Ajaxではセキュリティの都合上、同じドメインのサーバーにあるデータしか取得することができません。取得しようとするとエラーが発生します。データの取得はopen()で行います。GETはWebサーバーに対して送るコマンドです(telnet Webサーバー名 80と入力してGETと入力するのと同じ・・・はず)。open()の2番目の引数で取得するファイル名を指定します。ここではsample.txtを取得し表示しています。これはプレーンテキスト(普通のテキスト)ですが、画像データも取得することができます。その場合、生データが入ってしまうので注意が必要です(ファイルフォーマットを調べたいとかいう場合には使えなくはありませんが)。
 次にsend(null)で送信を終了します。MacOS X Panther (10.3.x)のWebKitではsend(null)で不具合が発生することがあるようですが、どういう状況で発生するかは不明です。OSの処理段階で不具合が発生するためWebKitを利用しているSafariや、それ以外のブラウザなども同じ不具合をかかえていることになります。

 サーバーにコマンドが送られ通信が開始されると通信状況に応じてreadyStateの値が変化します。readyStateの値が変化するとイベントが発生します。さきほどcheck関数を呼び出すように設定したので、どのような状況なのかを関数内で調べます。通信状況はreadyStateの値で知る事ができます。readyStateの値は0〜4まであり4で読み込みが完了した事になります。

http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/readystate_2.asp
http://jsgt.org/mt/archives/01/000278.html

 check関数ではデータが完全に読み込まれた=readyStateの値が4になった場合にデータをページ内に表示します。しかしサンプルを見るとstatusコードの値もチェックしています。このstatusコードはWebサーバーが返すコードで8進数になっています。この値が200の場合には問題なくデータが送信されたことになります。404であればファイルがなかったことになるためファイル名が間違っているかパスが間違っていることになります。

http://www.studyinghttp.net/cgi-bin/rfc.cgi?2616#Sec10
http://www.studyinghttp.net/status_code
http://homepage1.nifty.com/yito/anhttpd/statuscode.html

 これで、やっとページ内にテキストデータを表示させることができます。表示するテキストは<div>タグであらかじめ表示場所を設定しておきます。サンプルでは何の考えもなく表示していますが、普通はスタイルシートを使って見栄え良く(?)しておきます。