Ajax (Asynchronous JavaScript and XML)는 웹 페이지의 일부만을 비동기적으로 업데이트할 수 있게 해주는 기술입니다. 이를 사용하면 페이지 전체를 새로 고침하지 않고도 서버로부터 데이터를 받아 올 수 있습니다. JSP에서 Ajax 요청을 처리하는 예제를 아래에 제공합니다.
예제 1: 간단한 텍스트 데이터 반환
이 예제에서는 클라이언트의 Ajax 요청에 대해 서버가 간단한 텍스트 데이터를 반환합니다.
ajaxRequest.jsp
<!DOCTYPE html>
<html>
<head>
<title>Ajax Request Example</title>
<script type="text/javascript">
function loadData() {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
document.getElementById("message").innerHTML = xhr.responseText;
}
};
xhr.open("GET", "ajaxResponse.jsp", true);
xhr.send();
}
</script>
</head>
<body>
<button onclick="loadData()">Load Data</button>
<div id="message"></div>
</body>
</html>
ajaxResponse.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
out.println("This is response from server.");
%>
예제 2: 사용자 입력을 기반으로 데이터 처리
이 예제에서는 사용자 입력을 받아 서버에서 처리하고 결과를 Ajax를 통해 반환합니다.
userInputAjax.jsp
<!DOCTYPE html>
<html>
<head>
<title>Ajax User Input Example</title>
<script type="text/javascript">
function sendData() {
var xhr = new XMLHttpRequest();
var userInput = document.getElementById("userInput").value;
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
document.getElementById("response").innerHTML = xhr.responseText;
}
};
xhr.open("POST", "processInput.jsp", true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send("input=" + userInput);
}
</script>
</head>
<body>
<input type="text" id="userInput">
<button onclick="sendData()">Send</button>
<div id="response"></div>
</body>
</html>
processInput.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
String userInput = request.getParameter("input");
// Process the input here...
out.println("Processed input: " + userInput);
%>
관련 전문용어 설명
- Ajax (Asynchronous JavaScript and XML): 웹 페이지의 일부만을 비동기적으로 업데이트할 수 있게 해주는 기술입니다.
- XMLHttpRequest: 클라이언트가 서버에 데이터를 비동기적으로 요청하고 받아올 수 있게 해주는 JavaScript 객체입니다.
- 비동기 처리(Asynchronous processing): 페이지 전체를 새로고침하지 않고도 백그라운드에서 서버에 데이터를 요청하고 받아올 수 있는 방식입니다.
'jsp' 카테고리의 다른 글
| 세션 기반 로그인: 세션을 활용한 로그인 및 로그아웃 시스템 구현 예제. (0) | 2023.12.25 |
|---|---|
| 쿠키 기반 로그인: 쿠키를 활용한 간단한 로그인 시스템 구현 예제. (0) | 2023.12.25 |
| 파일 다운로드: 웹 페이지에서 파일을 다운로드하는 방법을 다루는 예제. (0) | 2023.12.25 |
| 이메일 전송: JSP를 사용하여 이메일을 전송하는 예제. (0) | 2023.12.25 |
| 데이터 검색 및 페이징: 데이터베이스에서 데이터를 검색하고 페이징 처리하는 방법을 배우는 예제. (0) | 2023.12.25 |