3.5. ページの一部を書き換え( Ajax )
この章では、Ajax を使ってデータベースを検索し、画面の一部だけを書き換える手順について説明します。
ActionPage クラスの Ajax 使用設定をする
ActionPage クラスの Ajax 使用設定をします。
/* コンストラクタ */
public EmpPage(HttpServletRequest request,
        HttpServletResponse response) throws Exception {
  // Ajax 使用設定
  setUseAjax(true);
  …
}

Ajax の使用を設定する（「 setUseAjax 」メソッド）

Ajax 呼び出しを使用するか否かを設定します。
WebSQL テーブルオブジェクトのパラメータを設定する
画面の選択肢フォーム「所属」と関連付けるパラメータの設定をします。
/* コンストラクタ */
public EmpPage(HttpServletRequest request,
        HttpServletResponse response) throws Exception {
  …
  // SQL文の設定
  tableEmp.setSQL(
    " SELECT T_EMP.*, " +
      " M_DEPT.*, " +
    " FROM T_EMP" +
        " INNER JOIN M_DEPT ON T_EMP.DEPT_CODE = M_DEPT.DEPT_CODE " +
    " WHERE T_EMP.DEPT_CODE = :DEPT_CODE");
  …
}
HTML テンプレートから、Ajax により書き換える部分を外出しにする
テンプレートの一部（ Ajax により書き換える部分）を外出しにする。
JavaScript による書き換えを行うため、タグに ID を付与する。
<tbody id="tableBody">
  #parse( "EmpPageTable.html" )
</tbody>
外出しにする部分を新規作成する。( EmpPageTable.html )
#if($tableEmp.RowCount==0)
<tr><td colspan="7">対象はありません。</td></tr>
#end

#foreach($emp in $tableEmp.Rows)
<tr>
  <td>$emp.rowNumber</td>
  <td><input type="text" $emp.name.textBind /></td>
  <td>
    <select $emp.deptCode.nameBind>
    <option value="">--</option>
      #foreach( $dept in $tableDept.Rows )
        <option value="$dept.code"
          #if($emp.deptCode==$dept.code) selected="selected" #end>
        $dept.name</option>
      #end
    </select>
  </td>
  <td><input type="text" $emp.enterDate.textBind /></td>
  <td><input type="radio" $emp.sex.checkBind('1') />男
      <input type="radio" $emp.sex.checkBind('2') />女</td>
  <td><input type="text" $emp.salary.textBind /></td>
  <td><textarea $emp.memo.nameBind>$emp.memo</textarea></td>
  <td><input type="checkbox" $emp.deleteCheckBind('true') />
      <input type="hidden" $emp.deleteCheckBind('false') /></td>
</tr>
#end
HTML テンプレートに ActionPage 連携用の記述を追加する
アクションメソッドを呼び出す記述を追加します。
<head>
  <!-- prototype.jsの読み込み -->
  <script language="javascript" type="text/javascript"
              src="js/prototype/prototype_1_6_0.js"></script>
  <script type="text/javascript"><!--
    // AjaxRequestクラス
    var ajaxUpdateUI = {
      asynchronous: 'false',
      onComplete: function(response) {
        // TABLEタグ内容の書き換え
        Element.Methods.update('tableBody',response.content);
        // エラーがある場合
        if (response.tableEmp.hasError == true) {
          // アラートを表示
          alert(response.tableEmp.errors);
        }
      }
    }
// --></script>
</head>
<body>
  …
  <!-- 所属選択セレクトボックスを配置 -->
  所属：
  <select $tableEmp.params.deptCode.nameBind
        onchange="ls.ajax('searchEmpList',ajaxUpdateUITable);">
        <option value="-1">--</option>
        #foreach( $dept in $tableDept.Rows )
          <option value="$dept.code"
            #if($tableEmp.params.deptCode==$dept.code)
              selected="selected"
            #end>
          $dept.name</option>
        #end
  </select>
  …
</body>

「 prototype.js 」の読み込み

Ajax 呼び出しを使用する際は必ず、「 prototype.js 」を読み込みます。

「 $tableEmp.params.nameBind 」

WebSQL テーブルオブジェクトのパラメータと画面入力フォームを関連付けます。

Ajax によるアクションメソッドの呼び出し

JavaScript 関数「 ls.ajax('アクションメソッド', AjaxRequest クラス) 」を呼び出し、ActionPage と連携します。

AjaxRequest クラス

Ajax から呼び出されたアクションメソッドの処理が完了した後の処理を記述します。
本サンプルでは、完了後にレスポンスの内容で HTML タグ ID ” tableBody ”の内容を更新し、
レスポンスにエラーが含まれている場合、アラートを表示しています。
ActionPage クラスにアクションメソッドを追加する
ActionPage クラスに画面から呼び出すアクションメソッドを追加します。
/* DBからデータを読み込み、WebSQLテーブルオブジェクトに格納します。 */
public void searchEmpList() throws Exception {
  Connection conn = getConnection();
  try {
    // WebSQLテーブルオブジェクトを非アクティブ化
    tableEmp.passivate();
    // WebSQLテーブルオブジェクトをアクティブ化
    tableEmp.activate(conn);
    // Ajaxレスポンスを出力
    writeAjaxResponse(getMergedString("EmpPageTable.html"));
  }
  finally {
    // コネクションのクローズ
    conn.close();
  }
}

WebSQL テーブルオブジェクトを非アクティブにする（「 passivate 」メソッド）

WebSQ Lテーブルオブジェクトの状態を非アクティブにします。

Ajax レスポンスを出力する（「 writeAjaxResponse 」メソッド）

HTML の断片を書き出します。本サンプルアプリでは「 getMergedString 」メソッドで ActionPage の内容とテンプレートをマージしたものを
書き出しています。書き出した内容は、画面 JavaScript の onComplete(response) に返されます。
ページを表示する
セレクトボックスの内容を変更し、画面が書き換わることを確認します。