---

Jackson Library

---

• Java JSON 라이브러리이다.
• Java Object를 Json으로 변환한다.

---

설치

• 메이븐 레파지토리 사이트 : https://mvnrepository.com/
• 메이븐 레파지토리에서 라이브러리를 검색한뒤 디펜던시를 복사한다.
• 프로젝트 내 pom.xml에 추가한다.
  

<!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-databind -->
<dependency>
    <groupId>com.fasterxml.jackson.core</groupId>
    <artifactId>jackson-databind</artifactId>
    <version>2.15.2</version>
</dependency>

• XML용 Jacson 예)
  

---

Annotation

---

@ResponseBody

• 메소드 레벨 Annotation
• 메소드의 반환 값이 응답 데이터라는 의미이다.
• Ajax 처리할 때 사용하는 Annotation 이다.

@ResponseBody 대체 가능

• @RestController
• ResponseEntity 클래스

@RestController

• 클래스 레벨 Annotation
• 모든 메소드에 @ResponseBody를 디폴트로 추가하는 @Controller이다.
• Ajax 처리할 때 사용하는 Annotation 이다.

@RequiredArgsConstructor

• 클래스 레벨 Lombok Annotation
• 처리 방식에 따라 @AllArgsConstructor와 사용법이 나뉜다.
• Field를 final 처리 할 때 @Autowired를 대신한다.
• Null이 아닐 때 사용한다.
• 생성자를 통한 자동주입(@Autowired)을 한다.

---

ResponseEntity Class

• Ajax 응답 전용으로 사용하도록 만들어놓은 Spring Class
• @ResponseBody가 포함되어 있어서 annotation을 작성할 필요가 없다.

---

JSON.stringify() 메서드

• stringify() : JavaScript 데이터 객체를 JSON 문자열로 반환한다.

---

예제

---

JSP

기본 태그 준비

  <div>
    <button id="btn_list">목록보기</button>
  </div>
 
  <hr>
 
  <div id="list"></div>

---

Ajax1

  // 호출
  $(function(){
	fnList();
	fnDetail();
  })
 
  // 정의
  function fnList(){
	$('#btn_list').click(function(){
	  $.ajax({
		 // 요청
		 type: 'get',
		 url: '${contextPath}/ajax1/list.do',
		 // 응답
		 dataType: 'json',
		 success: function(resData){
		   $('#list').empty();  // 목록 초기화(데이터 누적 방지)
		   $.each(resData, function(i, elem){
	    	  $('#list').append('<div class="row"><span>' + elem.name + '</span>, ' + elem.age + '</div>');  // 하위 태그로 name 구분하기
		   })
		 }
	  })
	})
  }
  function fnDetail(){
    $(document).on('click', '.row', function(){ 
      $.ajax({
    	//요청
    	type: 'get',
    	url: '${contextPath}/ajax1/detail.do',
    	data: 'name=' + $(this).find('span').text(),  // this : 클릭한 객체 / 클릭한 이름의 내부 텍스트 값만 name 파라미터로 보내기
    	//응답
    	dataType: 'json',
    	success: function(resData){
		  alert(resData.name + ', ' + resData.age);
    	}
      })
    })
  }

Ajax2

  // 호출
  $(function(){
	fnList();
	fnDetail();
  })
 
  // 정의
  function fnList(){
	$('#btn_list').click(function(){
	  $.ajax({
		 // 요청
		 type: 'get',
		 url: '${contextPath}/ajax2/list.do',
		 // 응답
		 dataType: 'json',
		 success: function(resData){
		   $('#list').empty();  // 목록 초기화(데이터 누적 방지)
		   $.each(resData, function(i, elem){
	    	  $('#list').append('<div class="row">' + elem.name + ', ' + elem.age + '</div><input type="hidden" value="' + elem.name + '">');  // 형제 태그로 name 구분하기
		   })
		 }
	  })
	})
  }
  function fnDetail(){
    $(document).on('click', '.row', function(){ 
      $.ajax({
    	//요청
    	type: 'get',
    	url: '${contextPath}/ajax2/detail.do',
    	data: 'name=' + $(this).next().val(),  // 바로 다음 형제 태그의 값 가져와서 요청
    	//응답
    	dataType: 'json',
    	success: function(resData){
		  alert(resData.name + ', ' + resData.age);
    	}
      })
    })
  }

Ajax3

  // 호출
  $(function(){
	fnList();
	fnDetail();
  })
 
  // 정의
  function fnList(){
	$('#btn_list').click(function(){
	  $.ajax({
		 // 요청
		 type: 'get',
		 url: '${contextPath}/ajax3/list.do',
		 // 응답
		 dataType: 'json',
		 success: function(resData){
		   $('#list').empty();  // 목록 초기화(데이터 누적 방지)
		   $.each(resData, function(i, elem){
	    	  $('#list').append('<div class="row" data-name="'+ elem.name +'">' + elem.name + ', ' + elem.age + '</div>');  // 데이터 속성 값으로 name 구분해서 전달하기
		   })
		 }
	  })
	})
  }
  function fnDetail(){
    $(document).on('click', '.row', function(){ 
      $.ajax({
    	//요청                            //(JSON 데이터를 서버로 보내기)
    	type: 'post',                     // post 방식은 서버로 보낼 데이터를 요청 본문에 저장하는 방식이다.
    	url: '${contextPath}/ajax3/detail.do',
    	contentType: 'application/json',  // 서버로 보내는 요청 데이터의 타입
    	data: JSON.stringify({            // 문자열 형식의 JSON 데이터를 보낸다. 파라미터로 보내는 방식이 아니다.(JSON 데이터는 get방식 사용 불가)
    		'name':$(this).data('name')   // (데이터 속성 값 가져오기)
        }), 
    	//응답
    	dataType: 'json',
    	success: function(resData){
		  alert(resData.name + ', ' + resData.age);
    	}
      })
    })
  }

---

컨트롤러

1. @ResponseBody
2. produces : 응답 데이터 타입
3. Jacson Library 준비

---

Ajax Controller 1

• Jackson 라이브러리를 통해 List<T>가 자동으로 Ajax JSON 데이터(배열)로 변환된다.

@RequestMapping("/ajax1")
@RequiredArgsConstructor
@Controller
public class AjaxController1 {

  private final AjaxService ajaxService;
 
  @ResponseBody  // 메소드의 반환 값이 응답 데이터이다.
  @RequestMapping(value="/list.do", method=RequestMethod.GET, produces="application/json; charset=UTF-8")  // produces : 응답 데이터 타입
  public List<AjaxDto> list() {
    return ajaxService.getDtoList();  // jackson 라이브러리가 List<AjaxDto>를 json 데이터(배열)로 자동 변환한다.
  }
 
  @ResponseBody  // ajax에서 메소드마다 꼭 붙여야 함
  @RequestMapping(value="/detail.do", method=RequestMethod.GET, produces="application/json; charset=UTF-8")
  public AjaxDto detail(@RequestParam(value="name") String name) {
    return ajaxService.getDto(name);  // jackson 라이브러리가 AjaxDto를 json 데이터(객체)로 자동 변환한다.
  }
}

Ajax Controller 2

• produces(응답타입)안에 필드값으로 스프링에서 제공하는 미디어타입도 존재함
  produces=MediaType.APPLICATION_JSON_VALUE
  ==
  produces="application/json"

@RequestMapping("/ajax2")
@RestController  // 모든 메소드에 @ResponseBody를 추가하는 @Controller이다.
@RequiredArgsConstructor
public class AjaxController2 {
 
  private final AjaxService ajaxService;
 
  @GetMapping(value="/list.do", produces=MediaType.APPLICATION_JSON_VALUE)   // produces="application/json"
  public List<AjaxDto> getDtoList() {
    return ajaxService.getDtoList();
  }
 
  @GetMapping(value="/detail.do", produces=MediaType.APPLICATION_JSON_VALUE)  // produces="application/json"
  public AjaxDto getDto(@RequestParam(value="name") String name) {
    return ajaxService.getDto(name);
  }
}

Ajax Controller 3

@RequestMapping(value="/ajax3")
@RequiredArgsConstructor
@Controller
public class AjaxController3 {

  private final AjaxService ajaxService;
 
  @GetMapping(value="/list.do", produces="application/json; charset=UTF-8")
  public ResponseEntity<List<AjaxDto>> list() {  // ResponseEntity : Ajax 응답 전용 스프링 클래스, @ResponseBody가 포함되어 있다.
    // ResponseEntity 생성자로 만들어서 전달
    return new ResponseEntity<List<AjaxDto>>(    // ResponseEntity는 @ResponseBody를 내장하고 있기 때문에 작성하지 않는다.
                 ajaxService.getDtoList()        // 실제 응답 데이터
               , HttpStatus.OK);                 // 응답 코드(200)
  }
 
  @PostMapping(value="/detail.do")
  public ResponseEntity<AjaxDto> detail(@RequestBody AjaxDto ajaxDto) {  // post 방식(@RequestBody)으로 전송된 JSON 데이터(AjaxDto ajaxDto)
                                                                         // 요청 본문(@RequestBody)에 있는 객체(AjaxDto)를 전달받음(파라미터가 아님)
    // 응답 헤더 : Content-Type (produces="application/json; charset=UTF-8"을 대체한다.)
    HttpHeaders header = new HttpHeaders();
    header.add("Content-Type", "application/json; charset=UTF-8");       // header에 Content-Type 저장
    // 반환
    return new ResponseEntity<AjaxDto>(                 // ResponseEntity는 @ResponseBody를 작성하지 않는다.
                ajaxService.getDto(ajaxDto.getName())  // 실제 응답 데이터
               , header                                 // 응답 헤더
               , HttpStatus.OK);                        // 응답 코드 (200) (오류 찾기 안 해서 정상 코드만 전송)
  }
}

---

👉Spring Ajax활용 예제 전체(깃허브 클릭)

---

• Controller에서는 요청 호출만 하는것을 권장한다. 그 외의 할일은 서비스에서 한다.
• Jackson은 DTO 객체 대신 Map을 만들어서 반환해도 동일하게 동작한다.

---

---