고정 헤더 영역
상세 컨텐츠
본문
JSP (JavaServer Pages)
JSP는 서버 측에서 HTML을 생성하는 기술로, Java 코드를 HTML 내에 포함시켜 동적인 웹 페이지를 만들 수 있습니다.
AJAX (Asynchronous JavaScript and XML)
AJAX는 웹 페이지를 새로 고치지 않고도 서버와 비동기적으로 데이터를 주고받을 수 있는 기술입니다. 이를 통해 사용자 경험을 개선할 수 있습니다.
JSP와 AJAX의 결합
JSP와 AJAX를 함께 사용하면, JSP 페이지에서 AJAX 요청을 통해 서버로 데이터를 전송하고, 서버의 응답을 받아 페이지를 동적으로 업데이트할 수 있습니다.
간단한 예제
- JSP 파일 (example.jsp)
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>AJAX 예제</title>
<script>
function getData() {
// XMLHttpRequest 객체를 생성합니다.
var xhr = new XMLHttpRequest();
// GET 방식으로 data.jsp 파일을 비동기적으로 요청합니다.
xhr.open("GET", "data.jsp", true);
// 요청 상태가 변경될 때 호출될 함수 정의
xhr.onreadystatechange = function() {
// 요청이 완료되고(readyState가 4) 상태가 성공(상태 코드 200)일 때
if (xhr.readyState == 4 && xhr.status == 200) {
// 서버에서 받은 응답을 result라는 id를 가진 요소에 삽입합니다.
document.getElementById("result").innerHTML = xhr.responseText;
}
};
// 요청을 서버로 보냅니다.
xhr.send();
}
</script>
</head>
<body>
<h1>AJAX와 JSP 예제</h1>
<button onclick="getData()">데이터 가져오기</button>
<div id="result"></div>
</body>
</html>2. 서버 측 JSP 파일 (data.jsp)
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
String message = "안녕하세요! AJAX 요청을 통해 받은 데이터입니다.";
%>
<p><%= message %></p>설명
- example.jsp: 버튼을 클릭하면 getData() 함수가 호출되어 data.jsp에 AJAX GET 요청을 보냅니다. 서버에서 응답이 오면 해당 내용을 result라는 <div>에 표시합니다.
- data.jsp: 서버에서 클라이언트의 요청에 대해 간단한 메시지를 반환합니다.
이렇게 JSP와 AJAX를 결합하여 동적인 웹 페이지를 만들 수 있습니다!
'Jsp' 카테고리의 다른 글
| DAO DTO 궁급해? 중급버전 (0) | 2024.09.09 |
|---|---|
| DTO DAO 궁금해? (0) | 2024.09.09 |
| API와 REST API: 비슷하지만 다른 점 (0) | 2024.08.30 |
| REST API란 무엇일까요? (1) | 2024.08.30 |
| request.setAttribute 사용하는 이유 (0) | 2024.08.24 |
