Ajax로 서버에 JSON 형식의 데이터 전송하기

Ajax란?

Ajax는 Asynchronous Javascript(비동기 자바스크립트) + XML의 의미로 자바스크립트를 사용한 비동기(non-blocking) 통신, 즉 클라이언트와 서버 간의 데이터를 독립적으로 주고 받는 기술을 의미합니다.

Ajax를 사용하면 페이지 이동 없이 데이터 처리가 가능하며, 서버의 처리를 기다리지 않고 비동기 요청이 가능하다는 특징이 있습니다.

기존 Ajax는 XML 형식으로 데이터를 전달했지만 JSON이 XML보다 빠르고 단순하기 때문에 요즘엔 주로 JSON 형식을 사용하여 데이터를 주고 받습니다.

 

jQuery Ajax 사용법

Ajax를 지원하는 다양한 라이브러리가 있지만 여기서는 jQuery가 지원하는 Ajax에 대해 살펴보겠습니다.

우선 jQuery를 사용할 수 있도록 라이브러리를 추가해주어야 합니다. 그 방법으로는

1. 직접 라이브러리 다운 후 사용
2. CDN 호스트를 설정하여 사용

이 있습니다. 여기서는 2번째 방법을 사용하겠습니다. (2번째 방법은 CDN에 의존하기때문에, 실제 서비스시 직접 다운로드하여 사용하는 것이 좋습니다.)

HTML body 태그 맨 아랫부분에 다음 태그를 추가합니다.

<script src="https://code.jquery.com/jquery-latest.min.js"></script>

• 다음과 같이 "/jquery-latest.min.js" 를 입력하면 가장 최신 버전의 제이쿼리를 사용합니다.

 

jQuery에서 Ajax를 사용하려면 다음과 같이 '$' 기호 다음에 .ajax라고 명명한 후 속성 값을 설정하면 됩니다.

let data = {
    title: '제목',
    author: '길동',
    content: 'Hello'
};

$.ajax({
    type: 'PUT'
    url: '/api/survey/',
    dataType: 'json',
    contentType: 'application/json; charset=utf-8',
    data: JSON.stringify(data)
}).done(function () {
    // 정상 요청, 응답 시 처리
}).fail(function (error) {
    // 오류 발생시 처리
}).always(function() {
    // 작업 완료 후 처리
});

 

속성	설명
type	HTTP method를 선택합니다. (GET, POST, PUT, DELETE 등..)
url	요청할 url을 설정합니다.
dataType	응답 받을 데이터 타입을 설정합니다. (XML, TEXT, JSON 등)
contentType	요청시 서버로 보낼 데이터의 타입을 선택합니다. (text/plain, application/json 등..)
data	서버에 요청할 때 보낼 데이터를 설정합니다.
done	요청 및 응답에 성공했을 때 처리 구문을 설정합니다.
fail	요청 및 응답에 실패했을 대 처리 구문을 설정합니다.
always	모든 작업을 마친 후 처리 구문을 설정합니다.

 

• jQuery Ajax의 속성은 이보다 훨씬 더 많으니, 자세한 내용은 다음의 jQuery API 문서를 참고하시면 됩니다.

https://api.jquery.com/jquery.ajax/

jQuery.ajax() | jQuery API Documentation

 

JSON 직렬화 역직렬화

서버에 JSON을 데이터를 보내기 위해서는 해당 데이터를 JSON 형태로 변환해주어야 합니다. 

이를 위해 자바스크립트의 객체를 JSON 형태로 변환해주는 과정이 필요한데, 이 과정을 객체의 직렬화(serializing)라고 합니다.

직렬화는 자바스크립트 내장 객체인 JSON의 stringify() 메서드를 이용하여 이루어집니다.

let data = {
    title: '제목',
    author: '길동',
    content: 'Hello'
};

JSON.stringify(data) // Json 으로 변환

 

서버로부터 받은 JSON 데이터를 자바스크립트 객체로 변환할 때는 parse() 메서드를 사용합니다.

let data = JSON.parse(data) // 자바스크립트 객체로 변환

/*
let data = {
    title: '제목',
    author: '길동',
    content: 'Hello'
};
*/

 

 

---

Ajax 요청 예시

 

Ajax 사용을 위한 예시로 저의 프로젝트 회원가입 메뉴를 가져왔습니다. HTML form을 통해 입력받은 데이터를 Ajax를 사용하여 서버에 Json 형태로 전송해보겠습니다. Ajax 예시이므로 전송 데이터를 따로 암호화 하지 않겠습니다.

각 입력 태그의 id는 다음과 같습니다.

• 아이디 : "input_id"
• 비밀번호 : "input_pwd"
• 이름 : "username"
• 생년월일 : "birth"
• 성별 : "gender"
• 이메일 : "email"
• 휴대전화 : "phone"

가입하기 버튼을 누르면 서버로 데이터가 전송됩니다. (가입하기 버튼의 id는 "btn-register" 입니다.)

let index = {
    init : function () {
        let _this = this;
        $('#btn-register').on('click', function () {
            _this.register();
        })
    },
    register : function () {
        let data = {
            id : $('#input_id').val(),
            pwd : $('#input_pwd').val(),
            name : $('#username').val(),
            birth : $('#birth').val(),
            gender : $("#gender option:selected").val(),
            email : $('#email').val(),
            phone : $('#phone').val()
        };

        $.ajax({
            type: 'POST',
            url: '/app/user',
            dataType: 'json',
            contentType: 'application/json; charset=utf-8',
            data: JSON.stringify(data)
        }).done(function () {
            alert('회원 가입이 완료되었습니다.');
            window.location.href = '/';
        }).fail(function (error) {
            alert(JSON.stringify(error));
        })
    }
}

index.init();

• 브라우저의 스코프는 공용 공간으로 쓰이기 때문에 다른 JS 파일에서 중복된 이름으로 인한 문제를 방지하기 위해 전용 공간(let index)을 생성했습니다.
• '#btn-register' 요소(가입하기)가 클릭되었을 때의 동작을 지정합니다.
• css 선택자를 사용하여 입력값을 불러온 뒤, 객체에 저장합니다. (data)
• ajax를 사용하여 POST 메서드로 '/app/user' 경로에 JSON 데이터로 직렬화하여 요청을 보냅니다.
  • 요청, 응답 성공시 "회원 가입이 완료되었습니다." 문구와 함께 '/' 경로로 이동합니다.
  • 요청, 응답 실패시 에러메시지를 띄웁니다. 

 

❗참고
Spring에서 @RequestBody 애노테이션을 통해 Json 데이터를 자바 객체로 받을 때 자바 객체에 선언된 변수명과  JS의 객체 의 변수명을 맞춰주어야 함.
(Spring에서 @RequestBody사용시 Message Converter가 요청으로 들어온 JSON 데이터를 자바 객체로 변환하는 과정을 수행함. 이 때 JSON 데이터의 'name'과 자바 클래스의 '변수명'이 같은 것끼리 매핑되어 @RequestBody 애노테이션이 붙은 객체 필드에 값이 할당됨.)

@NoArgsConstructor
@Getter
public class UserRegisterDto {
    private String id;
    private String pwd;
    private String username;
    private Long birth;
    private String gender;
    private String email;
    private Long phone;

    ...
}

 

---

참고

• 스프링 부트와 AWS로 혼자 구현하는 웹 서비스 (이동욱 저)
• 자바 웹을 다루는 기술 (이병승 저)
• https://dev-coco.tistory.com/92