そのサービスはAjaxフレームワークで一変できるか？：Web 2.0で変わるWebプログラミングの常識（2/4 ページ）

「prototype.js」と呼ばれるJavaScriptフレームワーク。多くのAjaxを応用したサービスで使われている「Ajaxフレームワークのデファクト」だ。

[大澤文孝，ITmedia]

1. ショートカットやユーティリティ関数

　prototype.jsでは、「$」で始まる幾つかのショートカット関数が提供されている（表1）。

　例えば、「$()関数」は、document.getElementById関数のショートカット機能を提供する。つまり、次のような

*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***

div要素がある場合には、

*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***

このように記述して、その内容を置換できるのだ。

　また入力フォームを構成するときに便利なのが「$F()関数」だ。

　例えば、

*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***

のようなテキストボックスがある場合、

*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***

のように記述して、入力された文字列を取得できる。

表1■ショートカット関数

関数名	意味
$()	指定したid要素をもつ要素を返す
$F()	指定したid要素をもつ入力フィールドに入力されている値を返す
$A()	イテレータを展開して、その配列をArrayオブジェクトとして返す
$H()	オブジェクトのプロパティ／値のペアをHashオブジェクトに変換する
$R()	下限、上限を指定してループ構成を作るための構文を提供する

　prototype.jsでは、JavaScriptの組み込みクラスも拡張される。例えば、文字列を示すStringhオブジェクトには、HTML（XML）タグを取り除くstripTagsメソッドやHTMLエスケープするescapeHTMLなどのメソッドが追加される。

　またDOMツリーを操作する便利なオブジェクトとして「Elementオブジェクト」が提供されている。Elementオブジェクトを用いると、要素を挿入・削除したり、表示／非表示の切り替え、そして特定のCSSを適用したり、要素の幅／高さを取得する操作ができる。

　これらの操作については、「Developer Notes for prototype.js」を参照してほしい。

2. Ajax機能

　prototype.jsにおいて、Ajax機能を提供するのが、Ajaxオブジェクトだ。

　Ajaxオブジェクトは、XMLHttpRequestオブジェクトによるHTTP通信をラップするものだ（そしてブラウザの違いを適時吸収する）。

表2■prototype.jsで提供されるAjax関連のオブジェクト

オブジェクト	内容
Ajax.Request	XMLHttpRequestで通信する
Ajax.Updater	XMLHttpRequestで通信をし、その結果をページの特定の要素内に差し込む
Ajax.PeriodicalUpdater	Ajax.Updaterを用いて一定間隔でコンテンツを再取得し直す
Ajax.Responders	Ajaxのイベントを管理する