日記
HTML_AjaxHandlerのサンプルその2Edit

一番基本となる、Ajax.Requestを使うパターンを作ってなかったんで、そっちも作ってみた。

デモの内容は、最小値と最大値を入力してフォームをsubmitする(Σボタンをクリック or ENTERキーを押す)と、最小値から最大値までを加算した式と結果を表示する。

HTMLは、

<form id="rangeform">
min: <input type="text" name="min" id="min" />
max: <input type="text" name="max" id="max" />
<input type="submit" value="Σ">
</form>
<span id="range"></span>

な感じで、HTML_AjaxHandlerでハンドラーを登録するPHPコードは、

require_once 'HTML/AjaxHandler.php';
$ajax =& new HTML_AjaxHandler();
$ajax->addHandler(
'rangeform',
'submit',
array(
'url' => 'api.php',
'method' => 'get',
'parameters' => 'command=range',
'onSuccess' => 'rangeSuccess',
)
);
echo $ajax->toJavaScript();

な感じになる。前のデモと違って、containerがセットされていないから、使われるAjax.*はAjax.Requestになる。で、onSuccessのコールバック関数はrangeSuccessね。

わざわざAjax.Requestを使う意味をだすために、サーバーサイド(api.php?command=range&min=[最小値]&max=[最大値])では、

$min = intval($_GET['min']);
$max = intval($_GET['max']);
$range = range($min, $max);
$sum = 0; foreach ($range as $num) {$sum += $num;}
echo '{expression: "' . implode(' + ', $range) . '", sum: ' . $sum . ' }';

なんて感じでJSON形式で結果を返している。で、Ajax.RequestのonSuccessコールバックに登録されたrangeSuccess関数では、

function rangeSuccess(res)
{
eval('var result = ' + res.responseText + ';');
var html = result['expression'] + ' = ' + result['sum'];
$('range').innerHTML = html;
}

なんて感じで、evalして計算式文字列と結果数値を取り出して、その内容から出力を組み立てている。

なんてのが、Ajax.Request+自前のコールバック関数を使った場合の記述パターンになる。

Published At2006-03-11 00:00Updated At2006-03-11 00:00