JSON-RPCでAjax - 足し算

Seasar2 ExtJS JSONIC

■add.html

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Add</title>

<link rel="stylesheet" type="text/css" href="../ext/resources/css/ext-all.css" />

<script type="text/javascript" src="../ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext/ext-all.js"></script>

<script type="text/javascript">
<!--
//<![CDATA[
Ext.onReady(function(){
	Ext.get('calc').on('click', function(){
		var arg1 = Ext.get('arg1').getValue();
		var arg2 = Ext.get('arg2').getValue();
		Ext.Ajax.request({
			url : 'rpc.json' ,
			method: 'POST' ,
			params : Ext.util.JSON.encode( { method: 'calc.plus', params: [arg1,arg2], id: 1 } ) ,
			success: function ( result, request ) {
				Ext.getDom('result').firstChild.data = Ext.util.JSON.decode(result.responseText)['result'];
			} ,
			failure: function ( result, request ) {
				Ext.MessageBox.alert('Failed', result.responseText);
			}
		})
	})
})
//]]>
//-->
</script>

</head>

<body>

<form>

<input type="text" id="arg1"/>+<input type="text" id="arg2"/>=<span id="result">&nbsp;</span><br/>
<input type="button" id="calc" value="calc"/>

</form>

</bodY>

</html>

■CalcService.java

package sample.web.add;

public class CalcService {

	public int plus(int a, int b) {
		return a + b;
	}
	
}

今回のポイントはメソッドの引数とそれに対応するパラメーター。 POJO のメソッド plus(int a, int b) は引数を持っており html から値を渡す必要がある。値の渡し方は

params : Ext.util.JSON.encode( { method: 'calc.plus', params: [arg1,arg2], id: 1 } ) ,

の params: [arg1,arg2] で id が "arg1" 、 "arg2" のエレメントの value を配列にして渡す。これだけ。

先の最初の一歩編と足し算編が基礎になり、後は ExtJS のグリッドやダイナミックフォームが使えるようになれば Flex にも負けない立派な Web アプリケーションの出来上がり。

FireFox3 や Safari なんかのモダンブラウザだと JavaScript エンジンが優秀で実行もなかなか早い。これで HTML 5 が本格的になってきたら笑いがとまりませんなー。わっはっはっは。