それでは実際に、prototype.jsを使ったAjax操作を見てみよう。
ここでは、連載第2回目で説明した「和と差を返すプログラムをAjaxとして呼び出すもの(連載第2回目のリスト1)」を例にとり、prototype.jsを使ったものに書き換えてみればよい。そのプログラムは、次に挙げるリスト6のようになる。
なお、サーバサイドのプログラム例については、連載第2回目の6ページに記載したリスト2を参照してほしい。
<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>
Copyright © ITmedia, Inc. All Rights Reserved.