JSON-RPCでAjax - 最初の一歩

Seasar2 ExtJS JSONIC

まずはサーバーサイドから文字列を取得し表示する。

■$PROJECT/hell/hello.html ( hello は convention.dicon で指定したパッケージに相対するよう任意に設定)

<html>

<head>

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

<title>Hello</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('message').on('click', function(){
		Ext.Ajax.request({
			url : 'rpc.json' ,
			method: 'POST' ,
			params : Ext.util.JSON.encode( { method: 'hello.message', params: [], id: 1 } ) ,
			success: function ( result, request ) {
				Ext.MessageBox.alert('message', Ext.util.JSON.decode(result.responseText)['result']);
			} ,
			failure: function ( result, request ) {
				Ext.MessageBox.alert('Failed', result.responseText);
			}
		});
	});
});
//]]>
//-->
</script>

</head>

<body>

<p>
<input type="button" id="message" value="Hi."/>
</p>

</bodY>

</html>

■HelloService.java

package sample.web.hello;

public class HelloService {

	public String message() {
		return "Hello.";
	}

}

サーバーサイドの POJO はとってもシンプル。クラスの命名規約を守るだけで良い。 html の肝は Ext.Ajax.request 。

		Ext.Ajax.request({
			url : 'rpc.json' ,
			method: 'POST' ,
			params : Ext.util.JSON.encode( { method: 'hello.message', params: [], id: 1 } ) ,
			success: function ( result, request ) {
				Ext.MessageBox.alert('message', Ext.util.JSON.decode(result.responseText)['result']);
			} ,
			failure: function ( result, request ) {
				Ext.MessageBox.alert('Failed', result.responseText);
			}
		});

url はフルパスだと http://localhost:8080/jsonic/hello/rpc.json になる。これが JSONIC の JSON-RPC 呼び出しのアドレスになる。 method は POST で行う事。 params は { method: 'hello.message', params: , id: 1 } を Ext.util.JSON.encode でエンコードしてあげる必要がある。

method: 'hello.message' は hello が HelloService クラスを示し message が HelloService クラスのメソッド message() を示す。

params: は message() の引数を配列で表現し渡すのだが今回は引数のないメソッドを呼び出してるので配列は空で良い。

success: と failure: は呼び出しが成功または失敗した際の処理を記述する。 rpc の呼び出し結果は result に JSON 形式で返される。返された JSON は

{
  "result": "Hello.",
  "error": null,
  "id": 1
}

のような形となる。ここでは "Hello." の値を取得するためにデコードし ['result'] で結果にアクセスしている。