そのサービスはAjaxフレームワークで一変できるか？：Web 2.0で変わるWebプログラミングの常識（3/4 ページ）

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

prototype.jsを使ったAjaxの操作

　それでは実際に、prototype.jsを使ったAjax操作を見てみよう。

　ここでは、連載第2回目で説明した「和と差を返すプログラムをAjaxとして呼び出すもの（連載第2回目のリスト1）」を例にとり、prototype.jsを使ったものに書き換えてみればよい。そのプログラムは、次に挙げるリスト6のようになる。

　なお、サーバサイドのプログラム例については、連載第2回目の6ページに記載したリスト2を参照してほしい。

リスト6■prototype.jsによるAjax通信の例

<html>
<head>
<script type="text/javascript" src="https://image.itmedia.co.jp/enterprise/articles/0608/28/prototype.js">
</script>
<script type="text/javascript">
<!--
function calc()
{
	// パラメータを作成
	var parameter =
		"value1=" + $F('value1') + "&" +
		"value2=" + $F('value2');
	// Ajax.Requestオブジェクトを作成
	var myAjax = new Ajax.Request(
		'http://example.jp/calc.php',	// 呼び出し先のURL
		{
			method: 'post',				// メソッド（getまたはpost）
			postBody: parameter,		// ポストされるボディ部
			onSuccess: AjaxSuccess,		// 呼び出しが成功したときに呼び出されるメソッド
			onFailure:	AjaxFailed,		// 呼び出しが失敗したときに呼び出されるメソッド
			onException: AjaxException	// 例外が発生したときに呼び出されるメソッド
		}
	);
}
function AjaxSuccess(xmlhttp, json)
{
	// 呼び出しが成功したときの処理
	var xmlobj = xmlhttp.responseXML;
	// 和を取得
	var addobj = xmlobj.getElementsByTagName("add");
	var addvalue = addobj[0].firstChild.nodeValue;
	// 差を取得
	var diffobj = xmlobj.getElementsByTagName("diff");
	var diffvalue = diffobj[0].firstChild.nodeValue;
	
	// <span>に設定
	$('addvalue').innerText = addvalue;
	$('diffvalue').innerText = diffvalue;
}
function AjaxFailed(xmlhttp, json)
{
	// 呼び出しが失敗したときの処理
	alert('エラーです：' + xmlhttp.statusText);
}
function AjaxException(xmlhttp, 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>
<p>
和：<span id="addvalue"></span>
</p>
<p>
差：<span id="diffvalue"></span>
</p>
</div>
</body>
</html>
前のページへ 1|2|3|4 次のページへ

Copyright © ITmedia, Inc. All Rights Reserved.

注目のテーマ