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() 메서드를 사용해야 한다.
'JS&JQuery' 카테고리의 다른 글
js / jquery 정리 (0) | 2024.05.28 |
---|