JSP) 예제 : AJAX() / load() 정리

back/JSP

JSP) 예제 : AJAX() / load() 정리

pogun 2025. 3. 3. 18:35

AJAX (Asynchronous JavaScript and XML) 기본 개념

1. AJAX란?

: 비동기 통신을 이용하여 웹 페이지를 새로고침 없이 데이터를 송수신하는 기술

: fetch, XMLHttpRequest, jQuery.ajax() 등을 이용하여 서버와 데이터를 주고받는다.

2. AJAX 기본 형식 (jQuery)

$.ajax({
    url: "server.jsp",  // 요청 보낼 서버 주소
    method: "GET",      // GET or POST (type 대신 method 사용)
    dataType: "json",   // 응답을 JSON으로 받음
    data: { key1: "value1", key2: "value2" },  // 보낼 데이터
    success: function(response) { 
        console.log("응답 성공:", response);
    },
    error: function(xhr, status, error) {
        console.log("에러 발생! 상태 코드:", xhr.status);
        console.log("에러 메시지:", error);
    },
    complete: function(xhr, status) {
        console.log("통신 종료");
    }
});

코드 분석 (AJAX + JSP 활용)

1. index.jsp (jQuery .load() 사용)

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AJAX load() 예제</title>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
</head>
<body>

<p id="demo"></p>
<br/>
<button type="button" id="btn">click</button>

<script type="text/javascript">
$("#btn").click(function(){
    // $("#demo").load("data.html");  // data.html 전체 내용 불러오기

    // $("#demo").load("data.html #apple");  // 특정 ID 선택해서 불러오기

    // $("#demo").load("data.jsp", "name=김뚝딱&age=12");  // GET 방식으로 데이터 전송
    
    $("#demo").load("data.jsp", {"name":"김튜브", "age":33});  // POST 방식으로 데이터 전송
});
</script>
</body>
</html>

설명:

: $("#btn").click(...)

- 버튼 클릭 시, AJAX 요청을 보내는 이벤트 실행

: $("#demo").load("data.html");

- data.html의 전체 내용을 #demo에 삽입

- load()는 AJAX를 간단하게 사용하기 위한 jQuery 메서드

: $("#demo").load("data.html #apple");

- data.html에서 특정 요소만 가져오기 (id="apple"인 요소만)

: $("#demo").load("data.jsp", {"name":"김튜브", "age":33});

- data.jsp에 이름(name)과 나이(age)를 전송한 후, 응답 결과를 #demo에 삽입

2. data.jsp (AJAX 요청을 받아 처리하는 서버 측 JSP)

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>

<%
    String name = request.getParameter("name");  // 전달된 name 파라미터 받기
    int age = Integer.parseInt(request.getParameter("age"));  // age 파라미터를 정수형으로 변환

    System.out.println("name:" + name + " age:" + age);  // 서버 콘솔에 출력
%>

<p>name:<%=name %>, age:<%=age %></p>

설명:

: request.getParameter("name")

- AJAX 요청에서 전달한 "name" 값을 가져옴

: Integer.parseInt(request.getParameter("age"))

- 문자열로 받은 "age" 값을 정수로 변환

: System.out.println("name:" + name + " age:" + age);

- 서버 콘솔에 로그 출력 (디버깅 용도)

: <p>name:<%=name %>, age:<%=age %></p>

- 받은 데이터를 클라이언트(브라우저)에게 응답으로 보냄

3. data.html (AJAX로 특정 요소 가져오기)

<!DOCTYPE html>
<p id="apple">사과</p>
<h3 id="banana">바나나</h3>

설명:

: load("data.html #apple")을 실행하면 <p id="apple">사과</p>만 가져옴

4. ajax.jsp (jQuery $.ajax() 직접 사용)

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AJAX $.ajax() 사용</title>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
</head>
<body>

<div id="demo"></div>
<br/>
<button type="button" id="btn">click</button>

<script type="text/javascript">
$("#btn").click(function(){
    $.ajax({
        url: "http://localhost:9000/sample2/data.jsp",  // 서버의 data.jsp 요청
        type: "get",  // HTTP GET 방식
        data: {"name":"김튜브", "age":"23"},  // 서버에 보낼 데이터
        success: function(data, status, xhr){
            // 요청이 성공하면 실행되는 함수
            $("#demo").append(data);
        },
        error: function(xhr, status, error){
            alert('error');  // 요청이 실패하면 실행되는 함수
        },
        complete: function(xhr, status){
            alert('통신종료');  // 요청 완료 후 실행 (성공/실패와 상관없음)
        }
    });
});
</script>

</body>
</html>

설명:

1. 버튼 클릭 이벤트 등록

- $("#btn").click(...)을 이용하여 버튼 클릭 시 AJAX 요청 수행

2. AJAX 요청 시작

- $.ajax({ ... })는 AJAX 요청을 보내는 기본 jQuery 메서드

3. AJAX 요청 옵션

- "url": "http://localhost:9000/sample2/data.jsp" → 요청 보낼 서버 주소

- "type": "get" → HTTP GET 방식으로 데이터 전송

- "data": {"name":"김튜브", "age":"23"} → 서버에 보낼 데이터

4. AJAX 응답 처리

- success: function(data, status, xhr)

- 서버에서 응답을 받으면 실행

- 응답 데이터를 $("#demo")에 추가

- error: function(xhr, status, error)

- 요청 실패 시 실행 (alert('error') 출력)

- complete: function(xhr, status)

- 요청 실패 시 실행 (alert('error') 출력)

정리: load() vs $.ajax()

	load()	$.ajax()
사용법	$("#div").load("data.html");	$.ajax({...})
용도	간단한 데이터 불러오기	다양한 옵션을 가진 비동기 요청
데이터 전송	기본적으로 GET 요청	GET/POST 등 다양한 방식 지원
성공 / 실패 처리	불가능 (오직 성공만)	success, error, complete 지원

**하지만 load는 단점이 너무 많아서 거의 사용하지 않음!!**

'back > JSP' 카테고리의 다른 글

JSP) String / List / Map 각각 데이터 처리 방식 (0)	2025.03.03
JSP) 예제 : request, session, pageContext 활용 데이터 전달 (0)	2025.03.03
JSP) 예제 : 설문 폼 및 데이터 처리 코드 (0)	2025.03.01
JSP) 내장 객체(Implicit Objects) 정리 (0)	2025.03.01
JSP) JSP(Java Server Pages) 기초 정리 (0)	2025.03.01

현재글JSP) 예제 : AJAX() / load() 정리

pogun 코딩 공부 저장소