Ajax

Ajax対応コントロール

S2Clickが提供するAjax対応のコントロールとしてAjaxLink、 AjaxButton、 AjaxSubmitがあります。 これらのコントロールをClick標準のActionLink、ActionButton、 Submitの代りに使用することでXMLHttpRequestを用いたAjax通信が可能です。

AjaxLink、AjaxButton

AjaxLink、AjaxButtonはprototype.jsのAjax.Request、 Ajax.Updaterを使用してAjaxを実現するためのリンク、ボタンを提供するコントロールです。 どちらも使い方は同じなので、ここではAjaxLinkを例にして説明します。

以下のコードはAjax.Requestを使ってページクラスのonClickメソッドを呼び出します。 また、正常にレスポンスが戻るとJavaScriptのdisplayResult()関数が呼び出されます。 

AjaxLink link = new AjaxLink("link", this, "onClick");
link.addAjaxHandler(AjaxUtils.ON_COMPLETE, "displayResult");
addControl(link);

以下のコードはAjax.Updaterを使ってページクラスのonClickメソッドを呼び出し、 レスポンスの内容でHTMLのid属性がresultの要素を内容を置き換えます。 

AjaxLink link = new AjaxLink("link", this, "onClick");
link.setElementId("result");
addControl(link);

AjaxSubmit

AjaxSubmitはSubmitコントロールの代りに使用することでフォームの内容をAjaxで送信することができます。 基本的な利用方法はAjaxLinkやAjaxButtonの場合と同じです。 

AjaxSubmit submit = new AjaxSubmit("submit", this, "onClick");
submit.addAjaxHandler(AjaxUtils.ON_COMPLETE, "displayResult");
form.add(submit);

@AjaxHandlerアノテーション

Ajaxコントロールをフォームクラスのpublicフィールドとして定義する場合、 addAjaxHandler()メソッドでの設定を @AjaxHandlerアノテーションで行うことができます。 

public class JsonForm extends S2ClickForm {

  private static final long serialVersionUID = 1L;

  public TextField keyword = new TextField("keyword", "書籍名");

  @AjaxHandler(onCreate="startProgress", onComplete="displayResult")
  public AjaxSubmit search = new AjaxSubmit("submit", "検索");

  @AjaxHandler(onCreate="startProgress", onComplete="displayResult")
  public AjaxButton searchAll = new AjaxButton("searchAll", "全件検索");

  @Attributes({@Attribute(name="onclick", value="clearResult()")})
  public Button clear = new Button("clear", "クリア");

  public JsonForm(String name){
    super(name);
    setFieldAutoRegisteration(true);
  }
}

ページクラスのメソッドをAjaxで呼び出す

S2Clickのもう1つのAjax対応機能として、@Ajaxアノテーションを用いて ページクラスの任意のメソッドをAjaxで呼び出すための機能があります。

ページクラスのpublicメソッドに@Ajaxアノテーションを付与しておくと、 そのメソッドをprototype.jsのAjax.Requestで呼び出すJavaScript関数がS2Clickによって自動生成されます （HTMLテンプレートに$pageImportsを記述しておくと必要に応じて自動的に出力されます）。 このJavaScript関数を用いることでクライアントサイドJavaScriptからページクラスのメソッドをAjaxで呼び出すことができます。

たとえばページクラスに以下のようなメソッドがあったとします。 

@Ajax
public void getContent(String id){
  Article article = articleService.selectArticle(id);
  renderHTML(article.content);
}

このとき、S2Clickは以下のようなJavaScript関数を生成します。 第一引数にはAjax呼び出しの結果を処理する関数を指定します。第二引数以降はサーバ側のメソッドに渡す引数を指定します。 

// S2Clickによって自動生成されたJavaScript関数
function getContent(resultHandler, arg0){
  // Ajax.Requestによる通信
  ...
}

この関数を以下のように呼び出すことでページクラスのメソッドをAjaxで呼び出すことができます。 

// 自動生成されたJavaScript関数を使ってサーバのgetContentメソッドを呼び出し
getContent(function(transport){
  $('content').innerHTML = transport.responseText;
}, '1');

ただし、このアノテーションを付与したメソッドをAjaxで呼び出す場合、 通常のページの処理で行われるonInit()、onSecurityCheck()などの呼び出しは行われません。 アノテーションを付与したメソッドのみが呼び出されるという点に注意してください。

レスポンスを戻り値で返却する

上記の例ではレスポンスの内容をS2ClickPage#renderHTML()メソッドで出力していますが、 メソッドの戻り値として返却することも可能です。

上記以外の形式でAjaxリクエストに対するレスポンスを行いたい場合は S2ClickServlet#renderAjaxResponse() をオーバーライドしてください。