Prototype.jsコトハジメ

原井彰弘
2008/01/29 15:00

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

Ajax.Updater

　Ajax.UpdaterはAjax.Requestオブジェクトの拡張だ。Ajax.Updaterでは、Ajaxリクエストを処理すると共に、サーバから返された情報でページの更新を行う。

new Ajax.Updater(container, url[, options])

　コードを見てお分かりのように、Ajax.Updaterは3つのパラメータを受け取る。新しく増えたパラメータ「container」では、サーバから返された情報の表示を行うHTMLのコンテナもしくは位置を指定する。以下の例では、利用者がボタンをクリックすると、<div>要素の内容に異なった種類の果物が表示される。

<body>
  <div id="saladContainer">Empty </div>
  <button onclick="fruitSalad()">Fill it with fruit </button>
</body>

　fruitSalad()関数のコードを以下に示そう。関数の内部ではAjax.Updaterオブジェクトが作成され、パラメータとして<div>要素のid、リクエストの送信先URL、そしてHTTPメソッド（この場合は「get」）が渡されている。

function fruitSalad () {
  new Ajax.Updater('saladContainer', 'fruit.php', { method: 'get' });
}

　次はfruit.phpスクリプトである。このスクリプトでは、配列から異なった種類の果物を取得する処理を行う。

<?php
$fruits = array('oranges', 'bananas', 'grapes', 'strawberries', 'watermelon', 'apples'); 

for($i = 0; $i < sizeof($fruits); $i++)
  echo $fruits[$i] . "<br />";
?>

　補足だが、Ajax.PeriodicalUpdaterを利用すると、サーバからの応答が変化しない場合でも一定の間隔で内容を更新することが可能だ。この処理を行うには、frequency属性に、何秒後に内容を更新したいのかを指定すればよい。たとえば、frequency: 5という設定を行うと、内容は5秒ごとに更新される。

記事の感想やご意見をコメントでお寄せください（CNET_IDログインが必要です）
ログイン パスワードを忘れた方  |  新規登録
10/23 ZDNet Japan Social Technology Conference開催！
ソーシャルテクノロジーをビジネスに利用する
米フォレスター・リサーチ社 シニアアナリスト Jeremiah K.Owyang氏を迎え、同氏が提唱するソーシャルテクノロジーを効果的に活用方法するための方法『POST』を日本で初めて紹介する注目のリアルイベント
  • 今日のトップ記事
  • 昨日
  • 2日前
  • 5日前
  • 6日前
  • 7日前
  • 新着記事
  • 人気記事
  • 特集
  • ブログ
  • 話題のタグ
Safari Apple Flash プロジェクト管理 HTML Database 小技 UI Mozilla Python Firefox 3 server 開発環境 脆弱性 PHP iPhone 3G RIA Windows SOA Internet Explorer レビュー 仮想化 入門 ソフトウェア開発 JavaScript Mac OS X Linux リファレンス デザイン ブラウザ モバイル Adobe Google プログラミング言語 Off Topic 携帯電話機 オープンソース iPod touch Ajax Webデザイン データベース Firefox Webサービス Tips Webアプリケーション開発 CSS iPhone 仮想化ソフトウェア ユーザーインタフェース Java
  • 話題のタグを見る »