프로그래밍

[Spring] day72 : 스프링 레거시 프로젝트에서 별도의 라이브러리 없이 진행할 수 있는 비동기처리 본문

자바/Spring

[Spring] day72 : 스프링 레거시 프로젝트에서 별도의 라이브러리 없이 진행할 수 있는 비동기처리

시케 2023. 8. 22. 14:06
728x90
반응형

2023.08.22.화

비동기처리

스프링 레거시 프로젝트에서 별도의 라이브러리 없이 진행할 수 있는 비동기처리를 구현해볼것이다

스프링의 경우 비동기 .ajax()로 주고 받을때 거의 JSON 형식으로 데이터를 주고 받는다
JSON 데이터의 경우 자바의 Map 컬렉션과 구조가 비슷하다

 

이전에도 비동기처리에 관한 내용을 다루었으며 유사한 방식이니 참고하는 것이 좋다

2023.07.05 - [Web] - [Web] day37 : ajax() 메서드와 JSON 데이터

 

[Web] day37 : ajax() 메서드와 JSON 데이터

2023.06.27.화 ajax() 메서드와 JSON 데이터 ajax() 메서드는 "비동기처리"를 지원한다 페이지 이동없이 (별도의 페이지 호출없이), 현재 페이지에서 필요한 데이터를 바로 로드해서 작업이 가능하다 JSON

dev-9rm.tistory.com

 

구현

test.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
</head>
<body>

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

<script type="text/javascript">
	
	$("#photo").on("click",function(){	
		var testData={count:cnt, apple:1234, banana:'kiwi'}; // JSON 데이터
		
		$.ajax({
			url : "test.do",
			type : "POST",
			data : testData,
			success : function(result){
				console.log("성공: "+result);
			},
			error : function(){
				console.log("로그 : 에러발생...");
			}
		});
	});
</script>

</body>
</html>

 

TestController.java

package com.spring.view.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;

@Controller
public class TestController {

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

 

이대로 실행을 시키면 404 에러가 발생한다

404에러는 Page Not Found 에러로 페이지를 찾을 수 없을때 발생하는 에러이다

그럼 "test.do"를 찾지 못했어야 하는데 해당 메서드 내의 로그는 출력되는 것을 볼 수 있다

즉, "test.do" 메서드가 존재하고 맵핑까지 제대로 되어있는 상태이다

 

다만 현재 @Controller 객체를 사용중이며 @RequestMapping을 사용 중이다

이때 ViewResolver가 동작하여 return 값인 "KIM"을 가야할 페이지로 인식하여 "해당 페이지를 찾을 수 없음" 에러가 발생하는 것이다

 

우리는 페이지 이동을 원하는 것이 아니다

ViewResolver가 동작하는 것을 원치 않기 때문에

페이지 이동을 원하는 것이 아닌 그저 "데이터 전달"이 목표임을 알려주어야 한다

 

이때 사용하는 어노테이션이 @ResponseBody 이다

 

@ResponseBody

해당 어노테이션을 사용시 .ajax() 비동기 요청시 리턴값이 success의 인자로 들어가게 된다

이때 @RequestParam로 VIEW에서 보내는 데이터를 명시하여 전달 받은 후 사용할 수 있다

 

test.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
</head>
<body>

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

<script type="text/javascript">
	var cnt = 1; // scope 이슈 확인할것
	
	$("#photo").on("click",function(){
		console.log("cnt : "+cnt);
		
		var testData={count:cnt, apple:1234, banana:'kiwi'}; // JSON 데이터
		
		$.ajax({
			url : "test.do",
			type : "POST",
			data : testData,
			success : function(result){
				console.log("성공: "+result);
				cnt=result;
				if(cnt%2==0){
					$("#photo").prop("src","images/test.png");
				}
				else{
					$("#photo").prop("src","images/default.jpg");
				}
			},
			error : function(){
				console.log("로그 : 에러발생...");
			}
		});
	});
</script>

</body>
</html>

 

TestController.java

package com.spring.view.controller;

import java.util.Map;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;

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

 

단, @RequestParam 을 사용하여 모든 인자를 보낼시 파라미터가 길어지므로
인자를 다른 방법으로 받아서 설정할 수 있다

위에서 JSON 데이터 형식과 Map 컬렉션의 형식이 유사하기 때문에 Map<>을 사용할 것이다

@RequestParam Map<String, Object> map

어떠한 데이터가 올지 모르기 때문에 Object 타입을 사용하고 다운캐스팅(형변환)하였다

	@RequestMapping(value="/test02.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"));
		Integer count=(Integer)map.get("count");
		count++;
		return count.toString();
	}

 

더보기

원시 타입(int)은 어떠한 메서드의 주체가 될 수 없다

하지만 객체는 가능하다(Integer) ---> 자바는 객체지향언어이기 때문에

 

https://github.com/jihyean/Spring/tree/main/day72

 

728x90
반응형

'자바 > Spring' 카테고리의 다른 글

[Spring] day74 : 다국어처리  (2) 2023.08.24
[Spring] day70 : NULL update 이슈  (1) 2023.08.20
[Spring] day70 : 예외 발생 처리 페이지  (0) 2023.08.18
[Spring] day69 : 파일 업로드 예제  (2) 2023.08.17
[Spring] day68 : JDBC Template  (0) 2023.08.17
'자바/Spring' Related Articles more
Comments