[Spring] Spring Lagacy project에서 별도의 라이브러리 없이 진행할 수 있는 비동기 처리

오늘은 .ajax() 비동기 요청 시 JSON 데이터를 주고 받아보는 방법에 대해 알아보려고 한다.

(JSON 데이터는 JAVA의 MAP 컬렉션과 유사하여 MAP을 활용하고, 이벤트 등록을 하는 방식으로 js 사용 예정)

 

 

먼저 webapp 하위에 test.jsp 파일을 만든다.

 

 

다음으로 jQuery를 활용해야 하므로 아래의 링크를 통해 'jQuery CDN' 에서 플러그인을 복사하여 붙혀 넣는다.

(jQuery 3.x -->  minified 클릭 --> 코드 복사 --> test.jsp 붙혀넣기)

 

https://releases.jquery.com/

jQuery CDN

 

 

jQuery 플러그인

<script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>

 

 

먼저 기본으로 사용할 이미지를 등록한 후에 비동기처리에 사용할 id를 추가한다.

<img alt="디폴트 이미지" src="images/default.jpeg" id="photo">

 

 

먼저 'on:"click"' 함수가 실행이 잘 되는지를 확인하기 위해 아래와 같이 코드를 작성한 후, 성공 시에 testController.java에서 값이 잘 넘어 오는지를 확인한다.

 

 

test.jsp

<script type="text/javascript">

$('#photo').on("click",function() {
		console.log("로그: 이미지 클릭함");
		
		// var testData = {키값: vlaue값, 키값: value값, ...}; // JSON 타입의 데이터를 선언
		var testData = { apple:1234, banana:'kiwi' }; // JSON 타입의 데이터를 선언
		
		$.ajax({
			url : "test.do",
			type : "POST",
			data : testData,
			success : function(result) { // String 이 반환 되면 result를 볼 수 있음.
				console.log("로그 : 성공! " + result);
			},
			error : function() {
				console.log("로그 : 에러발생..");	
			} 
		});
	});
</script>

 

 

testController.java

@Controller
public class TestController {
	
	@RequestMapping(value="/test.do", method=RequestMethod.POST)
	public String test() {
		System.out.println(" 로그 : .ajax() 메소드 수행함");
		return "KIM";
	}
}

 

 위와 같이 코드를 작성 시에는 testController까지는 가지만 메소드에서 404에러(PageNotFound)가 발생한다. 이 에러는 RequestMapping의 test.do를 찾을 수 없을 때 발생하는 에러인데 현재 test.do의 Mapping이 존재하며, 로그까지 출력이 된다. 그럼 왜 이런 에러가 발생하냐면, 현재 @Controller 객체와 @RequestMapping 객체를 사용중이기 때문이다. 즉, ViewResolver가 작동중인 것이다. 따라서 ViewResolver가 'KIM' 이라는 페이지를 찾지 못하여 발생한 에러라고 볼 수 있다.

 

 우리는 페이지 이동을 원하는 것이 아니고, ViewResolver가 필요 없는 것이기 때문에 VO를 JSON 형태로 변환해서 반환해주는 @ResponseBody 를 사용해야 한다. 코드 수정은 아래와 같이 한다.

 

 

testController.java

@Controller
public class TestController {
	
	@RequestMapping(value="/test.do", method=RequestMethod.POST)
    @ResponseBody
	public String test() {
		System.out.println(" 로그 : .ajax() 메소드 수행함");
		return "KIM";
	}
}

 

 

 

다음으론 클릭할 때마다 클릭 수 증가 및 이미지가 변경되는 비동기 처리에 대해 알아보려고 한다.

test.jsp

<img alt="디폴트 이미지" src="images/default.jpeg" id="photo">

<script type="text/javascript">
var cnt = 1;

	$('#photo').on("click",function() {
		console.log("cnt: " + cnt);
		
		// var testData = {키값: vlaue값, 키값: value값, ...}; // JSON 타입의 데이터를 선언
		var testData = { count:cnt, apple:1234, banana:'kiwi' }; // JSON 타입의 데이터를 선언
		
		$.ajax({
			url : "test.do",
			type : "POST",
			data : testData,
			success : function(result) { // String 이 반환 되면 result를 볼 수 있음.
				console.log("로그 : 성공! " + result);
				cnt = result; // 새로 값을 세팅
				if(cnt % 2 == 0) {
					$('#photo').prop("src", "images/test.png"); // 사진을 변경해줘
				}
				else {
					$('#photo').prop("src" , "images/default.jpeg"); // 디폴트 이미지로 해줘
				}
			},
			error : function() {
				console.log("로그 : 에러발생..");	
			} 
		});
	});
</script>

 

cnt 변수를 함수 밖에 선언하는 이유는 클릭을 할 때마다 cnt를 1로 초기화 시키는 것이 아닌 계속 증가되도록 설정하기 위해 함수 밖에 선언하였고, 클릭을 한번 하였을 경우 2가 되므로 이미지가 변경된다. 또한, 한번 더 클릭 시에는 3이 되므로 다시 처음 이미지로 돌아가도록 설정하였다. (cnt는 testController.java 에서 처리할 예정)

 

 

 다음으론 testController.java 파일이다. test.jsp에서 선언한 변수인 count, apple, banana를 사용하기 위해 @RequestParam 을 사용하여 변수명을 맞춰 값을 가져와 사용하였다. 또한, test.jsp에서 가져온 count를 ++ 해준 후 값을 반환 해준다. count 값이 int 형 이므로 반환 시에는 반환 자료형인 String 형에 맞게 반환하였다.

 

 

TestController.java

@RequestMapping(value="/test.do", method=RequestMethod.POST)
	@ResponseBody
	public String test(@RequestParam("count")int count, @RequestParam("apple")int apple, @RequestParam("banana")int banana) {
		System.out.println("count: " + count);
		System.out.println("apple: " + apple);
		System.out.println("banana: " + banana);
		count++;
		return String.valueOf(count);
	}

 

 

하지만 위의 count는 원시 타입 count이기 때문에 메소드의 주체가 될 수 없다. 따라서 객체 타입인 Map 을 활용하여 메소드의 주체로 사용할 수 있다. 또한, 매개 변수를 줄이는 방법이다.

 

 

TestController.java

@RequestMapping(value="/test.do", method=RequestMethod.POST)
	@ResponseBody
	public String test02(@RequestParam Map<String, Object> map) { // 인자를 줄이는 방식
		System.out.println("count: " + map.get("count"));
		System.out.println("apple: " + map.get("apple"));
		System.out.println("banana: " + map.get("banana"));
		int count = Integer.parseInt(map.get("count").toString());
		count++;
		return String.valueOf(count);
	}