[Spring] 스프링에서 AJAX 사용하기 (@ResponseBody)

@ResponseBody

 - 반환 객체를 HTTP 응답으로 전송하는 어노테이션.

• 메소드에서 반환하는 자바 객체를 HTTP 응답 몸체로 변환한다.
• 자바 객체를 HTTP 요청의 body 내용으로 매핑하는 역할. (AJAX-JSON형식에서 필수!)

 - HttpMessageConverter를 통해 HTTP 응답 스트림으로 변환.

 - @RestController 에는 기본적으로 @ResponseBody 가 적용되서 메소드 레벨에서 추가하지 않아도 된다.

 - 스프링 4.0부터는 MappingJackson2HttpMessageConverter를 이용하여 자바 객체를 JSON으로 변환하거나 JSON을 자바 객체로 변환한다. 

 - pom.xml에 jackson 의존성을 추가한다.

<properties>
	...
	<org.json-version>20220924</org.json-version>
</properties>

<dependencies>
	...
	<!-- jackson -->
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-core</artifactId>
            <version>${jackson-version}</version>
        </dependency>
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-databind</artifactId>
            <version>${jackson-version}</version>
        </dependency>
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-annotations</artifactId>
            <version>${jackson-version}</version>
        </dependency>

		<!-- JSON -->
		<dependency>
		    <groupId>org.json</groupId>
		    <artifactId>json</artifactId>
		    <version>${org.json-version}</version>
		</dependency>
 </dependencies>

 

@ResponseBody 활용 예제

 - json 형식(dataType)으로 AJAX

function userIdCheck() {

	...
    let url = "${pageContext.request.contextPath}/member/userIdCheck";
	let query = "userId=" + userId;
	$.ajax({
		type:"POST"
		,url:url
		,data:query
		,dataType:"json"
		,success:function(data) {
			let passed = data.passed;

			if(passed === "true") {
				let str = "<span style='color:blue; font-weight: bold;'>" + userId + "</span> 아이디는 사용가능 합니다.";
				$(".userId-box").find(".help-block").html(str);
				$("#userIdValid").val("true");
			} else {
				let str = "<span style='color:red; font-weight: bold;'>" + userId + "</span> 아이디는 사용할수 없습니다.";
				$(".userId-box").find(".help-block").html(str);
				$("#userId").val("");
				$("#userIdValid").val("false");
				$("#userId").focus();
			}
		}
	});
}

 

 

 - Map → JSON으로 변환하여 반환

	@RequestMapping(value = "userIdCheck", method = RequestMethod.POST)
	@ResponseBody
	public Map<String, Object> idCheck(@RequestParam String userId) throws Exception {

		String p = "true";
		Member dto = service.readMember(userId);
		if (dto != null) {
			p = "false";
		}

		Map<String, Object> model = new HashMap<>();
		model.put("passed", p);
		return model;
	}