** 📌 JSP + Ajax 연동 **

JSP에서 비동기 Ajax 요청을 받아 JSON으로 응답하는 전체 흐름

서버 → 클라이언트 통신 구조 + 실전 예제 완전 정리

---

🧩 목차

1. 개념 정리
2. 전체 흐름도
3. Ajax 구성요소 핵심
4. 클라이언트(fetch) → 서버(JSP) 요청 구조
5. 서버(JSP) → JSON 응답 처리
6. 실전 예제 (댓글 목록 조회)
7. 기술 면접 대비 핵심 요약
8. 마무리 요약 + Notion 작성 팁

---

✅ 1. 개념 정리

항목	설명
Ajax	페이지 전체 새로고침 없이 서버와 데이터를 주고받는 방식 (Asynchronous JS + XML)
JSON	서버와 클라이언트가 데이터를 주고받을 때 사용하는 대표적인 경량 데이터 포맷
JSP 역할	클라이언트 요청 처리 → DB 조회 → JSON 응답 생성

---

✅ 2. 전체 흐름도

[1] fetch() → /getComment.jsp 비동기 요청
 ⬇
[2] JSP에서 DB 조회 후 JSON 배열 생성
 ⬇
[3] 클라이언트 fetch().then(result → 화면 출력)

---

✅ 3. Ajax 구성요소 핵심

요소	설명
요청 방식	fetch() 또는 XMLHttpRequest (POST, GET)
응답 형식	text, HTML, JSON 등
서버 응답 처리	.then(res => res.json()), .then(res => res.text())

---

✅ 4. 클라이언트 요청 구조 (fetch)

fetch("getComment.jsp")
  .then(response => response.json())
  .then(data => {
    console.log("받은 댓글 목록:", data);
  });

• fetch()는 기본적으로 GET 방식
• response.json()으로 응답을 JSON으로 변환

---

✅ 5. 서버 응답 구조 (JSP → JSON 응답)

📄 getComment.jsp

<%@ page contentType="application/json; charset=UTF-8" %>
<%@ page import="java.sql.*, java.util.*, org.json.simple.JSONArray, org.json.simple.JSONObject" %>

<%
  JSONArray arr = new JSONArray();

  Connection conn = DB.getConnection();
  String sql = "SELECT * FROM comments ORDER BY id DESC";
  PreparedStatement ps = conn.prepareStatement(sql);
  ResultSet rs = ps.executeQuery();

  while (rs.next()) {
    JSONObject obj = new JSONObject();
    obj.put("id", rs.getInt("id"));
    obj.put("content", rs.getString("content"));
    obj.put("regdate", rs.getString("regdate"));
    arr.add(obj);
  }

  conn.close();
  out.print(arr.toJSONString()); // JSON 배열로 응답
%>

✅ 위 코드를 사용하려면 json-simple 라이브러리를 lib 폴더에 추가해야 합니다.

---

✅ 6. 실전 예제: 댓글 목록 불러오기

---

📄 index.jsp

<button id="loadBtn">댓글 불러오기</button>
<ul id="commentList"></ul>

<script>
document.getElementById("loadBtn").addEventListener("click", function () {
  fetch("getComment.jsp")
    .then(response => response.json())
    .then(list => {
      const ul = document.getElementById("commentList");
      ul.innerHTML = "";
      list.forEach(comment => {
        const li = document.createElement("li");
        li.innerText = comment.content + " (" + comment.regdate + ")";
        ul.appendChild(li);
      });
    });
});
</script>

---

✅ 7. 기술 면접 대비 핵심 요약 💬

질문	요점 정리
Ajax란?	페이지를 새로고침하지 않고 서버와 통신하는 방식
fetch와 JSP는 어떻게 연동되나요?	JS에서 fetch() → JSP에서 DB 처리 후 JSON 응답
JSON이란?	데이터를 키-값 형식으로 주고받는 경량 포맷
JSP에서 JSON 응답을 만들려면?	JSONArray + JSONObject 조합 사용 + contentType 설정

---

✅ 8. 마무리 요약 🧠

• 🔁 Ajax 흐름: fetch() → JSP → DB → JSON 응답 → JS 출력
• 🌐 JSP는 서버 측에서 DB 조회 후 JSON을 생성하는 역할
• 📦 클라이언트는 .then(response.json()) 으로 응답 처리
• ✅ 실무에서는 댓글, 알림, 검색 자동완성 등에 필수 사용됨