Ajax (Asynchronous JavaScript and XML)
비동기적으로 JavaScript와 XML을 이용한 통신 방식이다.
약자와 다르게 XML이 아니더라도 JSON, String과 같은 더 사용하기 편한 데이터 타입도 지원하기 때문에 XML은 거의 사용하지 않는다.
비동기 방식으로 특정 부분만 데이터를 가져와서 변경할 수 있다면 서버에서는 필요한 만큼만 데이터를 보내서 좋고 사용자(클라이언트) 또한 적은 데이터로 렌더링하기 때문에 컴퓨터의 부하를 감소시킬 수 있다. (동기 & 비동기 통신에 대한 내용은 따로 정리했다.)
(학원에서 배울 땐 JSP에서 jQuery를 이용한 Ajax로 Spring 백엔드와 통신했다.)
📍 Ajax 기본 구조
필수로 설정해 줘야 하는 부분도 기본적으로 세팅된 Default 값이 있기 때문에 사용하지 않는 부분은 제외해도 된다.
var data = $('#loginForm').serialize();
$.ajax({
url: "login.do",
type: "POST",
async: true, // true(비동기), false(동기), true 일 땐 생략 가능
dataType: "JSON", // 서버로부터 response 받을 데이터 타입
data: data, //서버로 전달할 데이터({key:value} 형태의 객체 or String)
contentType: "application/x-www-form-urlencoded; charset=UTF-8", // 기본값으로 생략 가능
beforeSend:function(){
alert("ajax통신 전 무조건 실행");
xhr.abort(); // ajax 중단함수
},
success : function(arg) {
alert("통신성공시에만 실행");
},
error : function(xhr, status, error){
alert("통신실패시에만 실행");
},
complete:function(){
alert("ajax통신 후 무조건 실행");
}
});✔️ 보내고자하는 데이터 타입이 JSON 일 경우
ContextType 의 default 값은 "application/x-www-form-urlencoded; charset=UTF-8" 이다.
보내고자하는 데이터 타입이 JSON이라면, 또는 데이터를 body에 담아서 @RequestBody로 서버에서 데이터를 받고 싶다면 "application/json; charset=UTF-8" 으로 설정해야 한다. 그렇기 않으면 해당 url에 queryString으로 포함되어 header에 담겨서 전송되게 된다. (String data 이런식으로 받아야 함)
contentType: 'application/json',
data: JSON.stringify({
param_1: '111',
param_2: '222'
}),request body에 담겨져 있는 JSON 형태의 데이터는 보통 컨트롤러에서 VO나 DTO형태로 다시 재가공하여 사용하는데, ajax는 데이터를 문자열화 해주지 않기 때문에 보낼 데이터를 JSON.stringify() 로 감싸주어 JSON 객체를 문자열(String)로 변환해야 하며 그렇게 하지 않을 경우 JSON 데이터의 'key : value' 형태의 패턴을 서버의 컨트롤러에서 인식하지 못한다.
📍 서버로부터의 응답 받기
@ResponseBody가 메서드 레벨에서 부여되면 메서드가 리턴하는 오브젝트는 뷰를 통해 결과를 만들어내는 모델로 사용하는 대신, 메시지 컨버터를 통해 바로 HTTP 응답의 메시지 본문으로 변환된다.
아래 코드를 살펴보면, @RequestBody 에 의해 request body 에 있는 json 문자열을 Map<String, Object> 타입 data로 역직렬화(Deserialization)해서 읽어오고, @ResponseBody 에 의해 Map<String, Object> 타입 map 을 json 문자열로 직렬화(Serialization)해서 리턴한다.
@GetMapping(value="/notiDel")
@ResponseBody
public Map<String, Object> notiDel(@RequestBody Map<String, Object> data){
Map<String, Object> map = new HashMap<>();
map.put("test", "test");
return map;
}ajax 속성 중 dataType을 "JSON" 으로 설정하면 success 단계에서 자동으로 json 오브젝트로 역직렬화를 해준다. (default 값은 text)
직렬화 & 역직렬화
- 직렬화(Serialization): 저장, 전송, 공유에 유리하도록 데이터를 특정 형식에 맞춰 변환하는 과정
- 역직렬화(Deserialization): 위 이유로 변환된 데이터를 다시 사용하기 위해 원래의 구조로 되돌리는 과정
hydrate & dehydrate
hydrate: 간단한 형태로 변환된 데이터를 원래의 복잡한 구조나 객체로 변환하는 과정을 일컫는 말(수분 보충)
문자열을 JSON 객체로 변환 == deserialization(역직렬화)로컬스토리지에서 가져온 값을 사용하기 위해서는 JSON 문자열 형식을 기존 형태로 변환해야합니다. 이를 위해 우리는 JSON.parse() 를 사용하죠.(재변환) 이를 deserialization(역직렬화)한다고 표현할 수 있습니다. 또한 hydrate(수분 보충) 라고 은유적으로 표현할 수 있죠.dehydrate: 복잡한 데이터 구조나 객체를 더 간단한 형태로 변환하는 과정을 일컫는 말(수분 제거)
JSON 객체를 문자열로 변환 == serialization(직렬화)로컬스토리지에 값을 저장하기 위해서는 JSON 문자열 형식을 전달해야 합니다(특정 형식) 이를 위해 우리는 JSON.stringify() 를 사용하죠(변환) 이를 serialization(직렬화)한다고 할 수 있습니다. 또한 dehydrate(수분 제거) 라고 은유적으로 표현할 수 있죠.
