prototype.jsではページ内にデータを表示する場合にはAjax.Updaterを使えば１行でできてしまいます。Ajax.Updaterは以下のように使います。
new Ajax.Updater(ID, URL, { method: メソッド });
読み込まれた内容を<div id="abc">に出力（表示）したい場合には"abc"と指定します。メソッドはgetまたはpostを指定します。
以下のサンプルはサーバー上にある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.Updater("result","sample.txt", { method: "get" });
}
// --></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>
読み込むファイルが頻繁に更新されるのであれば以下のようにキャッシュされないようにする必要があります。
サンプルを
実行する）
<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 sURL = "sample.txt?cache="+(new Date()).getTime();
new Ajax.Updater("result",sURL, { method: "get" });
}
// --></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>
[
目次へ]
(2006.3.9)