Ajax
Asynchronous Javascript and XML
비동기적으로 서버와 브라우저 간에 데이터를 교환하는 기술
웹 페이지를 새로고침 하지 않고도 서버로부터 데이터를 받아와서 웹 페이지의 일부분을 업데이트 할 수 있도록 해줌
-> 기존에는 웹 페이지를 다시 로드할 때 정체 페이지를 다시 받아와야 했기 때문에 사용자 경험이 좋지 않았다.
-> Ajax를 사용하면 웹 페이지를 로드한 후에도 웹 페이지와 서버 간에 데이터를 주고받을 수 있으므로 사용자 경험을 향상시킬 수 있다.
Ajax 메소드 종류
- GET : 데이터를 읽거나 검색할 때 주로 사용되는 메소드
- POST : 새로운 리소스를 생성할 때 주로 사용되는 메소드
- PUT : 리소스를 생성/업데이트 할 때 주로 사용되는 메소드
- DELETE : 지정된 리소스를 삭제 할 때 주로 사용되는 메소드
(form 태그 제출은 무조건 동기식이다)
fetch : 가지고 오다
fetch()
비동기로 요청해서 결과 데이터 가져오기 (옵션이 없으면 Get 요청)
첫 번째 then
응답 결과, 요청 주소, 응답 데이터 등이 담겨있다.
- 매개변수명.text() : 응답 데이터를 text 형태로 변환
두 번째 then
- 첫 번째 then에서 text로 변환 된 응답 데이터
문자열은 가공은 할 수 있지만 너무 힘들다
-> JSON.parse(JSON 데이터) 이용
JSON.parse(JSON 데이터) : string -> Object
- string 형태의 JSON 데이터를 JS Object 타입으로 변환
JSON.stringify(JS Object) : object -> string
- JS Object 타입을 string 형태의 JSON 데이터로 변환
매개변수.json()
- 응답 데이터가 JSON인 경우 이를 자동으로 Object 형태로 변환하는 메서드 == JSON.parse(JSON 데이터)
컨트롤러 부분
@ResponseBody
- 컨트롤러 메서드의 반환값을 HTTP 응답 본문에 직접 바인딩하는 역할임을 명시
- 컨터롤러 메서드의 반환값을 비동기 요청했던 HTML/JS 파일 부분에 값을 그대로 돌려보낼 것이다 라는것을 명시
forward/redirect 로 인식 X
@RequestBody
- 비동기 요청(ajax) 시 전달되는 데이터 중 body 부분에 포함 된 요청 데이터를 알맞은 Java 객체 타입으로 바인딩하는 어노테이션
- 비동기 요청 시 body에 담긴 값을 알맞은 타입으로 변환해서 매개변수에 저장
[HttpMessageConverter]
Spring에서 비동기 통신 시 전달되는 데이터의 자료형, 응답하는 데이터의 자료형 두가지를 알맞은 형태로 가공(변환) 해주는 객체
문자열, 숫자 <-> Text
DTO <-> JSON
Map <-> JSON
HttpMessageConverter가 동작하기 위해서는 Jackson-data-bind 라이브러리가 필요하다
Spring Boot 모듈에 내장되어 있음
(Jackson : 자바에서 JSON 다루는 방법을 제공하는 라이브러리)
JSON이 파라미터로 전달된 경우에는 @RequestParam("todoTitle") String todoTitle 과같은 방법으로는 불가능하다
@RequestBody Todo todo 요청 body에 담긴 값을 저장해야함
List(Java 전용 타입)를 반환 -> JS가 인식할 수 없어서 HttpMessageConverter 가 JSON 형태로 변환해서 반환한다
[{ }, { }, { }] JSONArray
DELETE와 PUT은 비동기 요청만 가능하다.
GET/POST (동기/비동기)
DELETE/PUT (비동기)
