Java/Javascript) Ajax 통신 시 데이터 주고받기

 회사의 SPA 어플리케이션 개선 작업을 하면서 스크립트로 서버와 통신하는 일이 잦다. 이전에 혼자 프로젝트를 진행하면서 크게 의식하지 않고 사용했던 부분을 회사 업무를 수행하면서 헷갈렸던 부분들에 대해 제대로 정리하게 됐다.

 

---

 

ajax 를 사용해 서버로 데이터를 보낼 시

1. Object 형태로 전달 시에는 해당 변수명과 일치한다는 전제 하에 @RequestBody 사용 가능

1) JavaScript

let obj = {
	name: '이름',
    company: '회사',
    department: '부서'
}

$.ajax({
	url: "/example",
    type: "GET"/"POST",
    data: {
    	dataName: obj
    },
    success: function(result) { ... },
    error: function(result) { ... },
    ...
});

 

2) Java

@Controller
public exampleCtrl {
	@RequestMapping(value = "/example", method= RequestMethod.POST)
	public Map<String, Object> exampleHandler(HttpServletRequest request, HttpServletResponse response,
    											@RequestBody CumstomType dataName) {
    ...
    
    }
}

 

 

---

 

2. JSON.stringify(Object)을 통해 JSON형태의 문자열로 보낸다면 String타입으로 받아, 이를 jackson과 같은 라이브러리를 통해 다시 객체로 변경 가능

 주로 jackson의 ObjectMapper를 사용해 원하는 객체 타입으로 변경하였다.

 

1) Javascript

let obj = {
	name: '이름',
    company: '회사',
    department: '부서'
}

$.ajax({
	url: "/example",
    type: "GET"/"POST",
    dataType: "json",
    data: {
    	dataName: JSON.stringify(obj);
    },
    success: function(result) { ... },
    error: function(result) { ... },
    ...
});

 

2) Java

@Controller
public exampleCtrl {
	@RequestMapping(value = "/example", method= RequestMethod.POST)
	public Map<String, Object> exampleHandler(HttpServletRequest request, HttpServletResponse response,
    											String dataStr) {
    ObjectMapper objMapper = new ObjectMapper();
    CustomType obj = objMapper.readValue(dataStr, CustomType.class);
    ...
    
    }
}

 

3. ajax 속성의 contentType은 서버에서 보내주는 값의 타입, dataType은 스크립트단에서 서버로 보내주는 값의 타입을 의미한다.

 contentType: "json" 속성을 사용한다는 것은 서버에서 보내주는 값을 json타입으로 받음을 의미한다.