Ajax勉強終了
メーカー(大分類)・モデル(中分類)と絞り込むリストボックスを作ってみた。JavaScript側で書いたのはこれだけ。
＃追記：中途半端だったんでJavaScript部分を全部貼り付けました。とりあえずコードなのでIE専用。
簡単に言うとajax関数はサーバサイドのどの処理を呼び出したいのか、それを識別するidと、サーバの処理に渡したいパラメータと、戻り値を処理する関数を指定するのみ。
//サーバにアクセスして戻り値をcallbackに渡す
function ajax(url, callback) {
try {
xmlhttp = new XMLHttpRequest();
} catch(e) {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
if (xmlhttp) {
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
callback(eval(xmlhttp.responseText));
}
};
xmlhttp.open('GET', url, true);
xmlhttp.send(null);
}
}//リストボックスを作る
function buildListbox(target, options) {
target.length = options.length;
for (var i = 0; i < options.length; i++) {
target[i].text = options[i].text;
target[i].value = options[i].value;
}
}//--- ここまで共通の関数 ---
//--- ここからアプリの関数 ---
//メーカー(大分類)の一覧を取得する
function getMakerList() {
ajax('ajaxservlet?id=getMakerList', getMakerListResult);
}function getMakerListResult(result) {
buildListbox(document.frm.makerList, result);
}//モデル(中分類)の一覧を取得する
function changeMaker(caller) {
var makerCode = caller.options[caller.selectedIndex].value;
ajax('ajaxservlet?id=getModelList&maker=' + makerCode, changeMakerResult);
}function changeMakerResult(result) {
buildListbox(document.frm.modelList, result);
}
サーバサイドからの戻り値はJSONテキスト。配列の中にoptionオブジェクトを生成しているので、この戻り値専用のリストボックスを生成するbuildListboxという関数を作ってある。
利用者が記述するのは呼び出しの部分と戻り値の部分。これだけやる事が限定されているなら、もっとはしょって書けますね。これならめんどくさがらずに使ってもらえるかな(笑)
サーバサイドの処理をしているのはPOJOでtextとvalueというプロパティを持つOptionオブジェクトの配列をreturnしているだけ。入り口のサーブレットで呼び出し先のクラスだのメソッドだの処理だの戻り値のオブジェクトをJSONテキストにするだのやってみた。
だいたい概要をつかんだので、後はフレームワーク化するにあたって実務で使えるレベルに仕上げるという所です。そしてこういう仕組みは既に世の中にあるはず。なんか萌えてしまったので自力で作りましたけど、拾ってきたほうが楽だと思う(笑)。JSON in Javaは使うとして、入り口のサーブレット部分もOpenAMFのInvokerみたいなのがどこかにあると思うのでそれも探す〜。
