고정 헤더 영역
상세 컨텐츠
본문
AJAX (Asynchronous JavaScript and XML)
- 주요 용도: 서버와 비동기적으로 데이터를 주고받기 위한 기술입니다.
- 사용 상황:
- 페이지를 새로 고치지 않고 데이터를 업데이트하고 싶을 때.
- 사용자 인터페이스에 실시간 반응을 주고 싶을 때.
- 예를 들어, 댓글을 추가하거나, 검색 결과를 실시간으로 보여줄 때 사용합니다.
JSON (JavaScript Object Notation)
- 주요 용도: 데이터 교환을 위한 경량 형식입니다. 주로 서버에서 클라이언트로 데이터를 전송할 때 사용됩니다.
- 사용 상황:
- AJAX 요청에 대한 응답으로 데이터를 보낼 때.
- 복잡한 데이터 구조(배열, 객체 등)를 쉽게 표현하고 싶을 때.
- 예를 들어, 사용자 정보를 담고 있는 배열이나 객체를 서버에서 클라이언트로 보낼 때 JSON 형식을 사용합니다.
정리
- AJAX는 통신 방법입니다. 서버와의 비동기 통신을 가능하게 해줍니다.
- JSON은 데이터 형식입니다. 서버에서 클라이언트로 전송하는 데이터의 형식을 정의합니다.
예시 상황
- AJAX 사용:
- 사용자가 버튼을 클릭하여 서버에서 데이터를 요청할 때.
- 예를 들어, "더 보기" 버튼을 클릭하면 추가 데이터를 비동기적으로 가져오는 경우.
- JSON 사용:
- 서버가 AJAX 요청에 대한 응답으로 데이터를 보낼 때.
- 예를 들어, 사용자의 이름, 나이, 이메일 등을 포함한 객체를 JSON 형식으로 응답하는 경우.
결론
- AJAX는 데이터를 요청하고 응답받는 방식으로, JSON은 그 응답으로 주고받는 데이터의 형식입니다.
- AJAX 요청을 통해 JSON 데이터를 주고받는 것이 일반적인 웹 애플리케이션의 흐름입니다.
-
AJAX는 비동기적으로 데이터를 통신하는 기술이고, JSON은 그 데이터의 형식입니다. 따라서 AJAX 요청을 통해 JSON 데이터를 주고받는 경우가 많으며, 이러한 조합은 현대 웹 애플리케이션에서 매우 일반적입니다.
AJAX와 JSON을 함께 사용하는 JSP 예제
- JSP 파일 (index.jsp)
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>AJAX와 JSON 예제</title>
<script>
function getUserData() {
var xhr = new XMLHttpRequest();
xhr.open("GET", "userData.jsp", true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
// 응답을 JSON 객체로 변환
var userData = JSON.parse(xhr.responseText);
// 데이터를 HTML에 삽입
document.getElementById("result").innerHTML =
"이름: " + userData.name + "<br>" +
"나이: " + userData.age + "<br>" +
"이메일: " + userData.email;
}
};
xhr.send();
}
</script>
</head>
<body>
<h1>AJAX와 JSON 예제</h1>
<button onclick="getUserData()">사용자 정보 가져오기</button>
<div id="result">여기에 사용자 정보가 표시됩니다.</div>
</body>
</html>
2. 서버 측 JSP 파일 (userData.jsp)
<%@ page language="java" contentType="application/json; charset=UTF-8" pageEncoding="UTF-8"%>
<%
// 사용자 정보를 담은 JSON 문자열 생성
String jsonResponse = "{\"name\":\"홍길동\", \"age\":30, \"email\":\"hong@example.com\"}";
// JSON 응답을 클라이언트에 전송
out.print(jsonResponse);
%>설명
- index.jsp:
- 사용자가 버튼을 클릭하면 getUserData() 함수가 호출되어 userData.jsp에 AJAX GET 요청을 보냅니다.
- 서버에서 JSON 형식의 응답을 받으면, 이를 JavaScript에서 파싱하여 사용자 정보를 HTML에 표시합니다.
- userData.jsp:
- 하드코딩된 사용자 정보를 JSON 형식으로 생성하고, 이를 클라이언트에 응답합니다.
사용 방법
- 위의 두 JSP 파일을 각각 생성합니다.
- 웹 서버에서 index.jsp를 실행합니다.
- "사용자 정보 가져오기" 버튼을 클릭하면, AJAX 요청을 통해 userData.jsp에서 사용자 정보를 가져와서 페이지에 표시됩니다.
