HOME > 技術情報 > Ajax > prototype.js

prototype.js

prototype.jsとは?

公式サイトより(http://www.prototypejs.org/)

Prototype is a JavaScript Framework that aims to ease development of dynamic web applications.

「Prototypeとは、動的Webアプリケーションを簡単に開発することを目的としたJavaScriptフレームワーク」ということである。
中身は、Ajax用クラス、DOM操作等のユーティリティ関数、基本クラスの拡張関数が用意されている。
感覚はフレームワークと言うようライブラリに近い。

ダウンロード

http://www.prototypejs.org/download
から最新版をダウンロードする。
2007/04/27現在 version―1.5.0

サンプル

Ajax - new Ajax.Request()

もっとも簡単なAjaxのサンプルを作成する。
非同期通信を行うには、Ajax.Requestクラスを使用する。
サンプルの実行 サンプルファイルダウンロードもこちら

  • ソース
    »HTML - hello.html
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=EUC-JP">
    	<title>prototype.js Ajax - 株式会社トランスアーツ</title>
    	<script language="JavaScript" type="text/javascript" src="./hello.js"></script>
    	<script language="JavaScript" type="text/javascript" src="../prototype.js"></script>
    </head>
    <body>
    	<h1>prototype.js</h1>
    	<p onclick="hello()">ここをクリックすると</p>
    	<p id="message">ここにメッセージが表示されます</p>
    	<hr>
    	<h2>サンプルコードファイルダウンロード</h2>
    	<ul>
    		<li><a href="./hello.html">HTML - hello.html</a></li>
    		<li><a href="./hello.js">JavaScript - hello.js</a></li>
    		<li><a href="./hello.php">サーバ側PHP - hello.php</a></li>
    	</ul>
    </body>
    </html>

    »JavaScript - hello.js
    function hello() {
    	new Ajax.Request(
    		'hello.php', 
    		{
    			method:'get', 
    			onSuccess:function(req){
    				document.getElementById('message').innerHTML = req.responseText;
    			}
    		});
    
    }

    »サーバサイド(PHP) - hello.php
    <?php
    	header( "Content-Type: text/html; charset=EUC-JP");
    	// クライアントに返す値
    	echo "Hello Ajax!!";
    ?>
  • 解説

    »JavaScript - hello.js
    new Ajax.Request(
    	'hello.php', 
    	{
    		method:'get', 
    		onSuccess:function(req){
    			$("message").innerHTML = req.responseText;
    		}
    	});
    Ajax.Requestオブジェクトを生成する.
    引数
    • 第1引数:リクエスト先のURL
    • 第2引数:オプション
      オプション名説明
      method通信方式(GET送信:get、POST送信:post)
      onSuccessレスポンスが受信が完了し、HTTPステータスコードが2xx系時に呼び出される関数

      その他指定できるオプションの一部

      オプション名説明
      asynchronous非同期通信か(true:Ajax、false:Sjax)
      postBodyPOST送信時のボディ部(パラメータ変数=値&パラメータ変数=値)
      onFailureレスポンスが受信が完了し、HTTPステータスコードが2xx系以外の時に呼び出される関数
      onExceptionXMLHttpRequestオブジェクト内でエラーが発生した際に呼び出される関数
      onXYZ「XYZ」にHTTPステータスコード(正常終了:200,ファイルが見つからない404)を記述し、記述したHTTPステータスコードが返された時に呼び出される関数

Ajax - new Ajax.Request() パラメータ送信

上記のサンプルでパラメータ付き送信するサンプルを作成する。
サンプルの実行 サンプルファイルダウンロードもこちら

  • ソース
    »HTML - hello.html
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=EUC-JP">
    	<title>もっともシンプルなAjax通信 - 株式会社トランスアーツ</title>
    	<script language="JavaScript" type="text/javascript" src="./hello.js"></script>
    	<script language="JavaScript" type="text/javascript" src="../prototype.js"></script>
    </head>
    <body>
    	<h1>prototype.js - パラメータ送信</h1>
    	<p>言語を選択すると</p>
    	<form name="helloForm">
    		<input type="radio" name="lang" value="ja" onclick="hello()">日本語
    		<input type="radio" name="lang" value="en" onclick="hello()">英語
    	</form>
    	<p id="message">ここにメッセージが表示されます</p>
    	<hr>
    	<h2>サンプルコードファイルダウンロード</h2>
    	<ul>
    		<li><a href="./hello.html">HTML - hello.html</a></li>
    		<li><a href="./hello.js">JavaScript - hello.js</a></li>
    		<li><a href="./hello.php">サーバ側PHP - hello.php</a></li>
    	</ul>
    </body>
    </html>

    »JavaScript - hello.js
    function hello() {
    	var lang = getRadioValue(document.helloForm.lang);
    	var reqParam = 'lang=' + lang;
    	new Ajax.Request(
    		'hello.php', 
    		{
    			method:'get', 
    			parameters:reqParam,
    			onSuccess:function(req){
    				document.getElementById('message').innerHTML = req.responseText;
    			}
    		});
    }
     
    /**
    * 選択されているラジオボタンの値を取得する.
    * @param {Object} radioButton
    */
    function getRadioValue(radioButton) {
    	var radioNum = radioButton.length;
    	for (var i = 0; i < radioNum; i++) {
    		if (radioButton[i].checked) {
    			return radioButton[i].value;
    		}
    	}
    	return "";
    }

    »サーバサイド(PHP) - hello.php
    <?php
    	
    	$lang = $_GET['lang'];
    	
    	$message = null;
    	if ("ja" == $lang) {
    		$message = "こんにちは、Ajax";
    	} else if ("en" == $lang){
    		$message = "Hello Ajax!!";
    	} else {
    		$message = "言語を選択してください";
    	}
    	
    	header( "Content-Type: text/html; charset=EUC-JP");
    	echo $message;
    ?>
  • 解説

    »JavaScript - hello.js
    	new Ajax.Request(
    		'hello.php', 
    		{
    			method:'get', 
    			parameters:reqParam,
    			onSuccess:function(req){
    				document.getElementById('message').innerHTML = req.responseText;
    			}
    		});
    Ajax.Requestクラスのコンストラクタのオプション指定の中で、「parameters」を定義し、パラメータを設定する。

prototype.jsの便利関数を使ってみる - $()

$()
オブジェクトの値を取得する(document.getElementById()のショートカット)
$()の引数にid名を渡すことでオブジェクトを取得することができる。

サンプルの実行 サンプルファイルダウンロードもこちら

  • ソース
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=EUC-JP">
    	<title>prototype.js Ajax - 株式会社トランスアーツ</title>
    	<script language="JavaScript" type="text/javascript" src="../prototype.js"></script>
    	<script>
    
    function func1 () {
    	var message = $('message').innerHTML;
    	alert(message);
    }
    	</script>
    </head>
    <body>
    	<h1>便利な関数</h1>
    	<h2>$()</h2>
    	<p onclick="func1()">ここをクリックすると</p>
    	<p id="message">ここに書かれている文字がメッセージウィンドウに表示されます。</p>
    	<hr>
    	<h2>サンプルコードファイルダウンロード</h2>
    	<ul>
    		<li><a href="./function1.html">HTML&JavaScript - function1.html</a></li>
    	</ul>
    </body>
    </html>

prototype.jsの便利関数を使ってみる - $F()

$F()
フォームフィールドの値を取得する
取得可能な入力フォーム
■<input> - value属性値を取得 [type属性値]
  • button:ボタン
  • checkbox:チェックボックス
    • チェック有り:value値
    • チェック無し:null
  • file:ファイル選択フィールド
  • hidden:不可視フィールド
  • image:画像
  • password:パスワードフィールド
  • radio:ラジオボタン
    • チェック有り:value値
    • チェック無し:null
  • reset:リセットボタン
  • submit:サブミットボタン
  • text:テキストフィールド

    ■タグで囲まれた値を取得
  • textarea:テキストエリア
  • select option:プルダウンメニュー

サンプルの実行 サンプルファイルダウンロードもこちら

  • ソース
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=EUC-JP">
    	<title>prototype.js Ajax - 株式会社トランスアーツ</title>
    	<script language="JavaScript" type="text/javascript" src="../prototype.js"></script>
    	<script>
    
    function func21 () {
    	var text = $F('text');
    	alert(text);
    }
    
    function func22 () {
    	var text = $F('test');
    	alert(text);
    }
    
    	</script>
    </head>
    <body>
    	<h1>便利な関数</h1>
    	<h2>$F()</h2>
    	<h3>テキストフィールド</h3>
    	<p onclick="func21()">ここをクリックすると</p>
    	<p id="message">テキストボックスに書かれている文字がメッセージウィンドウに表示されます。</p>
    	<form>
    		<input id="text" type="text" value="test"/>
    	</form>
    	<br />
    	<br />
    	<h3>プルダウンメニュー</h3>
    	<p onclick="func22()">ここをクリックすると</p>
    	<p id="message">テキストボックスに書かれている文字がメッセージウィンドウに表示されます。</p>
    	<form>
    		<select id="test">
    			<option>項目A</option>
    			<option>項目B</option>
    			<option>項目C</option>
    			<option>項目D</option>
    		</select>		
    	</form>
    	<hr>
    	<h2>サンプルコードファイルダウンロード</h2>
    	<ul>
    		<li><a href="./function2.html">HTML&JavaScript - function2.html</a></li>
    	</ul>
    </body>
    </html>

トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2007-05-02 (水) 20:10:43 (4038d)