Ajax.Updaterオブジェクト
サーバ側のプログラムがXMLデータを返すのではなく、直接ユーザーへと出力するHTMLを返すことがある。
そのような場合に便利なのが、Ajax.Updaterオブジェクトを使った呼び出し方法です。
var myAjax = new Ajax.Updater(
'placeholder', // 差し込む要素
'http://localhost/test.php', // 呼び出し先のURL
{
method: 'post', // メソッド
postBody: 'id=1', // ポストされるボディ部
}
);
Ajax.Updater オブジェクトのコンストラクタの３番目のパラメータは、AJAX呼び出し時のオプションを示します。
{method: 'post', parameters: 'id=1'} という形(JSON書式)で記述します。
上記の例では、１番目の引数のURLに parametersプロパティの文字列を付加してHTTP POSTを呼び出します。その後、Ajax.Requestオブジェクトがレスポンスを取得し終わったら内容を１番目で指定した要素に差し込むという事になります。
Ajax.Updaterオブジェクトを用いたサンプル
<html>
<head>
<script type="text/javascript" src="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://localhost/test.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>