ココを理解すれば近道な「Ajaxフレームワーク」：Web 2.0で変わるWebプログラミングの常識（4/5 ページ）

» 2006年08月30日 11時00分 公開
[大澤文孝，ITmedia]
前のページへ 1|2|3|4|5 次のページへ

HTMLへの流し込みとJSON評価

　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要素へと挿入できる。

リスト7■Ajax.Updaterを使った例

<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>
前のページへ 1|2|3|4|5 次のページへ

Copyright © ITmedia, Inc. All Rights Reserved.

注目のテーマ