Kumu.jsを利用したAjaxサンプル

Kumu.jsを利用したAjaxにおける、おうじ様の開発メモ

【サンプル】八百屋さんに訪れたお客さんが野菜や果物について尋ねると、八百屋さんが値段を答えてくれる。

ajaxtext.hml

<HTML>

<HEAD>

function ask(argThing) {

var ajax = Kumu.Ajax.getS2AjaxComponent();

ajax.url = '/○○○○/ajax/ajaxTest';

ajax.params = {'thing' : argThing};

ajax.doAction = function(response) {

document.getElementById("Answer").value = response;

};

Kumu.Ajax.executeAjax(ajax);

}

</script>

</HEAD>

<B>わたし</B>：八百屋さん、<INPUT type="text" size="10" onblur="ask(this.value);">はありますか？<BR/>

</BODY>

</HTML>

【解説】
ajax.js/kumu.jsは公式ページからダウンロードする。
テキストボックスに文字を入力してカーソルアウトすると、ask()が呼ばれる。
ajax.urlには受信側のクラスを指定する。このサンプルではaction/ajax/AjaxTestActionクラスを呼びたいので、先頭１文字を小文字にしてActionを除いた、"/○○○○/ajax/ajaxTest"を指定する。
クラス側に渡すパラメータは、ajax.paramsに連想配列でセットする。
ここでは引数「thing」にテキストボックスの入力文字列をセットして呼び出される。

AjaxTestAction.java ※このサンプルでは...action/ajaxの中に配置

public class AjaxTestAction {

// 引数

public String thing;

@Execute(validator = false)

public String index() {

// 品揃え

Map<String, String> list = new HashMap<String,String>();

list.put("りんご", "100");

list.put("メロン", "800");

list.put("ぶどう", "300");

list.put("きゅうり", "40");

list.put("キャベツ", "200");

list.put("レタス", "300");

list.put("ほうれん草", "150");

list.put("にんじん", "60");

list.put("ブロッコリー", "200");

list.put("カリフラワー", "400");

String answer = list.get(thing);

if (answer == null) {

ResponseUtil.write(thing + "はないねぇ～");

} else {

ResponseUtil.write(thing + "は" + answer + "円だよ～");

}

return null;

}

}

【解説】
public String thingは、呼出元の引数と同じ名前にしておけば、自動的にバインドされる。
戻り値は、ResponseUtil.writeにセットして、nullでリターンすれば、呼出元でajax.doActionに記述した関数に戻り値が引き渡されて実行される。

【発展】
・もしAjaxTestActionに複数の引数を渡したければ、
ajax.params = {'thing' : argThing, 'thing2' : argThing2};
のようにして、AjaxTestActionにもメンバ変数thing2を追加する。
・文字化け
thingの内容に全角をセットすると文字化けが発生してうまく動作しなかったので、
server.xmlの<Connector>要素に、
「useBodyEncodingForURI="true"」を追加すると文字化けが解消された。
(この要素は２つ存在したので、その両方に追加)
しかしSAStrutsが参照しているserver.xmlは、C:\Tomcat6.0\conf\server.xmlではなく、
eclipseのworkspace配下のずっと深い場所にあるもので、しかもフレームワークによってすぐに書き換えられてしまうので、困っている。どうしたものか。。。