AJAX의클라이언트와 서버 비동기 통신
목표
JQuery의 Ajax를 이용해서 클라이언트와 서버간의 비동기 통신방법에 대해서 배워봅시다.
서론
개발을 하다보면 화면전환(Refresh) 없이, CRUD를 처리해야하는 상황이 생깁니다. 그럴때 편리하게 사용할 수 있는게 JQuery의 Ajax를 이용해서 비동기 통신을 하면 가능합니다. 제가 자바와 스프링을 이용하여 웹 개발을 하면서 공부한 내용을 정리하여 공유하고자 합니다.
클라이언트에서 서버로 데이터 전달
클라이언트에서 서버로 데이터를 전송하려는 데이터들은 form 안에 위치하게 됩니다. 주로 input type들이서버로 전송해야할 데이터들입니다. 그리고 우리는 JQuery를 이용해서 form안에 있는 데이터들을 Ajax를 이용해 비동기 방식으로 서버로 전송하게 됩니다.
서버는 클라이언트에서 보낸 데이터를 받아 처리하고 비동기의 데이터 타입에 알맞은 반환을 해야합니다. 이렇게 서로 다른 언어간 데이터를 주고 받기 위해서는 특정한 문법이 필요한데 대표적인게 JSON 혹은 XML을 이용하게 되는데 JSON이 보편적이고 데이터 교환에 있어서 편리합니다.
이와 같은 과정을 진행하기 위해서는 차근차근 로직을 세우고 이해해야합니다. 그럼 저와 같이 로직을 세워보겠습니다. (참고로 제가 세운 로직보다 더 좋은 로직이 있을 수 있으며, 혼자 로직을 세워보는 습관을 들이는게 좋습니다.)
로직(Algorithm)
- 비동기 처리를 위해서 Ajax를 사용한다.
- GET 방식인지 POST 방식인지 정한다.
- 클라이언트가 서버로 보낼 데이터를 만들어 보낸다 : GET의 경우 전달할 데이터값이 있으면 보내야할 URL에 쿼리스트링 또는 data에 키와 밸류를 선언해서 보낸다. POST의 경우 폼에 있는 데이터를 서버로 전송하기 위해서 formData와 serialize를 사용한다.
- 서버에서 클라이언트로 보내야할 dataType을 정한다.
아래에서는 세운 로직을 자세하게 뜯어보고 예제로 확인 해보겠습니다.
GET 방식으로 비동기 처리
위 코드를 보면 dataType : html로 선언한 것을 볼 수 있습니다. dataType은 서버에서 보내야할 데이터 타입을 의미합니다. 만약에 dataType : json 을 쓰고 서버에서 html 페이지나 dataType에 맞지않는 엉뚱한 값을 반환하면 success 콜백 메서드를 타지 않을 것입니다.
클라이언트에서 서버로 쿼리스트링이든 데이터를 이용해서든 보낼때 키와 밸류 형태로 보내게 되는데 키로 선언된 변수명은 커맨드 객체의 프로퍼티로 선언이 되어있어야 합니다.
POST 방식으로 비동기 처리
Ajax를 사용하여 POST 방식으로 form에 있는 데이터 값을 전부 가져오기 위해서는 크게 formData와 serializeObject 2가지 방식이 존재합니다.
formData는 폼을 그대로 서브밋한 효과가 있으며, serialize는 폼에있는 name과 value를 이용하여 name=value 형태로 쿼리스트링(querystring)을 만들어줍니다. serialize에 대해서 자세하게 나와있는 블로그가 있어서 링크를 걸어두겠습니다.
formData나 serialize나 어떤것을 써도 서버단에 데이터를 보낼 수 있지만, formData만 써야하는 상황이 있는데 바로 비동기로 파일 업로드를 하는 경우 입니다. 그 이유는 serialize는 폼에 있는 input 데이터들을 긁어오면서 쿼리스트링으로 변환하기 때문에 input type file에 있는 binary data가 변환이 안됩니다.
서버에서는 요청 헤더로 요청 데이터가 무슨 타입인지 판단하기 때문에 비동기로 보내도 폼 데이터 타입이면 폼 서브밋 한걸로 인식합니다.
서버에서 데이터를 받기 위해서는 어떻게?
비동기 POST 요청의 경우에는 요청 본문에 담겨오기 때문에 서버단의 메서드에 선언된 커맨드 객체 앞에@RequestBody가 필수이며, 일반 GET 요청의 경우에는 데이터 보내는 일이 거의 없지만 쿼리스트링으로 오기 때문에 커맨드 객체만 사용해도 바로 바인딩이 됩니다.
serialize와 formData 이외에도 필요한 값들만 키와 밸류 형태로 추출하여 JSON 형식의 문자열로 변환해서 서버로 데이터를 보낼 수 있습니다.
이제 서버에서 보낸 데이터를 어떻게 받는지 보겠습니다. 그전에 만약 @RequestBody 와 @ResponseBody 에 대해서 잘 모르시는 분들은 아래 글을 통해 한번 공부하고 오시길 권장드립니다.
이제 서버단의 코드를 보겠습니다.
JSON parse error: Unrecognized token
만약 위와 비슷한 에러가 나신분들은 아래의 블로그 글을 참고하시면 많은 도움이 될것같습니다.
결론
Jquery의 Ajax를 이용해서 GET과 POST 방식으로 서버와 클라이언트가 통신하는 방법을 배웠는데, 제가 설명한 방식 외에도 더 깔끔하고 좋은 방식이 있을 수도 있습니다. 이외에 실무에서 사용하는 또 다른 다양한 방식이 있으시면 피드백 언제나 환영입니다.
