prototype.jsの使い方
かなり久しぶりの投稿になります＾＾；
全く更新せずにほっときました。。。やっとやる気が出てきましたので、これからまったりと更新して行こうと思います。
今回は、prototype.jsのAjaxの機能を紹介します。
prototype.jsとはjavascriptのフレームワークのことで、フレームワークを使うメリットは
・ブラウザに依存することなく、記述することができる
・複雑な記述を簡潔にしてある
他にもあると思いますが、ざっと思いつく限りこんな感じです。
デメリットはprototype.js特有の記述をする為、人によっては見難くなると思います。
更にブラウザの依存がなくなると言っても、全てを吸収しきれるわけではないので注意して下さい。
以下のサイトからダウンロードして下さい。
prototype.js本家
参考までに、以下の「prototype.js の開発者向けメモ」で詳細まで使い方を紹介してくれています。
prototype.js の開発者向けメモ
まずは、「prototype.jsのテスト」ページをご覧下さい。
こちらのページが今回の完成品になるのですが、入力フォームにテキストを入力してボタンをクリックすると入力フォームに入力した内容が表示されるようになっています。
このぐらいであれば、Ajaxを使うまでもなく通常のjavascriptだけでも行けるのですが練習用にこのような形にしてみました。
prototype.js本家のサイトにある「Just the .js, please」リンクをクリックして、prototype.jsをダウンロードします。
次に適当なディレクトリ（ここでは「home」とします）を作ってその中に「js」ディレクトリを作り、「js」ディレクトリの中にprototype.jsを入れます。
「home」ディレクトリの中に、index.phpとajax.phpの２つのファイルを作ります。
最終的に以下のような構成になります。
[home]
└─ ajax.php
└─ index.php
│
└─[ js]
└─ prototype.js
次に「index.php」のbodyタグ内に入力用のフォームを作ります。
<input type="text" id="message" value=""><br>
<input type="button" value="prototype.jsをテストする" onClick="sampleAjax();">
続いてheadタグ内に
<script src="./js/prototype.js" type="text/javascript"></script>
を記述して「prototype.js」を読み込ませます。
その下に、Ajax用のjavascriptを記述して行きます。
function sampleAjax() {
var url = 'ajax.php?message=' + encodeURI($('message').value);
var ajax = new Ajax.Request(url , {method: 'get', onComplete: ajaxReturn});
}
ここでちょっと見慣れないスクリプトがあります。
「$('message').value」
これは何でしょう？実はこれが「prototype.js」の強力な機能の１つです。
inputタグのidに「message」と付けましたが、これを「$(id名)」とするだけでフォームに記述した内容を取り出すことができます。
つまり
document.フォーム名.message.value
を
$('message').value
としています。
id要素で記述できるタグなら何でも情報を取り出すことができるようです。
次の
new Ajax.Request(url , {method: 'get', onComplete: ajaxReturn});
これで、Ajaxを動かしています。これもprototype.js特有のやり方です。
Ajax.Request(url , {method: 'xxxx', onComplete: xxxx})
url：対象のURL（GETで渡す場合は、「?」の後ろに引数を指定する）
method：「get」か「post」を指定（'「シングルクォーテーション」で囲む）
onComplete：対象のURLから処理が終わった後に呼び出す関数名
更に、以下のスクリプトを追加します。
function ajaxReturn(request) {
alert(request.responseText);
}
「Ajax.Request」の「onComplete」で「ajaxReturn」と記述しました。Ajaxの処理後に、ajaxReturnの関数を呼び出してくれます。
では、ajaxReturnの引数にある「request」は何でしょう？
これはurlから返された値を参照する為に使用します。
例えば、ajax.phpに
<?php
echo "フォームに入力された内容は：「".$_GET['message']."」です";
?>
と記述してあったとします。ajax.phpでechoされた値が、「ajaxReturn」の引数「request」の中に格納されるのです。
request.responseText
で、受け取ったテキストをそのまま取り出すことが可能になります。
今までのスクリプトをまとめると
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>prototype.jsのテスト</title>
<script src="./js/prototype.js" type="text/javascript"></script>
<script type="text/javascript">
<!--// Ajaxサンプルプログラム
function sampleAjax() {
var url = 'ajax.php?message=' + encodeURI($('message').value);
var ajax = new Ajax.Request(url , {method: 'get', onComplete: ajaxReturn});
}// Ajax処理後に動作するプログラム
function ajaxReturn(request) {
alert(request.responseText);
}//-->
</script>
</head><body>
<input type="text" id="message" value=""><br>
<input type="button" value="prototype.jsをテストする" onClick="sampleAjax();">
</body>
</html>
このような感じになります。
今回はprototype.jsを使ったAjaxの基本機能を紹介しました。
javascriptのフレームワークはこの他にも「jQuery」や「Yahoo!UIライブラリ」等、数多く存在します。
それぞれに特徴がありますので、一通り体験した上で自分にあったフレームワークをお使いになることをお勧めします。（私も他のフレームワークを勉強中です＾＾；）
・関連記事
jQueryを使ってみよう
Yahoo! UIライブラリを使ってみよう
HTML_AJAXを使ってみよう
今回の紹介に当たって、以下の本を参考にしました。
下記の本は、PHPやMySQLの基本からAjaxの基本まで紹介しています。
プログラムのことは分からないけど、１から勉強したい人やAjaxの基礎だけを勉強したい初心者向けです。
はじめに読みたいAjax ~入門から実践まで~
下記の本は、はじめに読みたいAjaxで物足りなかった人や、最低限の知識（PHP,Javascriptの基本）をマスターしている中級者向けです。
prototype.jsやYahoo!UIライブラリについても沢山掲載してあります。
Ajaxハッカーズ・プログラミング―基礎からprototype.js、Yahoo!UIライブラリ、HTML_AJAXの活用までWebアプリケーション制作のプログラミング・テクニック
