prototype.jsを使用してみる。

全く触ったことがなかったJavaScriptだけど、動かしてみて大体わかった。それで、次は世間でよく言われてるprototype.jsの使い方を学んでみる。

参考にしたサイト

とりあえずAjaxでしょ？

サーバ側との非同期通信ってものに挑戦してみようと思う。まずはHTMLの記述から。Ajax.Updateという関数が使えそうだと思って、グーグル先生に教えを請うと、やっぱりそれっぽい。Ajax.Updaterで指定したIDのElementの記述を変更できるようだ。ということで、以下実装。

sample.html

<html>
<head>
<title> prototype.js サンプル </title>
<head>
<script type="text/javascript" src="./js/prototype.js"></script>
<script type="text/javascript">
<!--
function ajaxReq(url){
	new Ajax.Updater(
		// 変更を加えるやつのID
		"result",
		// 呼び出すサーバファイル
		"./test.php",
		{
			// 受け渡しのメソッド
			"method": "get",
			// 受け渡すパラメータ
			"parameters": "a=b&c=d&e=f",
			onSuccess: function(request) {
				// 成功時の処理を記述
				alert('成功しました');
			},
			onComplete: function(request) {
				// 完了時の処理を記述
				alert('読み込みが完了しました');
			},
			onFailure: function(request) {
				alert('読み込みに失敗しました');
			},
			onException: function (request) {
				alert('読み込み中にエラーが発生しました');
			}
		}
	);
}
//-->
</script>
</head>
<body>
<h1>非同期通信でページ上に読み込んだデータを表示する</h1>

<form>
<input type="button" value="サーバと通信" onClick="ajaxReq('sample.txt')">
</form>

<div id="result"></div>

</body>
</html>

sample.php

<?php
	echo "うまくいったか？";
?>

総評

上記のサンプルを実行すると、

「成功しました」ポップアップ出現
result部分に「うまくいったか？」が記載
「読み込みが完了しました」ポップアップ出現

っと、動く。

ひじょ〜に単純ですね。Ajaxだとか非同期通信だとか言われててものすごく心配してたんだけど、これなら簡単。DBとの通信とかもこれで出来るはずだと思う。sample.phpの記述の内容を少々変更して、DBをUpdateしてUpdateした結果を返すとかやってやればいいんでしょ？多分・・・。もうちょっとうまいやり方があるかもしれないけどそれはおいおいということにしておきます。