vaguely

和歌山に戻りました。ふらふらと色々なものに手を出す毎日。

Servlet + TomcatでWeb その2

Java JavaScript Servlet

はじめに

前回の後半で、 非同期でHTMLファイルを読み込んでページの一部を置き換える処理をしていましたが、結局JavaScriptから直接WebContent＞contentsにあるファイルを取得することにしました。

javascript.js

〜省略〜
this.getHtml = function(intNewTabNum, intNewContentNum) {
  $.ajax({
    type: 'GET',
    /* ex: contents/0.html */
    url: 'contents/' + ContentFileCollection.findWhere({page: intNewTabNum, content: intNewContentNum}).get('file'),
    dataType: 'html',
    success: function(data) {
      $('#contents_frame').html(data);
    },
    error:function() {
      alert('Error');
    }
  });
};
〜省略〜

以下に記述するようなページ全体を切り替える処理、またはServletのコード内でHTMLを記述しているものが多く、解決には時間がかかりそうだったためです。

ページ遷移

Servletでページ遷移を行うためには、「getRequestDispatcher」と「forward」を使用します。

「getRequestDispatcher」で遷移先のHTML、JSPなどのパスを指定して、「forward」で現在のページから指定のページに制御を渡してやります。

PageController.java

〜省略〜
Enumeration _enmParamName;
String _strPagePath = "";
RequestDispatcher _rdsDispatcher;
String _strParamName = "";
public PageController() {
    super();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  // エンコーディングの指定.
  request.setCharacterEncoding("UTF-8");

  // JavaScriptからパラメータを取得.
  _enmParamName = request.getParameterNames();

  while (_enmParamName.hasMoreElements()){
    _strParamName = _enmParamName.nextElement();
    // パラメータ名「tab」の値を取得する.
    if (_strParamName.equals("tab"))
    {
      switch(Integer.parseInt(request.getParameter(_strParamName)))
      {
      case 1:
        _strPagePath = "mainpage2.html";
        break;
      default:
        // 1以外はすべて0のページを表示しておく.
        _strPagePath = "mainpage.html";
        break;
      }
      
      _rdsDispatcher = request.getRequestDispatcher(_strPagePath);
      // ページ遷移
      _rdsDispatcher.forward(request, response);
      
    }
  }
}
〜省略〜
  • パラメータを取得するあたりは前回と同じですが、後述する処理のため、パラメータが2つ以上になることからdoGetの中でパラメータ名を確認しています。
  • WebContent直下にmainpage.html、mainpage2.htmlという2つのファイルを置き、JavaScriptから渡されるパラメータによって出し分けています。

JavaScriptでパラメータの値を取得

この辺で作成していた、ページ遷移前に表示していたTabの状態を遷移後に引き継ぐ処理を行います。
HTMLのテンプレートエンジンなどを使用していないため、URLのパラメータから該当の値を取得することにします。

  • Tabの状態を表すパラメータは「rtn=2」の形で渡すこととします。
  • 表示するページの番号もパラメータに含めているため、URLとしては「localhost:8080/jvTabTest/page?tab=0&rtn=2&...」のような形となります。

javascript.js

〜省略〜
this.loadTabs = function(intNewTabNum, intLastRightTabNum){
  // URLのパラメータを取得して、右に表示されるTab番号(rtn=2)を取得する.
  
  // 「window.location.search」で、URLから?以降のパラメータが取得できる.
  var arySplitByName = window.location.search.split('rtn=');
  var aryRightTabNum = (arySplitByName.length > 1)? arySplitByName[1].split('&'): [2];
  
  // ロード時に実行. Tabの表示切り替え、矢印ボタンのEnable/Disable.
  intTabNum = intNewTabNum;
  intRightTabNum = aryRightTabNum[0];
  updateTabStyles();
  // デフォルトでボタン0のコンテンツが表示されるようにする
  document.getElementById("btn_contents_0").checked = true;
  getHtml(intTabNum, 0);
};
〜省略〜
  1. 「window.location.search」で「?tab=0&rtn=2&...」の部分を取得
  2. 「rtn=」でSplitして、「2&...」の部分を取得
  3. 「&」でSplitして、「2」を取得

なんだか回りくどい方法ですね...。　jQueryプラグインなどもあるようなのですが...。

ともかく、これで少しはそれらしい動きになってきた気がします。

ただ、エラー処理などを全くしていないので、次回はそのあたりを触ってみたいと思います。

参考