📕 Ajax란?
Ajax란 Asynchronous JavaScript and XML의 약자이다.
Ajax는 빠르게 동작하는 동적인 웹 페이지를 만들기 위한 개발 기법의 하나이다.
Ajax는 웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신할 수 있다.
즉 Ajax를 이용하면 백그라운드 영역에서 서버와 통신하여, 그 결과를 웹 페이지의 일부분에만 표시할 수 있다.
이때 서버와는 JSON, XML, HTML, 텍스트 파일 등과 같은 다양한 형태의 데이터를 주고받을 수 있다.
📕 Ajax의 장점
-
웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신할 수 있다.
-> Ajax를 사용하여 웹 페이지의 일부분만을 갱신할 때, 전통적인 전체 페이지 새로 고침과는 달리 웹 브라우저의 새로 고침 표시는 가만히 있는다. Ajax는 비동기적으로 데이터를 서버에서 가져오고 해당 데이터를 사용하여 페이지를 동적으로 갱신하기 때문에 사용자가 페이지를 다시 로드하거나 새로 고침하지 않아도 된다. -
웹 페이지가 로드된 후에 서버로 데이터 요청을 보낼 수 있다.
-
웹 페이지가 로드된 후에 서버로부터 데이터를 받을 수 있다.
-
백그라운드 영역에서 서버로 데이터를 보낼 수 있다.
📕 Ajax의 한계
-
Ajax는 클라이언트가 서버에 데이터를 요청하는 클라이언트 풀링 방식을 사용하므로, 서버 푸시 방식의 실시간 서비스는 만들 수 없다.
-
Ajax로는 바이너리 데이터를 보내거나 받을 수 없다.
-
Ajax 스크립트가 포함된 서버가 아닌 다른 서버로 Ajax 요청을 보낼 수는 없다.
-
클라이언트의 PC로 Ajax 요청을 보낼 수는 없다.
📕 Ajax의 활용 예시
<!-- 댓글 등록 -->
<script type="text/javascript">
window.onload = function () {
let btnIns = document.getElementById("btnInsre");
btnIns.addEventListener("click", checkData);
function checkData() {
if (replyform.comment.value === "") {
alert("댓글을 입력하시오");
replyform.comment.focus();
return;
}
replyform.submit();
}
}
</script>
<!-- 리뷰 삭제 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js" charset="UTF-8"></script>
<script th:inline="javascript">
/*<![CDATA[*/
$(document).ready(function() {
$("#btnDel").click(function() {
if(confirm("정말 삭제하시겠습니까? \n 삭제후 되돌릴 수 없습니다.")){
$.ajax({
type:"POST",
url:"/reviewdelete", // ReviewDeleteController로 연결
data : {reviewid:/*[[${data.reviewid}]]*/},
success : function(response) {
alert("삭제가 완료되었습니다."); // 리뷰목록으로 돌아가면 좋겠다
},
error:function() {
alert("오류 발생");
}
});
}
});
});
/*]]>*/
</script>
<!--댓글 수정 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js" charset="UTF-8"></script>
<script th:inline="javascript">
/*<![CDATA[*/
$(document).ready(function() {
$(".edit-reply-button").click(function() {
var replyid = $(this).data("replyid");
var $commentTextarea = $("#comment-textarea-" + replyid);
var originalContent = $commentTextarea.val();
// 수정 버튼 클릭 시 해당 댓글에 대한 버튼 상태 변경
$(".delete-reply-button[data-replyid=" + replyid + "]").hide();
$(this).hide();
$(".save-reply-button[data-replyid=" + replyid + "]").show();
$(".cancel-reply-button[data-replyid=" + replyid + "]").show();
$commentTextarea.data("original-content", originalContent);
$(".cancel-reply-button[data-replyid=" + replyid + "]").click(function(){
var replyid = $(this).data("replyid");
var $commentTextarea = $("#comment-textarea-" + replyid);
// Replace the edited content with the original content
$commentTextarea.val($commentTextarea.data("original-content"));
// 댓글삭제와 댓글수정버튼 다시 보이게
$(".delete-reply-button[data-replyid=" + replyid + "]").show();
$(".edit-reply-button[data-replyid=" + replyid + "]").show();
$(".save-reply-button[data-replyid=" + replyid + "]").hide();
$(this).hide();
})
$(".save-reply-button[data-replyid=" + replyid + "]").click(function(){
var newContent = $("#comment-textarea-" + replyid).val(); // comment에 입력한 값 받기
if(confirm("정말 수정하시겠습니까?")) {
$.ajax({
type:"POST",
url:"/replyupdate",
data:{reviewno:/*[[${data.reviewid}]]*/,
replyid:replyid,
page:/*[[${page}]]*/,
comment: newContent
},
success:function(response){
alert("수정이 완료되었습니다.");
// 댓글삭제와 댓글수정버튼 다시 보이게
$(".delete-reply-button[data-replyid=" + replyid + "]").show();
$(".edit-reply-button[data-replyid=" + replyid + "]").show();
$(".cancel-reply-button[data-replyid=" + replyid + "]").hide();
$(".save-reply-button[data-replyid=" + replyid + "]").hide();
},
error:function(){
alert("오류 발생")
}
})
}
})
});
});
/*]]>*/
</script>웹 프로젝트에서 짰던 코드를 ajax의 예시로 들어보았다. 댓글 등록, 댓글 삭제, 댓글 수정을 ajax를 통해 코드를 작성해보았다. 각각에 대한 간단한 설명은 아래와 같다.
-
댓글 등록
사용자가 댓글을 작성하고 "댓글 등록" 버튼을 클릭하면 checkData 함수가 호출된다.
checkData 함수는 댓글 입력 필드(replyform.comment)가 비어 있으면 경고 메시지를 표시하고 그렇지 않으면 댓글을 제출한다. -
리뷰 삭제
"삭제" 버튼이 클릭될 때 btnDel 버튼을 클릭하는 이벤트 핸들러가 실행된다.
사용자에게 삭제 확인 메시지를 표시하고 확인한 경우, Ajax를 사용하여 리뷰를 삭제하는 요청이 서버로 전송된다. -
댓글 수정
"댓글 수정" 버튼이 클릭될 때, 해당 댓글에 대한 완료 및 취소 버튼이 표시되며, 댓글 내용을 수정할 수 있다. 완료 버튼을 클릭하면 수정된 댓글 내용을 서버로 전송하여 댓글을 업데이트한다.
취소 버튼을 누르면 댓글 수정과 댓글 삭제 버튼이 다시 나타난다.
📘 Ajax(script)내에서 thymeleaf 변수 쓰기
앞에 코드에서 이 문법을 썼기 때문에 그에 대한 설명도 추가로 적어보았다.
원래 script태그내에서는 thymeleaf문법이 적용 되지 않는다. 하지만 아래의 방법을 사용한다면 사용할 수 있다 !
<script src="https://code.jquery.com/jquery-3.6.0.min.js" charset="UTF-8"></script>
<script th:inline="javascript">
/*<![CDATA[*/
$(document).ready(function() {
$("#btnDel").click(function() {
if(confirm("정말 삭제하시겠습니까? \n 삭제후 되돌릴 수 없습니다.")){
$.ajax({
type:"POST",
url:"/reviewdelete", // ReviewDeleteController로 연결
data : {reviewid:/*[[${data.reviewid}]]*/},
success : function(response) {
alert("삭제가 완료되었습니다."); // 리뷰목록으로 돌아가면 좋겠다
},
error:function() {
alert("오류 발생");
}
});
}
});
});
/*]]>*/
</script> 위에 코드로 예시를 들어 보았다. 타임리프 변수를 스크립트 태그내에서 사용하기 위해서는 위와 같이 스크립트 태그내에 th:inline="javascript"를 써야하며 /*<![CDATA[*/ /*]]>*/ 로 감싸 주어야한다. 또한 변수는 /*[[${변수}]]*/와 같은 형태로 써주어야한다.
📍 이클립스와 같은 인터프리터내에서 오류라고 표시될 수 있다. 나도 코드를 짜다가 그런 문제가 생겨서 적용이 안되는줄 알고 걱정했지만 기능 동작은 잘되었다. 이클립스내에서 이 문법을 해석을 못하기 때문에 오류가 나는 것이라고 한다. 그러니 걱정말고 이 문법을 써도 상관없다!
출처 : https://www.tcpschool.com/ajax/ajax_intro_basic
