これまでページ上に文字やHTMLデータを出力する場合、以下のように指定していました。
document.getElementById("ID名").innerHTML = "表示する文字列"
prototype.jsでは以下のように短く記述することができます。
$("ID名").innerHTML = "表示する文字列"
以下のサンプルはサーバー上にあるsample.txtファイルを読み込んでページ内に表示するものです。（サンプルを
実行する）
<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)
{
$("result").innerHTML = 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>
<div id="result"></div>
</body>
</html>
prototype.jsの$()はカッコ内に,(カンマ)で区切って複数のID名を指定することができます。複数のID名を指定した場合に、配列としてID名を持つオブジェクトへの参照が返されます。以下のサンプルは2つの場所に同じデータを出力します。（サンプルを
実行する）
<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()
{
var httpObj = new Ajax.Request("sample.txt", { method: 'get', onComplete: displayData });
}
function displayData(responseHttpObj)
{
divObj = $("result1","result2");
for(var i=0; i<divObj.length; i++)
{
divObj[i].innerHTML = 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>
結果１：
<div id="result1"></div>
結果２：
<div id="result2"></div>
</body>
</html>
入力フォームやテーブルなどに、まとめてデータを出力したり読み込む場合に便利です。また、以下のようにID名だけでなくオブジェクトを渡す事もできます。$()は,（カンマ）で区切って複数のオブジェクト（エレメント）を指定することができます。この場合、指定されたオブジェクトは配列に格納されます。ele =$("id1","id2","id3")であればele[1]のようにしてアクセスすることが可能です。
以下のサンプルは先ほどのサンプルと同様の動作ですが、ID名result2はオブジェクトデータを渡して表示するようにしています。（サンプルを
実行する）
<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()
{
var httpObj = new Ajax.Request("sample.txt", { method: 'get', onComplete: displayData });
}
function displayData(responseHttpObj)
{
obj = document.getElementById("result2");
divObj = $("result1",obj);
for(var i=0; i<divObj.length; i++)
{
divObj[i].innerHTML = 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>
結果１：
<div id="result1"></div>
結果２：
<div id="result2"></div>
</body>
</html>
[
付録 3:手軽にデータをページ上に出力するへ]
[
目次へ]
(2006.2.6, 2006.8.25追加修正)