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

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

　リスト7の中には、次のようにid属性に「placeholder」と指定したdiv要素が含まれている。


<div id="placeholder">

　この場合、Ajax.Updaterオブジェクトを使って次のようにすると、Ajax通信によって得られたHTMLデータを、div要素へと差し込むことができる。


var myAjax = new Ajax.Updater(
  'placeholder', // 差し込み先の要素
  'http://example.jp/calc.php',  // 呼び出し先のURL
  {
    method: 'post',
    postBody: parameter,
    onFailure:  AjaxFailed, 
    onException: AjaxException
  }
);

　Ajax.Requestを使った場合と異なるのは、第1引数に差し込み先の要素を指定するという点だ。

　呼び出しが成功すると、この要素へと結果が流し込まれるため、開発者は、戻ってきたHTMLを解析し、DOMを使って挿入するというコードを記述する必要がない。

　Ajax.Updaterを使う場合には、さらに、表3に示す幾つかの接続オプションを使うことができる。例えば、evalScriptsプロパティをtrueにすれば、サーバからの結果に<script>要素が含まれる場合、その内容を評価することができるのだ。

　またAjax.Updaterの処理を一定間隔で繰り返すAjax.PeriodicalUpdaterも用意されている。Ajax.PeriodicalUpdaterを使えば、サーバから一定間隔でデータを取得し、それをユーザーに逐次表示するというコードを容易に記述できる。

表3■Ajax.UpdaterやAjax.PeriodicalUpdaterを使う時の接続オプション

プロパティ 意味
insertion 得たHTMLデータを要素のどこに差し込むかを指定する。Insertion.Before（直前）、Insertion.Top（子のいちばん上）、Insertion.Bottom（子のいちばん下）、Insertion.After（直後）のいずれか。
evalScripts HTMLデータ内のスクリプトを評価するかどうかを決める。デフォルトはfalseであり、評価しない。
decay （Ajax.PeriodicalUpdaterのみ）受け取ったデータが以前と同じである場合、frequencyプロパティで指定した間隔を何倍にするかを指定する。デフォルトは1で、間隔は変わらない。
frequency （Ajax.PeriodicalUpdaterのみ）データを取得する間隔を秒単位で指定する。

2. X-JSONヘッダの展開

　prototype.jsには、Ajax.Request（Ajax.UpdaterやAjax.PeriodicalUpdaterも含む）で通信した場合、その結果に「X-JSON」というヘッダが入っている場合には、そのヘッダの値をJSON書式のオブジェクトとして自動展開する機能がある。

リスト8■X-JSONヘッダでJSON書式のデータを返す

<?php
require('JSON.php');
$value1 = $_POST['value1'];
$value2 = $_POST['value2'];
$result = array();
$result['add'] = $value1 + $value2;
$result['diff'] = $value1 - $value2;
header("Content-Type: text/html");
$json = new Services_JSON();
header("X-JSON: " . '(' . $json->encode($result) . ')');
print(mb_convert_encoding("データを返しました", 'utf-8'));
?>

　例えばサーバサイドで、次のようにX-JSONヘッダを返すとする（リスト8）。


X-JSON: ({"add":400,"diff":200})

　ここでは全体を「(」「)」で囲っている点に注意してほしい。この「(」「)」がないと、うまく評価できないのだ。

　するとonSuccessプロパティやonFailureプロパティで指定した関数の第2引数に、このヘッダを展開したオブジェクトが得られる。

　つまり上記のようなヘッダが戻ってくるなら、次のようにして、値を取得できる（リスト9）。


function AjaxSuccess(xmlhttp, json)
{
  // 呼び出しが成功した時の処理
  alert("和=" + json['add']);
  alert("差=" + json['diff']);
}

　X-JSONという特別なヘッダを使っているため、「1. ユーザーに表示する文字列はHTML形式で返す」、「2. プログラムが処理するデータはX-JSONヘッダとして返す」、という組み合わせが可能になる。

　つまり、Ajax.Updaterと組み合わせて、「コンテンツはHTMLで返し、プログラムで処理したい値はJSONで扱う」という実装にすれば、クライアント側で結果のHTMLを生成するコードを書かなくて済む一方、プログラムが処理するデータは自動的に第2引数として得られるようになるのだ。

リスト9■X-JSONヘッダで受け取ったデータの取得の例

<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.Requestオブジェクトを作成
	var myAjax = new Ajax.Updater(
		'placeholder', 	// 差し込む要素
		'http://example.jp/calc.php',	// 呼び出し先のURL
		{
			method: 'post',				// メソッド
			postBody: parameter,		// ポストされるボディ部
			onSuccess: AjaxSuccess,		// 呼び出しが成功した時に呼び出されるメソッド
			onFailure:	AjaxFailed,		// 呼び出しが失敗した時に呼び出されるメソッド
			onException: AjaxException	// 例外が発生した時に呼び出されるメソッド
		}
	);
}
function AjaxSuccess(xmlhttp, json)
{
	// 呼び出しが成功した時の処理
	alert("和=" + json['add']);
	alert("差=" + json['diff']);
}
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>

　この記事では、prototype.jsが提供する機能のうち、主に、Ajaxのサポート機能について説明した。

　しかし第5回の冒頭でも述べたように、prototype.jsには、クラスの生成機能やイベントの定義機能、列挙や配列の処理を簡易にする機能など、ほかにもたくさんの便利なクラスが提供されている。それらの機能については、「Developer Notes for prototype.js」などを参照してほしい。

　ところで、prototype.jsには、本稿で説明していないたくさんの便利なクラスがあるとはいえ、JavaScriptによる細々とした操作やAjaxによる通信といった基本機能を提供するフレームワークに過ぎない。例えば、「ドラッグ＆ドロップ機能」などのGUI機能を提供するクラスは提供されていないのだ。

　次回は、ドラッグ＆ドロップ機能などのユーザー操作の実装を手助けするクラスライブラリを紹介しよう。

前のページへ 1|2|3|4|5 　　　　　　

Copyright © ITmedia, Inc. All Rights Reserved.

注目のテーマ