tomcat7 + struts2でwebアプリ(12)　Ajax(1)

JAVA web

ボタンを押して時刻を取得するサンプル。
初回アクセスで時刻を表示して、ボタン押下時にjsonから取得したデータで時刻を更新する。
jsonの生成には、struts2のjsonプラグインを使用。アクションをそのまま利用してjson作成できるのが便利。

（とりあえず時刻データはミリ秒データで受け取ってます）

ライブラリを追加する

struts2のプラグインとjqueryを入れる。

  1. commons-lang3-3.4.jar
  2. struts2-json-plugin-2.3.24.jar
  3. jquery-1.11.2.min.js

jarファイルはビルドパスに追加する。

時刻データ用のオブジェクトを作成する(ServerTimeDto.java)

package jp.ne.hatena.matasaburou.dto;

import java.io.Serializable;

public class ServerTimeDto implements Serializable {

	private Long time;

	public ServerTimeDto() {
	}

	public Long getTime() {
		return time;
	}

	public void setTime(Long time) {
		this.time = time;
	}

}

アクションを作成する(ServerTimeAction.java)

ModelDrivenでjsonデータの対象とするメンバを設定しておく。

package jp.ne.hatena.matasaburou.action;

import jp.ne.hatena.matasaburou.dto.ServerTimeDto;

import com.opensymphony.xwork2.ActionSupport;
import com.opensymphony.xwork2.ModelDriven;

public class ServerTimeAction extends ActionSupport implements ModelDriven<ServerTimeDto> {
	private ServerTimeDto model;

	@Override
	public String execute() throws Exception {
		model = new ServerTimeDto();
		model.setTime(System.currentTimeMillis());
		return "success";
	}

	public ServerTimeDto getModel() {
		return model;
	}

	public void setModel(ServerTimeDto model) {
		this.model = model;
	}


}

設定ファイルのアクション定義を更新（struts.xml）

json生成のためのアクション定義を、"json-default"で別途定義する。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE struts PUBLIC
    "-//Apache Software Foundation//DTD Struts Configuration 2.1.7//EN"
    "http://struts.apache.org/dtds/struts-2.1.7.dtd">

<struts>
	<constant name="struts.devMode" value="false" />

	<package name="stest" extends="struts-default" namespace="/">
		<global-results>
			<result name="exception">/WEB-INF/jsp/error.jsp</result>
		</global-results>

		<action name="timeAction" class="jp.ne.hatena.matasaburou.action.ServerTimeAction">
			<result name="success">/WEB-INF/jsp/time.jsp</result>
		</action>

	</package>

	<!-- jsonレスポンスを返すアクションを定義 -->
	<package name="example" extends="json-default" namespace="/">
		<!-- レスポンスの種別にjsonを追加する -->
		<result-types>
			<result-type name="json" class="org.apache.struts2.json.JSONResult" />
		</result-types>

		<!-- アクション定義 -->
		<action name="updateTimeAction"
			class="jp.ne.hatena.matasaburou.action.ServerTimeAction">
			<!-- jsonを返す。目的に応じてparamには色々ある模様 -->
			<result type="json">
				<param name="root">model</param>
			</result>
		</action>
	</package>

</struts>

時刻を表示するjsp（time.jsp)

結果表示画面。時刻だけ表示する。

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="contents/js/jquery-1.11.2.min.js" type="text/javascript"></script>
<script src="contents/js/script.js" type="text/javascript"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
現在の時刻
<div id="time">
	<s:property value="model.time"/>
</div>
<input type="button" onclick="update();" value="update">
</body>
</html>

JSONデータ処理のjavascriptを作成する(script.js)

jqueryを使用。お約束の処理。
通信結果に応じた処理を記述できる。(done,error,successなど。今回は成功時のみ更新処理）

/**
 * ajax test
 */

function update(){
	$.ajax({
		url:		'./updateTimeAction.action',
		type:		'GET',
		dataType:	'json',
		success:	function(json){
						$('#time').text(json.time);
					}
	})
}