Ajax

Ajax는 비동기 작업이다. 페이지를 새로 로드하지 않고 서버와 데이터를 주고 받을 수 있다. 

 

간단하게 이렇게만 알고있는데.. 사용도 찾아보면서 필요한거 고쳐쓰고 이렇게 썼었는데...

 

정리좀 해봐야겠다.

$.ajax({
   url: 'example.com/data',
   method : 'GET',
   headers: { "Content-Type": "application/json" },
   dataType : 'json', // 기본이 json 
   data: JSON.stringify({key: 'value'}),
   success : function(data){
      console.log('success:', data);
   },
   error: function(xhr, status, error){
      console.log('error:', error);
   }
});

 

이게 기본 형태이다. 

 

* 데이터 타입을 json으로 받게 되면 Jquery가 자동으로 JSON 문자열을 JS 객체로 파싱한다. 

 

* 서버로 데이터를 보낼 때 GET 방식은 쿼리 문자열로 변환되어 URL에 추가되고, POST 방식은 요청 본문에 포함된다.

 

* JSON.stringify이 JS 객체를 JSON 문자열로 변환한다. 

 

* headers 요청 본문의 데이터 유형을 서버에 알려준다. 명시적으로 설정하지 않으면 application/x-www-form-urlencoded 로 설정된다. 

 

Spring MVC에서 Ajax 요청에 대한 응답을 처리할 때 ResponseEntity를 사용하는 것이 일반적인데, HTTP 응답 상태 코드, 헤더, 본문을 모두 설정할 수 있는 유연한 방법을 제공하기 떄문이다. 

return ResponseEntity.ok(); // 성공 응답

return ResponseEntity.badRequest().body(); // 실패 응답

 

보통 이런 식으로 응답 코드와 데이터를 같이 반환하게 될텐데(이렇게 안쓰나..? 모르겠다..) 

 

ResponseEntity.ok()는 200 OK 상태 코드를 나타내고, 기본적으로 본문을 직접 전달할 수 있다.

 

하지만 ResponseEntity.badRequest()는 400 Bad Request 상태 코드만을 나타내며 응답 본문을 설정하려면 body() 메서드를 사용해야 한다.