[Spring] ajax 이용하기 | 자바스크립트의 fetch() 함수 ① GET 방식

 

fetch가 나오기 전에는 자바스크립트에서 jQuery를 이용해서 아래와 같이  AJAX 작성해왔다. 

그렇다면 AJAX와 jQuery는 무엇이었을까 ? 이전에 AJAX 정리했던 내용을 다시 살펴보자.

🌝 Ajax란?

: JavaScript를 이용하여 비동기식으로 클라이언트와 서버가 데이터(XML)를 주고받는(통신) 방식

 

---

자세한 내용은, 아래 포스팅을 다시 보고 오자

[Servlet] Ajax란? Ajax를 이용해서 이메일 중복검사하기

2023.07.14 - [ON/Servlet] - [Servlet] Ajax란? Ajax를 이용해서 이메일 중복검사하기

---

 

➰ fetch() API  ( fetch : 가지고 오다)

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

- Promise(약속) 객체 : 비동기 요청에 대한 처리가 완료되면 바로 결과를 제공하겠다고 약속

 

📂 GET 방식

 

① 요청 작성 방법 

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

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

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

 

② 요청 데이터 얻어오는 방법 

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

 

③ 요청 데이터 얻어오는 방법 ( GET / POST 동일) 

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

📕 HttpMessageConverter

: HTTP 요청 Body의 내용을 Java 객체로 변환하고

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

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

2순위
StringHttpMessageConverter (Text 형식 자동 변환)

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

Jackson이란?
java에서 JSON을 쓰기 위한 라이브러리

 

---

💻 코드로 확인하기 🖱 

① 이메일로 닉네임 조회

👓 Main.js

function selectNickname(email){

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

    .then(response => response.text()) // 요청에 대한 응답 객체(response)를 필요한 형태로 파싱
                                     // text 형식으로 반환해준다
    
    .then(nickname => {console.log(nickname)}) // 첫 번째 then에서 파싱한 데이터를 이용한 동작 작성

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

}

👓 AjaxController

//이메일로 닉네임 조회
@GetMapping(value="/selectNickname",produces = "application/text; charset=UTF-8")
@ResponseBody
public String selectNickname(String email) {
                            // 쿼리스트링에 담긴 파라미터
    return service.selectNickname(email);

}

👓 AjaxService

/**이메일로 닉네임 조회
	 * @param email
	 * @return nickname
	 */
	String selectNickname(String email);

👓 AjaxServiceImpI

@Service // 서비스임을 명시를 해주고 + bean으로 등록
public class AjaxServiceImpI implements AjaxService{
	
	@Autowired // DI(객체로 등록되어 있는 것중에 AjaxDAO있으면 객체로 넣어줘!)
	private AjaxDAO dao;

	
	//이메일로 닉네임 조회
	@Override
	public String selectNickname(String email) {
		return dao.selectNickname(email);
	}
 }

👓 AjaxDAO

@Repository // DB연결 의미 + bean 등록 
public class AjaxDAO {

	@Autowired // bean중에서 타입이 같은 객체를 의존성주입(DI)
	private SqlSessionTemplate sqlSession;

	
	/** 이메일로 닉네임 조회 
	 * @param email
	 * @return nickname
	 */
	public String selectNickname(String email) {
		return sqlSession.selectOne("ajaxMapper.selectNickname",email);
	}
  }

👓 ajax-mapper.xml

	<resultMap type="Member" id="member_rm">

		<!-- DB의 기본 키(복합키면 여러 개 작성) -->
		<id property="memberNo" column="MEMBER_NO" />

		<!-- DB의 일반 컬럼들 -->
		<result property="memberEmail" column="MEMBER_EMAIL" />
		<result property="memberPw" column="MEMBER_PW" />
		<result property="memberNickname" column="MEMBER_NICKNAME" />
		<result property="memberTel" column="MEMBER_TEL" />
		<result property="memberAddress" column="MEMBER_ADDR" />
		<result property="profileImage" column="PROFILE_IMG" />
		<result property="enrollDate" column="ENROLL_DATE" />
		<result property="memberDeleteFlag" column="MEMBER_DEL_FL" />
		<result property="authority" column="AUTHORITY" />
	</resultMap>

	
	
	<!-- 이메일로 닉네임 조회 -->
	<select id="selectNickname" parameterType="string"
		resultType="string">
		SELECT MEMBER_NICKNAME
		FROM MEMBER
		WHERE
		MEMBER_EMAIL = #{email}
		AND MEMBER_DEL_FL = 'N'
	</select>

🔮 출력화면