| ## Kumu.Ajaxとは Kumu.AjaxはTeedaでAjaxを簡単に使用できるように作られたjavascriptのライブラリです。 Kumu.AjaxはTeedaに依存しているわけではありません。サーバーサイド側は自由に選択することができます。 またKumu.Ajaxはkumu.jsに依存していません。ajax.js単体で使用する事ができます。 Kumu.Ajaxは以下の機能を提供します。 Ajaxによる非同期通信 通信状態ごとの関数実行 Teedaとの連携機能 JSONレンダリング Formの値の取得 JSONの文字列化（この機能は将来kumu.jsに移行します） ### Ajaxによる非同期通信 Kumu.Ajaxは主にKumu.Ajax.executeTeedaAjaxでTeedaと連携して使用するケースが多いですが、低レベルな非同期通信を行う事もできます。 Ajaxで通信する際にはS2AjaxComponentを取得して各種パラメータをセットします。
    var ajax = Kumu.Ajax.getS2AjaxComponent();
    ajax.url = '/hogehoge.do';
    ajax.params = {'hoge':1, 'foo':2};
    ajax.doAction = function(response) {
    };
    Kumu.Ajax.executeAjax(ajax);
AjaxComponentにセットする値は以下です。 url リクエスト先URLです。 絶対パスで指定します。 params 送信するリクエストパラメータです。 URLEncodeは内部で自動で行います。 doAction コールバック関数を指定します。 コールバック関数はレスポンスを渡され実行されます。 method actionのmethodを指定します。 GET or POSTを文字列で指定します。デフォルトでは'GET'です。 async 非同期か同期かboolean値で指定します。 デフォルトではtrueです。 timeout タイムアウト値を設定します。 単位は秒です。 タイムアウト発生時にはonTimeoutで設定した関数を実行します。 responseType レスポンスタイプを設定します。 設定できるレスポンスタイプは以下です。 RESPONSE_TYPE_XML : XML形式。 RESPONSE_TYPE_JSON : JSON形式。JSON形式ではevalした結果をコールバック関数に返します。 RESPONSE_TYPE_TEXT : TEXT形式。 RESPONSE_TYPE_HTML : HTML形式。 デフォルトはJSON形式です。 ### 通信状態ごとの関数実行 Kumu.AjaxではAjaxの通信状態に合わせ関数を実行することができます。 状態は以下です。 Uninitialized : 初期かされていない状態です Loading : 通信開始の状態です Loaded : 通信完了の状態です Interactive : レスポンスを受け取れる状態です Failure : 通信失敗の状態です Exception : javascriptエラー発生の状態です Timeout : タイムアウト発生の状態です これらの状態に合わせ関数を設定するにはAjaxComponentのキーに'on'+状態名で関数をセットします。
    var ajax = Kumu.Ajax.getS2AjaxComponent();

    ajax.url = '/hogehoge.do';

    var func1 = function(request, component){
      alert('loading');
    };

    var func2 = function(request, component){
      alert('loaded');
    };

    // Loading中、Load完了時にalert
    ajax.params = {'hoge':1, 'foo':2, onLoading : func1, onLoaded : func2};

    ajax.doAction = function(response) {
    };
    Kumu.Ajax.executeAjax(ajax);
各関数は以下の引き数を渡されて実行されます。 XMLHTTPRequest AjaxComponent また通信状態ごとの関数の指定方法にはもうひとつの方法があり、コールバック関数のpropertyに設定することができます。 コールバック関数ごとに動作を切り替えるたい場合に使用します。
    var ajax = Kumu.Ajax.getS2AjaxComponent();

    ajax.url = '/hogehoge.do';

    var func1 = function(request, component){
      alert('loading');
    };

    var func2 = function(request, component){
      alert('loaded');
    };

    // Loading中、Load完了時にalert
    ajax.params = {'hoge':1, 'foo':2};

    var callback = function(response){
    };

    callback.onLoading = func1;
    callback.onLoaded = func2;

    ajax.doAction = callback;
    Kumu.Ajax.executeAjax(ajax);
### Teedaとの連携 Kumu.AjaxはTeedaとの連携を簡単に行う事が出来ます。 executeTeedaAjaxを使うと簡単にS2のコンポーネントを呼び出す事が出来ます。
    // 呼び出したいコンポーネント名 + "_" + 呼び出したいメソッド名
    function hoge_foo(response){
    }

    Kumu.Ajax.executeTeedaAjax(hoge_foo, {"パラメータ名" : "パラメータ値"});
executeTeedaAjaxはコールバック関数を解析し、名前からコンポーネント名、メソッド名を取得します。 そのため無名関数では正しく動作しないので注意して下さい。 その他の詳細はTeeda Ajaxを参照して下さい。 executeTeedaAjaxを使用する際にも上記の通信状態による関数実行は使用できます。 executeTeedaAjaxに渡すパラメータに同様に追加して下さい。 ### JSONレンダリング Kumu.AjaxではJSONをHTMLテンプレートにはめ込みレンダリングする事が出来ます。 Kumu.Ajax.render関数はJSONのキーとHTMLのidをマッチングさせレンダリングを行います。 マッチした要素のinnerHTMLにJSONの値を出力します。
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script language="JavaScript" type="text/javascript" src="./js/ajax.js"></script>
    <script>
    var o = {
      'test' : 'てすと',
      'test1' : 'てすと1',
      'test2' : [
      {
        'no':1,
        'name' : 'name1'
      },
      {
        'no':2,
        'name' : 'name2'
      },
      {
        'no':3,
        'name' : 'name3'
      },
      {
        'no':4,
        'name' : 'name4'
      },
      {
        'no':5,
        'name' : 'name5'
      }]
    }

    </script>

    <title>JSON Rendering Sample</title>
    </head>
    <body>
    <div id='test' style="display:none">Test</div>
    <div id='test1' style="display:none">Test</div>
    <div id='test1' style="display:none">Test</div>

    <table border="1">
      <tr>
        <td>-</td>
        <td>No</td>
        <td>Name</td>
      </tr>
      <tr id='test2' style="display:none">
        <td>Rendering</td>
        <td id="no">Test</td>
        <td id="name">Test</td>
      </tr>
    </table>
    <input type="button" value="RENDER" onclick="Kumu.Ajax.render(o);">
    </body>
    </html>
結果は以下のようになります。
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script language="JavaScript" type="text/javascript" src="./js/ajax.js"></script>
    <script>
    var o = {
      'test' : 'てすと',
      'test1' : 'てすと1',
      'test2' : [
      {
        'no':1,
        'name' : 'name1'
      },
      {
        'no':2,
        'name' : 'name2'
      },
      {
        'no':3,
        'name' : 'name3'
      },
      {
        'no':4,
        'name' : 'name4'
      },
      {
        'no':5,
        'name' : 'name5'
      }]
    }

    </script>

    <title>JSON Rendering Sample</title>
    </head>
    <body>
    <div id="test" style="">てすと</div>
    <div id="test1" style="">てすと1</div>
    <div id="test1" style="">てすと1</div>
    <table border="1">
    <tbody>
    <tr>
      <td>-</td>
      <td>No</td>
      <td>Name</td>
    </tr>
    <tr id="test2:rendered" style="">
      <td>Rendering</td>
      <td id="no:rendered">1</td>
      <td id="name:rendered">name1</td>
    </tr>
    <tr id="test2:rendered" style="">
      <td>Rendering</td>
      <td id="no:rendered">2</td>
      <td id="name:rendered">name2</td>
    </tr>
    <tr id="test2:rendered" style="">
      <td>Rendering</td>
      <td id="no:rendered">3</td>
      <td id="name:rendered">name3</td>
    </tr>
    <tr id="test2:rendered" style="">
      <td>Rendering</td>
      <td id="no:rendered">4</td>
      <td id="name:rendered">name4</td>
    </tr>
    <tr id="test2:rendered" style="">
      <td>Rendering</td>
      <td id="no:rendered">5</td>
      <td id="name:rendered">name5</td>
    </tr>
    <tr id="test2" style="display: none;">
      <td>Rendering</td>
      <td id="no">Test</td>
      <td id="name">Test</td>
    </tr>
    </tbody>
    </table>
    <input type="button" onclick="Kumu.Ajax.render(o);" value="CHANGE"/>
    </body>
    </html>
render関数ではレンダリングする要素のstyleがdisplay:noneである場合には表示するように処理を行います。 またidのobjectがArrayである場合にはその要素をコピーし繰り返しArrayのサイズ分レンダリングします。 renderで新たに追加された要素はid + "rendered"というidを持っています。 新たに追加された要素を削除する場合にはKumu.Ajax.removeRender(id)で削除することができます。 ### Formの値の取得 Kumu.AjaxはFormの値を取得するためのヘルパーを用意しています。 Kumu.FormHelperを使うとFormをJSON化でき、簡単に値を取得する事ができます。 では簡単な見てみます。
    <form id="Form">
      <input type="text" name="firstName"/>

      <input type="text" name="lastName"/>
    </form>
上記のFormはname属性がfirstNameとlastNameという名前のinputフィールドを持っています。 このFormをJSON化し、値を取得するには以下のように記述します。
    // FormをJSON化する
    var form = Kumu.FormHelper.create('Form');

    //name属性がfirstNameの値を取得
    var firstNameValue = form['firsrtName']

    //name属性がfirstNameの値を取得
    var lastNameValue = form['lastName']
FormをJSON化するのはKumu.FormHelper.createを使用します。 FormHelperの引き数にはFormの要素あるいは対象のFormのid属性の値を指定します。
    Kumu.FormHelper.create(<Form要素もしくはFormのid属性>, <タイプ>);
### Formのタイプ FormHelperはいくつかのタイプをサポートしています。 タイプは以下の３つです。 'r' rawモード -- Formそのままのname属性を使用してJSONを構築する。（デフォルト） 't' teedaモード -- FormをTeedaのPageクラスのidのようにJSONを構築する。 'i' idモード -- Formのname属性ではなくid属性をキーに使用してJSONを構築する。 Teedaモードを使用するには以下のように記述します。
    Kumu.FormHelper.create('Form', 't');
### rawモード rawモードはそのままname属性の値をキーとしてJSONを構築します。 デフォルトではこの動作になります。
    Kumu.FormHelper.create('Form');
### teedaモード teedaモードはteedaでレンダリングされたFormをJSON化します。 teedaはJSF実装FWのためFormをレンダリングするとname属性がそのまま出ないケースなどがあります。 例えばItemsのケースです。
    <form id="Form">
    <input type="text" id="num1" class="hoge"/><br/>

    <input type="text" id="num2"/><br/>
    <span id="str">aaa</span>
    <input type="hidden" id="fooItemsSave" />

    <table border="1">
           <div id="fooItems">
           <tr>
             <td><span id="fooNo">100</span></td>

                   <td><input type="text" id="aaa" title="AAA" /></td>
                   <td><input type="text" id="bbb" title="BBB" /></td>

           </tr>
           </div>
    </table>
    <input type="submit" id="doNothing" />
    </form>
このケースの場合、idは同じになってしまうためidで取得するのは難しく、またname属性は複雑な値になり解析が困難です。 このようなケースもKumu.FormHelperを使用することができます。
    var form = Kumu.FormHelper('Form', 't');
    var items = form['fooItems']
    for(var i = 0; i < items.length; i++){
        var item = items[i];
        alert('aaa = '+item['aaa']+' bbb = '+item['bbb');
    }
Teedaモードを使うと上記のように繰り返し部分もリスト化され、簡単にアクセスすることができます。 ### idモード id属性の値をキーとしてJSONを構築します。 その他の動作はrawモードと変わりません。 ### JSONの文字列化（この機能は将来kumu.jsに移行します） Kumu.JSONSerializerを使うとJSONを文字列化することができます。
    var form = Kumu.FormHelper.create('aForm');

    // Kumu本体のログ機能でログ出力
    Kumu.log(Kumu.JSONSerializer.serialize(form));
上記のようにFormの内容などをデバッグする際に使用することができます。 またobjectであればなんでも文字列化することができます。 ### 応用 JSONSerializerを使用すると複数のobjectをまとめて文字列にする事ができます。 そのためAjaxで送信するパラメータも減らすことができます。 JSON化した文字列はサーバサイドでorg.seasar.teeda.ajax.JSONSerializerを使用してMapに復元することができます。
    String str = "{'test1':'test2'}";
    Map map = JSONSerializer.evalMap(str);
Mapに変換後、Dxoなどを使用することによって簡単に好きなDtoなどにマッピングする事が出来るようになります。 ### リファレンス ### Kumu.Ajax.executeAjax(ajaxComponent) Ajaxで通信を行います。 詳細はAjaxによる非同期通信を参照して下さい。 ### Kumu.Ajax.executeTeedaAjax(function, object) Ajaxで通信を行います。 S2のコンポーネントと連携します。 詳細はTeeda Ajaxを参照して下さい。 ### Kumu.Ajax.render(json) JSONをレンダリングします。 詳細はJSONレンダリング を参照して下さい。 ### Kumu.Ajax.removeRender(id) Kumu.Ajax.render(json)で新たに追加された要素を削除します。 ### Kumu.FormHelper.create(element, type) FormをJSON化します。 詳細は.. Formの値の取得　を参照して下さい。 ### Kumu.FormHelper.getValue(element) 指定した要素の値を取得します。 ### Kumu.FormHelper.getItem(element)(Teeda使用時） 指定した要素が含まれているItemsの中のItemを返します。 Itemsのリストの中に入っているItemのJSONを返します。 ### Kumu.FormHelper.getItemsIndex(form, element)(Teeda使用時） 指定した要素が含まれているItemsのIndexを返します。 ### Kumu.JSONSerializer.serialize(object) 指定したobjectをJSON文字列化します。 |
| Copyright© 2005-2006, The Seasar Foundation and the others. All rights reserved.