prototype.jsでは、このようにAjax.Requestオブジェクトを使ってAjax通信するのが基本だが、ほかにもAjax操作を簡単にする機能が提供されている。
1. Ajax.Updaterを使った流し込み
Ajaxアプリケーションの構成によっては、サーバ側のプログラムがXMLデータを返すのではなく、直接ユーザーへと出力するHTMLを返すこともある。そのような場合に便利なのが、Ajax.Updaterオブジェクトを使った呼び出し方法だ。
Ajax.UpdaterはAjax.Requestから継承したクラスであり、サーバから得られたHTMLデータを特定のid値をもつ要素へと差し込む処理を実現する。
実際にAjax.Updaterを使った例を見てみよう。例えば、サーバサイドのプログラムとして、次のように結果をHTMLで返すものがあるとしよう。
<?php
$value1 = $_POST['value1'];
$value2 = $_POST['value2'];
$addvalue = $value1 + $value2;
$diffvalue = $value1 - $value2;
$result = "和:$addvalue" .
"差:$diffvalue";
header("Content-Type: text/html");
print mb_convert_encoding($result, 'UTF-8');
?>
このような出力プログラムがある場合、Ajax.Updaterを使うと、リスト7のようにして、その結果をdiv要素へと挿入できる。
<html>
<head>
<script type="text/javascript" src="https://image.itmedia.co.jp/enterprise/articles/0608/30/prototype.js">
</script>
<script type="text/javascript">
<!--
function calc()
{
// パラメータを作成
var parameter =
"value1=" + $F('value1').escapeHTML() + "&" +
"value2=" + $F('value2').escapeHTML();
// Ajax.Updaterオブジェクトを作成
var myAjax = new Ajax.Updater(
'placeholder', // 差し込む要素
'http://example.jp/calc.php', // 呼び出し先のURL
{
method: 'post', // メソッド
postBody: parameter, // ポストされるボディ部
onFailure: AjaxFailed, // 呼び出しが失敗した時に呼び出されるメソッド
onException: AjaxException // 例外が発生した時に呼び出されるメソッド
}
);
}
function AjaxFailed(xmlobj, json)
{
// 呼び出しが失敗した時の処理
alert('エラーです:' + xmlobj.statusText);
}
function AjaxException(xmlobj, e)
{
// 例外が発生した時の処理
alert('例外です:' + e.message);
}
// -->
</script>
</head>
<body>
<p>テキストを入力してください。</p>
<form>
<input type="text" id="value1"/><br/>
<input type="text" id="value2"/><br/>
<input type="button" value="送信" onClick="javascript:calc();"/>
</form>
<div id="placeholder">
</div>
</body>
</html>
Copyright © ITmedia, Inc. All Rights Reserved.