Pocket

こんにちは、kikuchiです。

今回はAjaxを利用して、画面遷移なしでサーバからデータを取得して画面に表示してみたいと思います。
前回作成したSpringMVCのサンプルプロジェクトをベースにします。
SpringIDEで始めるSpringMVCプロジェクト
Ajaxについては今回jQueryを利用するため、ライブラリをプロジェクトに追加しておきます。

Jacksonライブラリの追加

サーバからのデータ返却にJSONを使用するため、Jacksonライブラリを利用します。
Mavenに下記を追加。

  • pom.xml
  • <dependency>
    	<groupId>com.fasterxml.jackson.core</groupId>
    	<artifactId>jackson-databind</artifactId>
    	<version>2.4.4</version>
    </dependency>
    

    すると、関連するライブラリも一緒に引っ張ってきてくれます。

    サーバ側の処理

    デフォルトで作成されているコントローラに、下記メソッドを追加します。
    配列のデータを返す単純なものです。

  • HomeController.java
  • 	/**
    	 * テストデータの配列を返却する。
    	 */
    	@RequestMapping(value = "getTestData", method = RequestMethod.GET)
    	@ResponseBody
    	public String[] getTestData() {
    
    		logger.info("call getTestData");
    		String[] datas = {"test1", "test2", "test3"};
    
    		return datas;
    	}
    

    Springの機能により、メソッドにResponseBodyアノテーション(5行目)を付けることで、リクエスト結果をJSON形式で返却することが出来ます。

    画面(JSP)側の処理

    ボタンクリック時にリクエストを送信してデータを取得します。
    urlにはコントローラのリクエストマッピングと合うようにパスを記載します。
    成功時に、取得したデータをhtmlに出力しています。

  • home.jsp(javascript部分)
  • <script type="text/javascript">
    $(function() {
    	// Ajax通信テスト ボタンクリック
    	$("#ajax_btn").click(function() {
    		// outputDataを空に初期化
    		$("#output_data").text("");
    		$.ajax({
    			type		: "GET",
    			url			: "getTestData",
    			dataType	: "json",
    			success		: function(data) {
    							success(data);
    						},
    			error		: function(XMLHttpRequest, textStatus, errorThrown) {
    							error(XMLHttpRequest, textStatus, errorThrown);
    						}
    		});
    	});
    });
    
    // Ajax通信成功時処理
    function success(data) {
    	alert("success:" + data);
    
    	$("#output_data").text("");
    	for (var cnt = 0; cnt < data.length; cnt++) {
    		$("#output_data").append("data[" + cnt + "]:" + data[cnt] + ";");
    	}
    }
    
    // Ajax通信失敗時処理
    function error(XMLHttpRequest, textStatus, errorThrown) {
    	alert("error:" + XMLHttpRequest);
    	alert("status:" + textStatus);
    	alert("errorThrown:" + errorThrown);
    }
    </script>
    
  • home.jsp(html部分)
  • <body>
    <h1>
    	Hello world!
    </h1>
    
    <P>  The time on the server is ${serverTime}. </P>
    
    <div id="ajax_data">
    	<input type="button" id="ajax_btn" value="Ajax通信テスト" /><br />
    	outputData:<span id="output_data"></span>
    </div>
    
    </body>
    </html>
    

    実行してみる

    まずはページにアクセス。
    現在時刻が表示されます。

    6144001

    次にボタンクリックでリクエスト送信。
    サーバからデータを取得してhtmlへ表示します。
    時刻を見ると、変わっていない(=画面遷移していない)ことが分かります。

    6144002

    如何でしたでしょう。
    単純なものなら結構簡単に実現出来たと思います。