ここではprototype.jsを利用してみましょう。まず、以下のサイトからprototype.jsをダウンロードしましょう（この文章を執筆している時点では、バージョンは1.4.0です。特にバージョン表記がない場合は、この1.4.0を利用しているものとします）。
prototype.js
それでは、早速非同期通信を行ってみましょう。prototype.jsを使うには以下のようにして読み込ませます。
<script src="prototype.js" type="text/javascript"></script>
読み込むprototype.jsは利用する際の状況に合わせます。以下のサンプルでは実行するファイル同じディレクトリ内にprototype.jsが入っているものとします。
非同期通信を行う際にはブラウザごとに生成するオブジェクトが違ったり、読み込み完了時のイベントが違ったりして面倒な部分がありました。このような面倒な部分はprototype.jsでは気にする事なく利用できます。
prototype.jsで非同期通信を行うにはAjax.Request()を使います。最初の引数が読み込むファイルのURLになります。以後はメソッドや読み込み完了時に呼び出す処理を指定します。例えば以下の場合には、同じディレクトリ内にあるsample.txtファイルをgetメソッドで読み込みます。読み込みが完了したら関数displayDataを呼び出す動作になります。
new Ajax.Request("sample.txt", { method: 'get', onComplete: displayData });
読み込み完了後に呼び出される関数には通信が行われたオブジェクト(XMLHttpRequest)が引数として渡されます。読み込まれたテキストデータは以下のように指定して利用することができます。
function displayData(responseHttpObj)
{
alert((responseHttpObj.responseText);
}
実際のサンプルは以下のようになります。非常にシンプルなのが分かります。（サンプルを
実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>prototype.jsサンプル</title>
<script src="prototype.js" type="text/javascript"></script>
<script type="text/javascript"><!--
function readText()
{
new Ajax.Request("sample.txt", { method: 'get', onComplete: displayData });
}
function displayData(responseHttpObj)
{
alert(responseHttpObj.responseText);
}
// --></script>
</head>
<body>
<h1>prototype.jsサンプル</h1>
<form method="get" name="ajaxForm" onsubmit="readText();return false;">
<input type="submit" value="sample.txtを読み込み"><br>
</form>
</body>
</html>
ただし、prototype.jsを使えばブラウザ非互換部分が全部吸収されるわけではありません。例えばSafari 2でのUTF-8の
BOMあり、と
BOMなしの実行結果は、BOMなしでは文字化けしてしまいます。日本語まわりには、やはり気を使う必要があります。
prototype.jsを使えば面倒なことが（低レベル部分では）かなり簡単になります（同時通信サンプルを
実行する）。他にもいろいろ便利な機能が提供されており、以下のページで解説されていますので参考にすると良いでしょう。
prototype.jsの使い方
[
付録 2:データをページ上に出力するへ]
[
目次へ]
(2006.2.6, 2006.8.25修正)