では早速AjaxClassを作成してみましょう。
DWRで使用するクラスは全てPOJOですので
特別なクラスやインターフェイスの定義は必要ありません。
package pack1;
public class AjaxClass {
public void testFunc() {
System.out.println("Call testFunc().");
}
}
このtestFuncメソッドをHTMLから呼び出すには
JavaScript内で以下のように記述します。
AjaxClass.testFunc();
見ての通り、そのまんまです。
一応言っておきますが、上のコードはJavaコードではなく
JavaScriptコードです。
このように、DWRでは一般のJavaScript関数を呼び出すようにして
Javaコードのメソッドをコール出来ます。
ただし、一つだけ異なる点があります。
上のコードでtestFuncメソッドを呼び出した後、
JavaScript内ではすぐに処理が返ってきます。
例えば、
AjaxClass.testFunc();
alert("testFunc()");
のようなコードを記述した場合、
testFuncメソッドの呼び出しに10秒掛かったとしても
すぐに直後のalert文が実行されます。
これが、Ajaxが「非同期」と呼ばれる所以です。
上で紹介した例は、引数も持たず戻り値も持たない一番シンプルな形です。
実際にはこういった形でAjaxが使われるケースは少なく
何らかの引数を渡すことになります。
public class AjaxClass {
public void sendMessage(String message) {
System.out.println("send message : " + message);
}
}
呼び出し側は以下のようになります。
<input type="text" id="message">
<input type="button" value="メッセージ送信" onclick="sendMessage()">
<script>
function sendMessage() {
var el = document.getElementById("message");
AjaxClass.sendMessage(el.value);
}
</script>
入力欄にメッセージを入力して「メッセージ送信」ボタンを押下すると
サーバにそのメッセージが送信されます。
Ajaxの核となるのがここです。
サーバからの戻り値を取得します。
public class AjaxClass {
public String getMessage(String message) {
return "message = " + message);
}
}
呼び出し側は以下のようになります。
<input type="text" id="message">
<input type="button" value="メッセージ送信＆受信" onclick="sendMessage()">
<script>
function sendMessage() {
var el = document.getElementById("message");
AjaxClass.sendMessage(el.value, retSendMessage);
}
function retSendMessage(message) {
alert(message);
}
</script>
入力欄にメッセージを入力して「メッセージ送信＆受信」ボタンを押下すると
サーバにそのメッセージが送信され、戻り値が返されます。
その結果をalertでポップアップダイアログに表示します。
今までより少し複雑な作りになっているので説明します。
普通に考えれば、上の処理は
function sendMessage() {
var el = document.getElementById("message");
var message = AjaxClass.sendMessage(el.value);
alert(message);
}
と簡単に書けそうですが、Ajaxの「非同期」という特性上そのように書けません。AjaxClass.sendMessage(el.value) は呼び出し後、(サーバからの返答を待たずに)
処理がすぐ戻ってきてしまう為、この関数からの戻り値を直接受け取れないのです。
代わりに、コールバック関数を定義して
その関数を非同期で呼び出すことで処理を実現しています。
コールバック関数(上の例ではretSendMessage)は、サーバから処理が返ってきた段階で
初めて実行されます。
ここが少しとっつきにくい部分ですので、慣れるようにしましょう。
上の例では、戻り値の型がStringだったので
特別な処理は必要ありませんでした。
独自Beanを戻り値として使う場合には、いくつかの手順を踏む必要があります。
まずは、DWRの設定方法 で説明したように
WEB-INF/dwr.xml にBeanクラスを定義します。
Beanクラスは、以下のようにします。
package pack1;
public class AjaxBean {
...
public String getName() { ... }
public int getNumber() { ... }
}
これを使うAjaxClassを以下のように作成します。
public class AjaxClass {
public AjaxBean getBean() {
return new AjaxBean(...);
}
}
呼び出し側は以下のようになります。
<input type="button" value="Bean取得" onclick="getBean()">
<script>
function getBean() {
AjaxClass.getBean(retGetBean);
}
function retGetBean(bean) {
alert("Bean名 : " + bean.name + ", Bean番号 : " + bean.number);
}
</script>
簡単ですね。
一つ注意点があります。
getterメソッドの戻り値は String または int にする必要があります。
short などには対応していません。