非同期通信によるファイルの取得
次に非同期通信を試してみます。非同期通信ではサーバからのレスポンスを待たずに次の処理を進めることが出来ますので大量のデータ処理が必要な場合でもクライアント側ではレスポンス待ちにならないで済みます。
同期通信の場合と同じく基本的なプログラムの流れは次の通りです。
var xmlHttp;
xmlHttp = new XMLHttpRequest();
xmlHttp.open("GET", "http://www.ajaxtower.jp/sample/plan.txt", false);
xmlHttp.send(null);
alert(xmlHttp.responseText);
ただ大きく異なる点があります。同期通信の場合「send」メソッドを実行した後、サーバからのレスポンスが完了するのを待って次の行の処理が行われるため、次の行で受信したデータの表示を行っても大丈夫なのです。
それに対して非同期通信の場合は「send」メソッドを実行するとすぐに次の行へ処理が移ってしまいますので、「alert」を実行する時点で表示すべきデータを受信出来ていないため何も表示することができません。そこで非同期通信の場合にはサーバへリクエストを送信する部分とデータを受信後にデータを表示する部分を分けて考える必要があります。
readyStateプロパティ
そこで使われるのが「readyState」プロパティです。「readyState」プロパティはサーバからデータを受信するたびに値の更新が行われます。よってこの値を監視することでデータの受信が完了したかどうかを判別できます。
「readyState」プロパティの値が変化すると「onreadystatechange」イベントが発生します。そこで「onreadystatechange」イベント発生する度にチェックする関数を呼び出し、データの受信が完了していたらデータを表示するように変更してみます。
JavaScriptにおいてイベントが発生した時に関数を呼びだすには次のように記述します。
オブジェクト名.イベント名 = イベント発生時に実行する関数;
今回は「XMLHttpRequest」オブジェクトの「onreadystatechange」イベントが発生した時に関数を呼び出しますので例えば次のように記述します。
xmlHttp.onreadystatechange = checkReadyState;
function checkReadyState(){
// サーバからのデータ受信の状態をチェック
}
データの受信状況については「readyState」プロパティの値と「status」プロパティの値をチェックします。(※各プロパティの詳しい値については『XMLHttpRequestオブジェクトのメソッドとプロパティ』を参照して下さい)。
xmlHttp.onreadystatechange = checkReadyState;
function checkReadyState(){
if (xmlHttp.readyState == 4 && xmlHttp.status == 200){
// サーバからのデータ受信が正常に完了
}
}
なお「onreadystatechange」イベントに関する設定(イベントハンドラに関する設定)は、サーバに対する通信を行う「send」メソッドを実行する前に設定しておく必要があります。最終的な形は次のようになります。
var xmlHttp;
xmlHttp = new XMLHttpRequest();
xmlHttp.onreadystatechange = checkReadyState;
xmlHttp.open("GET", "http://www.ajaxtower.jp/sample/plan.txt", false);
xmlHttp.send(null);
function checkReadyState(){
if ((xmlHttp.readyState == 4) && (xmlHttp.status == 200)){
alert(xmlHttp.responseText);
}
}
サンプルプログラム
では実際に試して見ます。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0.1//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" Content="text/html;charset=Shift_JIS">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>非同期通信テスト</title>
<script type="text/javascript">
<!--
var xmlHttp;
function loadText(){
xmlHttp = new XMLHttpRequest();
xmlHttp.onreadystatechange = checkStatus;
xmlHttp.open("GET", "http://www.ajaxtower.jp/sample/plan.txt", true);
xmlHttp.send(null);
}
function checkStatus(){
if (xmlHttp.readyState == 4 && xmlHttp.status == 200){
alert(xmlHttp.responseText);
}
}
// -->
</script>
</head>
<body>
<h1>非同期通信テスト</h1>
<form>
<input type="button" value="ファイル読み込み" onClick="loadText()">
</form>
</body>
</html>
上記のHTMLページをブラウザで見てみると次のように表示されます。
HTMLページ内のボタンをクリックすると、サーバからファイルを読み込み、データの受信が完了するとファイル内に記述されたテキストをダイアログで表示します。
( Written by Tatsuo Ikura )
AjaxTower