[spring boot] Ajax을 활용한 비동기 서버 통신

Ajax란?

JavaScript를 사용한 비동기 서버 통신으로 서버로 모든 데이터를 보내는 것이 아닌 필요한 데이터만

보내 응답받을 수 있다. 이 때문에 페이지 전체의 새로고침 없이 일부분만 로드가 가능하다.

 

비동기 서버 통신이란 데이터 요청 후 결과를 응답받기 전까지 기다리는 것이 아닌 동시에 다른 작업을 함께

처리하기 때문에 시간과 자원을 아낄 수 있다. 즉 요청 후 응답이 올 때까지 대기하는 동기 방식과 대조된다. 

 

Ajax를 통해 클라이언트와 서버 간에 xml이나 json 형식으로 데이터를 주고받을 수 있는데 프로젝트에서는

json을 사용하여 데이터를 전송했다. 스프링 부트에서 json을 이용해 통신하기 위해서는 Controller 클래스에

@RestController를 사용하거나 Mapping 메서드에 @ResponseBody를 사용한다.

 

 

Spring @RestController란?

스프링 @RestController를 통한 json 데이터 반환

 

 

프로젝트에서 여러 기능에 Ajax를 사용했지만 그 중 이메일 찾기 기능을 구현하면서 사용한

Ajax 코드에 대해 설명하겠다. 이메일 찾기 페이지는 아래와 같고 회원 정보를 입력해서 가입된 이메일이

있다면 주소의 일부를 출력하고 가입된 이메일이 존재하지 않는다면 존재하지 않는다는 출력문을 나타낸다.

 

 

 

 

이메일을 찾기 위해 이름, 생년월일, 전화번호 3가지 데이터가 입력되는데 요청이 있을 때마다

매번 전체 페이지를 새로고침 하지 않고 하단 결과 페이지 부분만 리로드 하여 출력하기 위해 Ajax를 사용했다.

 

 

<Script> 내 Ajax 코드

$(".btn-search").click(function () {
    let name = $("#name").val();
    let birth = $("#birth").val();
    let phone = $("#phone").val();
    $.ajax({
        type: "get",
        url: "emailSearchProc",
        data: {
            "name": name,
            "birth": birth,
            "phone": phone
        },
        success: function (res) {
            $("#search-form").hide();
            if (res.check == 1) {
                $("#content").append("회원님의 이메일은<br> " + res.email + " 로 가입되어 있습니다.<br>");
            } else {
                $("#content").append("가입된 이메일이 존재하지 않습니다.");
                $(".moveLogin").hide();
            }
            $("#result-form").show();
        }
    });
});

 

 

우선 입력된 3가지의 데이터를 jquery를 통해 변수로 저장한 후 ajax 내에서 json 형식으로 전송했다.

데이터는 url에 명시한 emailSearchProc 라는 주소로 Get 매핑이 되고 매핑에 성공하여 응답 데이터를 받았을 경우

아래 success: function 함수 내 구현된 결과가 이뤄질 것이다. 이 함수는 res라는 응답 파라미터 값을 받기 때문에

Controller에서 구현된 메서드가 리턴한 값에 따라 다른 결과물을 반환한다.

 

 

Controller GetMapping 메서드 - 이메일 부분 출력 구현 코드 생략

@GetMapping("/user/emailSearchProc")
@ResponseBody
public Map<String, Object> searchEmail(String name, String birth, String phone) {
	Map<String, String> userInfoMap = new HashMap<>();
	Map<String, Object> resultMap = new HashMap<>();

	userInfoMap.put("user_name", name);
	userInfoMap.put("user_birth", birth);
	userInfoMap.put("user_hp", phone);
    
	int check = service.checkEmailByUserInfo(userInfoMap);    
	String email = service.findEmailByUserInfo(phone);
	
	resultMap.put("check", check);
	resultMap.put("email", email);
    
	return resultMap;
}

 

 

 

 

 

 

 

 

---

Reference

 

https://velog.io/@jyyoun1022/JQUERY-SpringBoot-ajax-%EC%82%AC%EC%9A%A9%EB%B2%95-%EB%B0%8F-%EC%98%88%EC%A0%9Cthymeleaf