🌷 Spring에서 Ajax 사용하기 - 이론편

---

🌼 fetch() API

fetch : 가지고 오다

JS의 Promise 객체를 이용한 비동기 요청 방법으로 JS에서 기본적으로 제공함

🌱 Promise 객체

비동기 요청에 대한 처리가 완료되면 바로 결과를 제공하겠다고 약속 🤙

🌱 작성 방법

• GET 방식

fetch("요청주소") // 지정된 주소로 GET방식 비동기 요청(ajax)
                 // 전달하고자 하는 파라미터를 주소 뒤 쿼리스트링으로 추가

.then(response => response 파싱) // 요청에 대한 응답 객체(response)를 필요한 형태로 파싱
 
.then(response 파싱 데이터 => {}) // 첫 번째 then에서 파싱한 데이터를 이용한 동작 작성

.catch(e => {}) // 예외 발생시 처리할 내용을 작성

• POST 방식

fetch("요청주소“, { // 지정된 주소로 비동기 요청(ajax)
	method : “POST”, // 데이터 전달 방식을 POST로 지정
	headers: {"Content-Type": "application/json"}, // 요청 데이터의 형식을 JSON으로 지정
	body : JSON.stringify( {K:V, K:V} ) // JS객체를 JSON 형태로 변환하여 Body에 추가
})

.then(response => response 파싱 ) // 요청에 대한 응답 객체(response)를 필요한 형태로 파싱

.then(response 파싱 데이터 => {}); // 첫 번째 then에서 파싱한 데이터를 이용한 동작 작성

.catch( err => {}) // 예외 발생 시 처리할 내용을 작성

---

🌼 요청 데이터를 얻어오는 방법

🌱 GET 방식

요청 url에 쿼리스트링 형태로 파라미터가 담겨 있어 @RequestParam, @ModelAttribute를 이용해서 얻어옴

🌱 POST 방식

HTTP 요청 Body에 파라미터가 담겨 있으므로 @RequestBody를 통해 값(JSON)을 얻어와 Java 객체로 변환(HttpMessageConverter)

---

🌼 응답 방법

• GET/POST 방식 모두 @ResponseBody를 이용해 반환
  -> 해당 어노테이션을 작성하면 Controller에서 반환되는 값이 ViewResolver가 아닌 HttpMessageConverter로 전달되어
  반환된 Java객체를 text/JSON으로 변환 후 비동기 요청을 한 곳으로 응답함

---

🌼 HttpMessageConverter

HTTP 요청 Body의 내용을 Java 객체로 변환하고 HTTP 응답의 Body의 내용을 text/JSON 형태로 변환해 주는 Spring Framework 구성 요소

🌱 MessageConverter 종류

🥇 1순위

ByteArrayHttpMessageConverter (바이트 배열 자동 변환)

🥈 2순위

StringHttpMessageConverter (Text 형식 자동 변환)

🥉 3순위

MappingJackson2HttpMessageConverter (요청 데이터 -> DTO/Map, 응답 데이터 -> JSON)

Jackson이란?

java에서 JSON을 쓰기 위한 라이브러리를 말한다.

---

이제 다음 포스팅에서 Spring에서 Ajax를 사용하는 방법에 대해 자세한 예시로 알아보자.

⏬ 다음 포스팅에서 계속 ⏬

Spring에서 Ajax 사용하기 - 실전편 (GET) (23.08.17)

Spring에서 Ajax 사용하기 - 실전편 (POST) (23.08.18)