builder Top
RIA/Ajax
- Flash
- YUI
- Ajax
- ColdFusion
- GWT
- ...

Prototype.jsコトハジメ

原井彰弘

2008/01/29 15:00

Ajaxアプリケーションの作成を楽にしてくれるPrototype.jsの使い方をイチから説明しよう。

　Prototype.jsは、コードの記述を楽にしてくれるJavaScriptオブジェクトと関数のライブラリだ。Prototype.jsにはAjaxによる通信を扱う多数のオブジェクトが含まれているため、特にAjax開発で威力を発揮する。もはやAjaxのために大量のコードを書く必要はないのである。

　Prototype.jsを利用するには、最新のバージョンをダウンロードしてprototype.jsという名前でファイルに保存し、次のようにしてページ内にインポートすればよい。

<script type="text/javascript" src="prototype.js"></script>

　Prototype.jsでは、Ajaxの機能はAjaxクラスに含まれている3つのオブジェクト「Ajax.Request」「Ajax.Updater」「Ajax.Responders」が核となる形で提供されている。

Ajax.Request

　Ajax.Requestオブジェクトは、XMLHttpRequestオブジェクトの設定を行う際によく利用されるコードをカプセル化している。また、ブラウザの互換性に関するチェックや、コールバックの処理も行われている。

　以下の例では、入力されたユーザ名の値が利用可能であるか、それともすでに利用されているかをチェックしている。

　まず、ユーザ名が入力されるテキストフィールドは以下のようになっている。

<body>
	<form>
    Please enter a username:
    <input type="text" id="username" onchange="checkAvailability()" />
	</form>
</body>
</html>

　テキストフィールドの要素にはidが割り当てられており、後からJavaScriptで参照できるようになっている。このテキストフィールドに入力が行われると、checkAvailability()関数が呼び出される。以下に、その関数の定義を示そう。

var url = "checkAvailability.php"; 
 
function checkAvailability() {
  new Ajax.Request(url, {
      method: 'get',
      parameters: { username: document.getElementById('username').value },
      onSuccess: process,
      onFailure: function() { 
      alert("There was an error with the connection"); 
    }
  });
}

　この関数では、Ajax.Requestオブジェクトの初期化を行いリクエストを扱っている。また、url変数には後ほど説明するサーバサイドのスクリプトを指定している。ここで、Ajax.Requestは2つのパラメータを受け取っている。一つはスクリプトのURLで、もう一つはAjaxの呼び出しに必要となる複数のパラメータを保持したオブジェクトだ。ここでは、パラメータにはHTTPのメソッドとコールバック関数、そしてスクリプトに送信されるユーザ名の値を指定している。process関数はonSuccessコールバックに渡され、また、onFailureコールバックには、サーバとの接続でエラーが起こった場合にalertを表示する関数を指定している。ここで、process関数を以下に示そう。

function process(transport) {
  var response = transport.responseText;
  if(response == 'available')
    alert("This username is available");
  else
    alert("This username is already registered, please choose another");  
}

　サーバから応答があると、その値はresponseTextプロパティに格納される。このケースでは、サーバは「available」もしくは「unavailable」という値を返すので、ユーザにはその値に応じて利用可能かどうかを知らせるしくみになっている。

　一方、サーバサイドのスクリプトcheckAvailability.phpでは、ユーザ名がすでに利用されているかどうかをチェックする必要がある。ここでは例を単純にするために、利用されているユーザ名は配列に保存されていることとしよう。

<?php
  $usernames = array('neb', 'lkovacev10', 'emuns','ena5','dado17','lara', 'amela12', 'zozo');

  if(in_array($_GET['username'], $usernames))
  	echo 'unavailable';
  else
    echo 'available';
?>