Ajaxによる画面描画

最終更新日: 2021年10月28日
R8 | R9

Ajaxの概要

Ajax (Asynchronous JavaScript ＋ XML) とは、画面再描画することなしに画面（ページ）の一部を書き換える技術を指します。

一般的な Web アプリケーションでは、クライアントからサーバにデータを要求すると、画面再描画によってページ内容を更新します。しかし Ajax では、登録や更新画面を開いたままの状態で、裏で通信処理を行い、画面の一部を書き換えます。（これを非同期通信と呼びます。）

図1 Ajax動作のイメージ

Ajaxが動作するパターン

WagbyではAjaxに関する設定箇所はありません。登録や更新画面で、以下のパターンについて自動的にAjaxが動作します。

  • 自動計算式が設定された項目。
  • 参照連動が設定された（他モデル参照）項目。
  • 他モデル参照項目(リストボックス等)の絞り込みに指定された項目。
  • 他モデル参照項目(リストボックス等)にて、モデル参照(絞込)の自モデル項目名に指定された項目。
  • 他モデル参照項目にて、サジェスト機能が使われている項目。

Ajaxの多重度

1利用者につき、同時に処理される Ajax は1つとなります。（利用者のHTTPセッションごとに1つのAjax処理が逐次、実行されます。）

ワンポイント

ある画面操作を連続して行った場合、最初の Ajax 処理の返信が（サーバから）戻ってこないうちに次の Ajax 処理が開始されると、最初の返信はもう行う必要がなくなった、と扱われます。サーバではこの返信はクライアント（ブラウザ）からキャンセルされたと解釈し、その後の Ajax 処理の返信のみを行います。このとき、ログには "ClientAbortException" が記録されます。（これは不具合ではありません。）

フォーカスの扱いに関する注意

自動計算等の変更元となるテキストボックスの値を変更後、フォーカスを外さずに「保存」ボタン等を押下すると Ajax が実行されます。このとき、Ajax 処理中はボタンが押下不可となるため、保存ボタンは無視されています。（つまり保存ボタンは効きません。フォームのサブミットは行なわれない、ということです。）

Ajax の実行が完了すると、ボタンが押下可能となります。それを待ってから、保存ボタンを押下するようにしてください。または値を変更後にフォーカスを外してから、保存ボタンを押すようにしてください。