Ajax (Asynchronous JavaScript and XML)
Ajax는 비동기적(Asynchronous)으로 웹 페이지의 일부를 업데이트하거나 서버와 데이터를 교환하기 위한 기술입니다.
이 덕분에 페이지를 새로 고치지 않고도 웹 페이지와 서버 간의 데이터 교환을 가능하게 합니다.
주로 JavaScript와 XML 또는 JSON을 사용하여 데이터를 전송하며, 이를 통해 웹 애플리케이션은 백그라운드에서 서버로 요청을 보내고, 응답을 받아서 페이지를 다시 로드하지 않고도 데이터를 동적으로 처리할 수 있습니다.
JSON (JavaScript Object Notation)
JSON은 데이터를 표현하기 위한 경량의 형식입니다. 이것은 텍스트 기반으로, 사람과 기계 모두 이해하기 쉽고, 다양한 프로그래밍 언어에서 파싱하고 생성하는 데 사용됩니다. JSON은 이름-값 쌍(key - value)으로 구성되며, 객체와 배열의 조합으로 데이터를 표현합니다.
일반적으로 Ajax 요청을 통해 서버로 데이터를 보낼 때, 이 데이터는 JSON, XML 또는 기타 형식으로 구성됩니다. 그러므로 Ajax를 통해 JSON 데이터를 서버로 보내고, 서버에서 JSON 형식의 응답을 받는 것은 웹 애플리케이션에서 매우 일반적인 시나리오 중 하나입니다. 그러나 Ajax에서 데이터 교환에는 JSON 이외에도 XML과 같은 다른 형식을 사용할 수도 있습니다. JSON은 특히 JavaScript와 호환성이 높고 가독성이 좋아서 많이 사용됩니다.
실습
현재 진행중은 쇼핑몰 개인 프로젝트에서 장바구니에서 수량을 수정하는 기능을 구현하는 중입니다.
수량 수정버튼을 클릭하면 모달 창이 뜨게 되고 수량을 선택하고 수정하기 버튼을 클릭하면 바로 수정이 가능하도록 구현하려고 합니다.
html
<td>
<span class="quantity" th:text="${cartList.product_quantity}"></span>
<button class="edit-button" th:attr="data-product-name=${cartList.product_name}">주문 수정</button>
</td>
<!-- 모달 다이얼로그 -->
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close" onclick="closeModal()">×</span>
<form method="post" th:action="@{/updateCart}">
<input type="hidden" id="productName" name="productName" value="">
<label for="product_quantity">수량 선택:</label>
<select id="product_quantity" name="product_quantity">
<option th:each="i : ${#numbers.sequence(1, 10)}" th:value="${i}" th:text="${i}"></option>
</select>
<input type="submit" value="수량 저장" id="updateButton">
</form>
</div>
</div>script
<script>
$(document).ready(function () {
$(".edit-button").click(function () {
var productName = $(this).data("product-name");
selectedIndex = $(".edit-button").index(this); // 선택한 버튼의 인덱스를 selectedIndex 변수에 저장
$("#productName").val(productName); // <input> 요소의 value 값을 설정
$("#myModal").css("display", "block");
});
$(".close").click(function () {
$("#myModal").css("display", "none");
});
$("#updateButton").click(function (e) {
e.preventDefault(); // 폼 기본 동작 방지
var productQuantity = $("#product_quantity").val();
// Ajax 요청 보내기
$.ajax({
type: "POST",
url: "/updateCart",
data: {
productName: $("#productName").val(),
productQuantity: productQuantity
},
success: function (response) {
// 모달 닫기
$("#myModal").css("display", "none");
// 선택한 행의 수량 업데이트
$(".quantity").eq(selectedIndex).text(productQuantity);
},
error: function (error) {
console.error("Ajax 요청이 실패했습니다.", error);
alert("오류가 발생했습니다. 다시 시도해주세요.");
}
});
});
});
</script>모달 창의 수량 저장 버튼을 클릭하면 컨트롤러에 Ajax 요청이 보내집니다. 이 요청은 POST 방식으로 "/updateCart" URL로 전송됩니다. 이때, 사용자가 모달 창에서 선택한 제품 이름(productName)과 수정한 수량(productQuantity)이 함께 요청으로 전달됩니다.
컨트롤러는 "/updateCart" URL을 처리하는 엔드포인트로, 이 요청을 받아서 처리합니다. 받은 데이터를 활용하여 해당 제품의 장바구니 정보를 업데이트하고, 업데이트 결과를 JSON 형식으로 응답합니다.
컨트롤러에선 다음과 같은 로직을 수행합니다.
@PostMapping("/updateCart")
@ResponseBody // 이 어노테이션을 사용하여 응답 데이터가 JSON 또는 텍스트 형식인 경우를 처리합니다.
public String updateCart(@RequestParam("productName") String productName,
@RequestParam("productQuantity") int productQuantity,
HttpSession session) {
String member_id = (String) session.getAttribute("member_id");
log.info("product_name = {}", productName);
Cart cart = cartService.readCartItem(productName);
cart.setMember_id(member_id);
cart.setProduct_quantity(productQuantity);
cartService.updateCartItem(cart);
String jsonResponse = "{\"message\": \"수량이 업데이트되었습니다.\", \"updatedQuantity\": " + productQuantity + "}";
return jsonResponse;
}이 로직이 성공적으로 실행되면, 서버에서 받은 응답에 따라 모달 창이 성공적으로 닫히게 되며, 수정한 수량이 웹 페이지에 자동으로 비동기적으로 업데이트됩니다. 사용자는 페이지를 새로 고치지 않아도 수정한 내용이 실시간으로 반영됩니다.
이렇게 함으로써 웹 페이지는 동적으로 변화하며, 사용자는 쇼핑 카트의 수량을 편리하게 관리할 수 있습니다.
