CBL Partial Updater

1. はじめに

　CBL Partial Updater は、PHP 用の AJAX ライブラリです。本ライブラリは他のライブラリとは異なり、全ての操作をサーバーサイドで制御します。本ライブラリを使用すると、既存のPHPアプリケーションに AJAX 機能を容易に追加できます。
　PHP と HTML に数行のコードを足して、AJAX アプリを作成しましょう。

2. ダウンロード

最新バージョンの CBL Partial Updater は SourceForge にて提供されています。詳しくは、プロジェクトページをご参照ください。

3. 必要なソフトウェア

PHP4	CBL Partial Updater は現在のところ PHP4 用に開発されています
HTML Parser for PHP 4	PHP4 で使用可能な HTML パーサです
prototype.js	AJAX をサポートする JavaScript ライブラリです

4. 動作例

　動作例については、こちらをご覧ください。
　また、開発者のブログ (日本語, 英語) も参考になるかもしれません。

5. 使い方

5.1. HTML の編集

　prototype.js と partialupdater.js を HTML から読み込んでください。
　次に、HTML のどの部分を差分更新するか決め、更新する箇所を SPAN または DIV タ グで囲み、ユニークな ID をセットしてください。
　フォームの onSubmit ハンドラ (または、input type=submit フィールドの onClick ハンドラ) から CBL_PartialUpdater.update を呼び出してください。

<script language="JavaScript" src="prototype.js"></script>
<script language="JavaScript" src="partialupdater.js"></script>
...
<span id='count'><% = $num %></span>
...
<form onSubmit="CBL_PartialUpdater.update('index.php', this); return false">
...
</form>

5.2. PHP コードの編集

5.2.1. Smarty を使用している場合

　Smarty を使用している場合は、 smarty->display の呼び出しをCBL_PartialUpdater::display に変更するだけです。その際、引数に差分更新するHTML 要素の ID を設定してください。
　partialupdater.class.php をロードするのを忘れないでください。

require_once 'partialupdater.class.php';
...
CBL_PartialUpdater::display($smarty, 'index.tpl', 'count');

5.2.2. Smarty を使用していない場合

　HTML 出力をする前に ob_start を呼ぶようにしてください。プログラムの最後で CBL_PartialUpdater::ob_end_flush を呼び、引数に差分更新する HTML 要素の ID を設定してください。

require_once 'partialupdater.class.php';
...
ob_start();
...
your HTML output code
...
CBL_PartialUpdater::ob_end('count');

5.3. 終了

　おめでとうございます。あなたの PHP プログラムは、 AJAX に対応しました！

6. さらに

6.1. インクリメンタル検索のサポート

　HTML 内で CBL_PartialUpdater.update を呼ぶ代わりに CBL_PartialUpdater.liveUpdate を呼び出してください。ライブラリがフォームの変更を検知し、HTML を更新してくれます。

window.setInterval("CBL_PartialUpdater.liveUpdate('index.php', document.theForm);", 500);

6.2. インジケータの表示

　CBL_PartialUpdater.update (および CBL_PartialUpdater.liveUpdate) の第３パラメータを使用して、リクエストメソッド等さまざまなオプションを CBL Partial Updater とその下層にある prototype.js に渡すことができます。
　たとえば、AJAX を使用してコンテンツの更新中にインジケータを表示することも簡単です。

<img id="spinner" src="blank.gif" width="18" height="18" />
...
CBL_PartialUpdater.update('index.php', this, { spinnerId:'spinner', spinnerImg:' spinner.gif' });

6.3. 開発者のブログ

　さらなる情報と議論については、開発者のブログを参照ください: Kazuho @ Cybozu Labs (日本語), Kazuho at Work (英語)