1. 계기
ajax를 사용하게된 계기는 클라이언트와 서버를 모두 개발하면서 클라이언트-서버 간 http 메시지 통신을 하고싶었기 때문이다. Thymeleaf를 사용했던 터라 form 태그로 할 수도 있었지만, 클라이언트 동작방식을 더 이해하고 싶어서 ajax를 선택했다.
1-1. ajax란?
ajax는 JavaScript를 사용한 비동기 통신, 클라이언트-서버 간 xml, json 데이터를 주고 받는 기술이다. ajax는 비동기로 동작하기 때문에 전체 페이지를 새로 고치지 않고 뷰를 갱신할 수 있다.
1-2. ajax 사용 이유
페이지 전체를 새로고침하지 않고 web 화면에서 데이터를 조회하고 싶은 경우에 사용할 수 있다. json 이나 xml 형태로 필요한 데이터만 받아 갱신하기 때문에 그만큼의 자원과 시간을 아낄 수 있다.
1-3. ajax 진행과정
1) XMLHttpRequest Object를 만든다
브라우저에게 request를 보낼 준비 시키는 과정이다.
이를 위해 필요한 method를 갖춘 object가 필요하다.
2) callback 함수를 만든다
callback 함수는 어떤 이벤트에 의해 호출되는 함수를 의미한다.
서버에서 response가 왔을 때 callback 함수를 실행한다.
HTML 페이지를 업데이트 한다.
1-4. ajax 사용법
ajax를 사용하기 위해서는 jquery를 import 해야한다.
build.gradle
implementation 'org.webjars:jquery:3.1.1-1'
헤더
<head>
<script src="/webjars/jquery/jquery.min.js"></script>
</head>
ajax 코드
<script>
function completeAuthEmail() {
const parmas = {}; // body에 넣을 json 데이터
$.ajax({
url : url, // 메시지 보낼 url
type : 'post',
contentType : 'application/json; charset=utf-8;',
dataType : 'json',
data : JSON.stringify(params), // json 데이터를 JSON.stringify()를 해야 에러가 발생하지 않는다.
success : function(response) {
alert('인증이 완료 되었습니다.');
},
error : function(response, status, error) {
alert('에러 발생');
}
})
}
</script>기본적으로 HTTP 메시지를 주고 받는 것이기 때문에 HTTP 메시지 구조(start line, header, body)로 코드를 작성해야 한다. 위 코드에서 보이는 필드 중 url, type은 start line에, contentType, dataType은 header에, data는 body에 해당한다. 그렇기에 각각에 맞는 내용들을 입력하면 된다. 메시지를 보낸 후 성공 응답인 경우는 succes, 실패 응답이라면 error에 선언한 콜백함수가 실행된다.
여기서 주의해야할 점은 body에 해당하는 data에 해쉬 그대로 넣으면 에러가 발생한다. 그래서 JSON.stringify()로 형변환을 한 뒤 전송해야 한다.
- XMLHttpRequest 객체를 얻은 뒤, url을 통해 요청하고 응답을 받으면 응답 결과에 맞는 함수를 실행하는 구조이다
- 효율적인 Ajax 사용을 위해 Jquery에서 구현한 ajax 기능을 사용했다
구체적인 예시 - 인증 이메일 전송하기
function completeAuthEmail() {
var email = $('#email').val();
var authKey = $('#authKey').val();
const params = {
'email' : email,
'authKey' : authKey
}
$.ajax({
url : `/v1/auth/email/complete`,
type : 'post',
contentType : 'application/json; charset=utf-8;',
dataType : 'json',
data : JSON.stringify(params),
success : function(response) {
alert('인증이 완료 되었습니다.');
},
error : function(response, status, error) {
alert(JSON.parse(response.responseText).message);
}
})
}기본 ajax 구조를 가지고 실제로 작성했던 코드이다. 구조는 동일하지만, body에 들어가는 구체적인 값을 jQuery로 가져오고, 실제 사용하는 api url을 추가했다. 각 상황에 맞게 성공일 때 동작방식과 실패일 때 동작방식을 설정해주면 된다.
여기서 주의해야할 점은 응답 메시지에서 JSON key를 가져오는 방법이다. 응답 body의 메시지를 가져오고 싶은데 처음에는 response['message'] 와 같은 형식으로 데이터를 가져오려고 했는데 에러가 발생하고 원하는 값을 가져오지 못했다. 찾아보니 response가 Object이므로 '.'으로 바디를 꺼낸 뒤 JSON으로 파싱을 해야 응답 바디에서 원하는 key의 값을 가져올 수 있다.
// response body
{ status : NOT_FOUND,
message : "존재하지 않는 이메일입니다."
}
// response body에 있는 message 키의 값 가져오는 코드
JSON.parse(response.responseText).message참고
[JQUERY] SpringBoot - ajax 사용법 및 예제(+thymeleaf)
'개인프로젝트' 카테고리의 다른 글
| [개인 프로젝트] 가계부 프로젝트 step 3.5 : css, javascript로 동적 달력 만들기 (0) | 2024.05.14 |
|---|---|
| [개인 프로젝트] 가계부 프로젝트 step3.4 - Thymeleaf로 수정 화면 만들기 (0) | 2024.05.12 |
| [개인프로젝트] 가계부 프로젝트 step3.2 : intellij에서 정적 파일 빠르게 reload하기 (4) | 2024.05.09 |
| [개인프로젝트] 가계부 프로젝트 step3.1 : Thymeleaf 레이아웃 만들기 (0) | 2024.05.09 |
| [개인 프로젝트] 가계부 프로젝트 step2 : UI (0) | 2024.04.25 |
