written by 김지윤
웹 페이지에서 특정 아이템에 사용자가 관심을 표하는 기능은 매우 중요합니다.
이 기능을 AJAX(Asynchronous JavaScript and XML)를 활용하여 간편하게 구현해보았습니다.
AJAX란?
AJAX는 페이지 새로고침 없이 웹 페이지에서 서버로 데이터를 보내거나 받을 수 있는 기술입니다.
이를 통해 사용자가 페이지를 벗어나지 않고도 필요한 정보를 받아올 수 있습니다.
AJAX의 동작 원리
- 비동기 통신 : AJAX는 비동기 방식으로 작동합니다. 페이지 새로고침 없이 서버와 통신할 수 있게 해줍니다.
- XMLHttpRequest 객체 : JavaScript의 XMLHttpRequest 객체를 사용하여 서버와 데이터를 교환합니다.
- 서버 요청 및 응답 : 클라이언트가 서버에 데이터를 요청하면, 서버는 해당 요청을 받아 필요한 데이터를 응답합니다.
- 데이터 처리 및 화면 업데이트 : 받은 데이터를 처리하여 웹 페이지의 일부분을 업데이트합니다.
AJAX의 활용
- form 데이터 전송 : 사용자가 입력한 데이터를 서버로 전송하고, 결과를 받아와 페이지를 업데이트할 수 있습니다.
- 동적 콘텐츠 로딩 : 필요한 데이터만을 로드하여 페이지 로딩 시간을 최적화할 수 있습니다.
- 실시간 업데이트 : 실시간으로 데이터를 받아와 화면을 업데이트하는 데 활용됩니다.
이제 하트 아이콘 클릭으로 사용자의 관심을 표시하는 방법을 다뤄보겠습니다.
1. HTML 구성
하트 아이콘을 rent_detail.html 페이지에 추가하고, 해당 아이콘을 클릭할 때 JavaScript 함수를 호출하는 방식으로 구성합니다.