XMLHttpRequestによるWebサーバーとの通信

JavaScriptでWebページ開発をしていると、JavaScriptからWebサーバーとの通信を行いたくなることがあります。JavaScriptで開発したゲームの途中経過や得点をサーバー側で処理したり、簡単なアンケートを作成し集計結果や選択結果に応じた情報を表示したり……とJavaScriptでWebサーバーと通信が出来れば、わざわざPOST/GETで通信(ページ全体の再読み込みと画面の再構成)を行うことなく簡単に処理することが出来ますね。

このようなJavaScriptとWebサーバーとのhttp通信を実現するのが、XMLHttpRequestオブジェクトです。XMLHttpRequestは、JavaScriptとWebサービスを組み合わせるAJAXで有名になり、多くのライブラリやWebアプリケーションで活用されています。

今回は、このXMLHttpRequestオブジェクトで簡単なテキストファイルを取得し、JavaScriptによる通信処理の基本を確認してみましょう。

まず、XMLHttpRequestによる通信全体の流れは以下のようになります(エラー処理やステータス確認は省略)。

  1. XMLHttpRequestオブジェクトを生成
  2. open()で送信方式やアドレス、非同期フラグなどの設定を行う
  3. send()で(データがあれば)データを送信し、通信開始
  4. 応答を得たら、responseTextやresponseXMLからデータを取得

通信処理の最も簡単な例(GETの同期処理)としては、以下のようになります。

var req = new XMLHttpRequest();

req.open("get", "test.txt", false);
req.send("");

alert(req.responseText);

この例では、open()の第三引数として設定する非同期フラグをfalseに設定したので、通信は同期して、つまりsend()は応答を取得し終わるまで制御を返さずブロックされます。こうした状況は、Webページに埋め込むスクリプトとしては好ましくないので、実際にWebページ内で通信処理を行う際は非同期フラグをtrueに設定し、サーバーからの応答はイベントハンドラで処理することになるでしょう。

イベント駆動による非同期の通信を行う場合は、XMLHttpRequestオブジェクトのonreadystatechangeに通信状態が変化したら送られてくるイベントを処理するイベントハンドラを設定し、そのイベントハンドラで「通信が完了したら結果を処理する」ようにします。通信完了の確認は、readyStateプロパティが「4」になっているかどうかで判別できます。

FirefoxやChromeなど一部のWebブラウザでは、XMLHttpRequestでローカルファイルにもアクセスできるようです。試しに、以下のHTMLファイルをテキストファイルtest.txtと同じディレクトリに置いてWebブラウザで開いてみましょう。

<html>
<body>

<script type="text/javascript">

var req = new XMLHttpRequest();

function loadText(path) {

	req.onreadystatechange = readyStateChange;

	// リクエスト発行
	req.open("get", path, true);
	req.send("");

}

// 通信状態変化時イベントハンドラ
function readyStateChange() {

	// 通信完了なら受信したテキストを表示
	if(req.readyState == 4) {
		alert(req.responseText);
	}

}

</script>

<button onclick="loadText('test.txt')">受信テスト</button>

</body>
</html>

「受信テストボタン」をクリックすると、test.txtの内容が読み込まれ表示されたはずです。できれば、WebサーバーにもアップしてWebサーバー上のファイルを取得できることも確認してみましょう。

ただし、Webサーバー上では通信時の問題などで正常に取得できない可能性もあるので、通信ステータスを保持するstatusを確認し、200(正常に取得できた)になっていない場合はエラー処理を入れるようにすべきでしょう(ローカルファイルを読み込む場合は、statusは機能しないようです)。

以上、XMLHttpRequestオブジェクトによる通信処理の流れを見てみました。JavaScriptでWebサーバーと送受信が行えるようになれば、Web(AJAX)アプリケーションの可能性も広がりますね。


創作プログラミングの街