intra-mart Accel Platform UIデザインガイドライン（PC版）第6版 2022-12-01

目次 ≪ 6.5.2. 汎用メッセージ画面 6.6. 国際化情報入力項目 ≫

6.5.3. Ajax のエラー処理¶

Ajax の通信先で回復不能なエラーが発生した場合、エラー画面へ遷移したい場合があります。

ここではこのような場合にエラー画面へ遷移するための仕組みと実装方法を説明します。

項目

エラー画面へ遷移するための仕組み
実装方法
- 独自のエラー処理をしながらエラー画面へ遷移したい

6.5.3.1. エラー画面へ遷移するための仕組み ¶

サーバ側で例外が発生すると httpXXX.jsp（http500.jsp, http401.jsp など）が呼び出されます。

Ajax のリクエストの場合、httpXXX.jsp のレスポンスは Ajax 内で閉じるため画面にエラーが表示されません。

Ajax のリクエストでもエラー画面に遷移するため、以下のような仕組みを実装しています。

Ajax のリクエストを送る際に、HTTP Header へ x-jp-co-intra-mart-ajax-request-from-imui-form-util = true をセットする。

サーバで例外が発生した際、httpXXX.jsp は HTTP Header へ x-jp-co-intra-mart-ajax-request-to-imui-form-util = true をセットし、エラー情報を JSON としてレスポンスを返す。

$.ajax の error: で、x-jp-co-intra-mart-ajax-request-to-imui-form-util が HTTP Header に存在する場合、エラー情報をパースし、エラー情報を Form にセットして元の画面（httpXXX.jsp）へサブミットする。

画面にサーバで発生した例外が表示される。

6.5.3.2. 実装方法 ¶

jQuery.ajax の headers, error に以下のように指定します。
1
2
3
4
5
6
 $.ajax({
   ...,
   headers: { 'x-jp-co-intra-mart-ajax-request-from-imui-form-util': 'true' },
   error: imuiTransitionToErrorPage,
   ...
 });
このように実装することで、サーバで例外が発生した際にエラー画面へ遷移させることができます。

6.5.3.2.1. 独自のエラー処理をしながらエラー画面へ遷移したい ¶

上記サンプルでは、エラー画面へ遷移するだけで他の処理はしません。

独自の処理を追加したい場合は以下のように実装することができます。
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
$.ajax({
  ...,
  headers: { 'x-jp-co-intra-mart-ajax-request-from-imui-form-util': 'true' },
  error: function(XMLHttpRequest, textStatus, errorThrown) {
    //
    // 独自の処理を実行
    //

    imuiTransitionToErrorPage(jqXHR, textStatus, errorThrown);
  },
  ...
});

目次 ≪ 6.5.2. 汎用メッセージ画面 6.6. 国際化情報入力項目 ≫