jQuery를 이용한 AJAX

jQuery
JavaScript 라이브러리 → AJAX를 간편하게 구현할 수 있도록 도와줌

간단한 jQuery 문법

$ : 제이쿼리라는 의미 → 제이쿼리 문법을 작성하겠다!
$(선택자).동작함수1().동작함수2(); → 선택자로 선택한 요소에 함수 적용
$(선택자).동작(function() {...});
$(선택자).동작(function() {
$(선택자).동작함수();
$(선택자).동작(function() {...});
};

jQuery 선택자 - $(선택자)

타입 선택자 : 일반 태그 선택
- $('p') → <p> 태그
- $('button') → <button> 태그
클래스 선택자 : .class
- $(.클래스명)
ID 선택자 : #ID
- $('#id명')
다중 선택자 : A, B
- $('.클래스명A, .클래스명B')
자식 선택자 : A > B
- $('클래스명A > .클래스명') → A 요소의 1차 하위요소 B에 적용
후손 선택자 : A B
- $('.클래스명A .클래스명B')

AJAX(Asynchronous JavaScript and XML
JavaScript에서 클라이언트와 서버 간 데이터를 비동기적으로 주고받을 수 있게 해주는 기술
- 주로 JSON이나 XML 형태로 데이터를 받아옴

비동기 방식 ?
웹페이지를 re-load하지 않고 데이터를 불러오는 방식
필요한 데이터만 불러오면서 리소스 낭비를 줄임

AJAX 사용의 장점

페이지 새로고침 없이 데이터 갱신
- 예) 댓글 작성 후 페이지 전체를 새로고침하지 않고 새로운 댓글만 추가
빠른 응답과 성능 개선
- 전체 페이지를 렌더링하지 않으므로 처리 속도 빨라짐
다양한 데이터 형식 지원
- JSON, HTML, 텍스트 등 다양한 데이터 형식 주고받음
서버의 처리가 완료될 때까지 기다리지 않고 처리 가능

AJAX를 사용하는 방법

XMLHttpRequest 객체를 통해 서버에 request
jQuery의 메서드 사용

jQuery를 통한 AJAX 사용

XMLHttpRequest 방식은 사용자가 직접 객체 생성, 요청 설정, 상태 확인, 에러 처리 등을 구현해야 함
jQuery 방식은 이를 추상화하여 코드 작성이 간단함

XMLHttpRequest :

let xhr = new XMLHttpRequest();
xhr.open("GET", "data.jsp", true);
xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(xhr.responseText);
    }
};
xhr.send();

jQuery :

$.ajax({
    url: "data.jsp",
    type: "GET",
    success: function (response) {
    	console.log(response);
    },
    error: function(xhr, status, error) {
    	console.error(error);
    }
});

jQuery는 .done(), .fail(), .always() 와 같은 체이닝 메서드를 제공 → 비동기 흐름을 깔끔하게 관리할 수 있음

$.ajax("data.jsp")
    .done(function (response) {
		console.log("Success: ", response);
    })
    .fail(function (response) {
    	console.error("Error: ", response);
	})
    .always(function () {
    	console.log("Request completed.");
    });

jQuery는 $.get(), $.post() 등의 간단한 메서드를 제공 → 자주 사용하는 요청 패턴을 더 쉽게 작성할 수 있음

AJAX 문법

$.ajax({
    type : 'post',
    url : '/test',
    async : true,
    headers : {
      "Content-Type" : "application/json",
      "X-HTTP-Method-Override" : "POST"
    },
    dataType : 'text',
    data : JSON.stringify({
      "no" : no,
      "name" : name,
      "nick" : nick
    }),
    success : function(response) {
        console.log(response);
    },
    error : function(request, status, error) {
        console.log(error)
    }
})

type : 타입 (GET / POST ...)
url : 요청할 서버 url
async : 비동기화 여부 (default : true)
dataType : 받아올 데이터 자료형
data : 요청할 때 보낼 데이터 (Object / String / Array)
success : 성공 시 실행할 콜백함수
error : 실패 시 실행할 콜백함

예시

예1) JQuery 사용 : HTML 문서 내의 <script> 태그 내에서 AJAX 요청 - GET

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AJAX Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <h1>사용자 목록</h1>
    <button id="loadUsers">사용자 불러오기</button>
    <div id="userList">여기에 사용자 목록이 표시됩니다.</div>

    <script>
        // jQuery를 사용한 AJAX 요청
        $(document).ready(function () {
            $("#loadUsers").click(function () {
                $.ajax({
                    url: "users.jsp", // 데이터를 요청할 서버의 URL
                    method: "GET",    // HTTP 메서드 설정
                    success: function (response) {
                        let data = JSON.parse(response); // 서버 응답 데이터를 JSON으로 파싱
                        let userListHTML = "<ul>";

                        // 사용자 목록을 순회하며 리스트 아이템 생성
                        data.users.forEach(user => {
                            userListHTML += `<li>${user.name} (${user.email})</li>`;
                        });

                        userListHTML += "</ul>";

                        // 결과를 HTML에 삽입
                        $("#userList").html(userListHTML);
                    },
                    error: function (xhr, status, error) {
                        // 에러 발생 시 메시지 출력
                        $("#userList").html("<p>데이터를 불러오는 데 실패했습니다.</p>");
                        console.error("Error:", error);
                    }
                });
            });
        });
    </script>
</body>
</html>

users.jsp :

<%@ page language="java" contentType="application/json; charset=UTF-8" pageEncoding="UTF-8"%>
<%
    // JSON 데이터 생성
    String json = "{\"users\": ["
                + "{\"name\":\"John Doe\", \"email\":\"john@example.com\"},"
                + "{\"name\":\"Jane Smith\", \"email\":\"jane@example.com\"},"
                + "{\"name\":\"Sam Lee\", \"email\":\"sam@example.com\"}"
                + "]}";

    // JSON 응답 전송
    response.setContentType("application/json; charset=UTF-8");
    response.getWriter().write(json);
%>

버튼 클릭 후 :

서버에서 가져온 JSON 데이터를 기반으로 HTML문서화되어 사용자 목록이 동적으로 업데이트됨

<ul>
    <li>John Doe (john@example.com)</li>
    <li>Jane Smith (jane@example.com)</li>
    <li>Sam Lee (sam@example.com)</li>
</ul>

예2) XMLHttpRequest 사용 : js 파일을 통한 AJAX 요청 - GET

index.jsp :

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AJAX with External JS</title>
</head>
<body>
    <h1>사용자 목록</h1>
    <button id="loadUsers">사용자 불러오기</button>
    <div id="userList">여기에 사용자 목록이 표시됩니다.</div>

    <!-- 외부 JS 파일 연결 -->
    <script src="scripts/ajax.js"></script>
</body>
</html>

script/ajax.js :

// DOM이 완전히 로드된 후 이벤트 바인딩
document.addEventListener("DOMContentLoaded", function () {
    // 버튼 클릭 이벤트 처리
    document.getElementById("loadUsers").addEventListener("click", function () {
        // AJAX 요청
        const xhr = new XMLHttpRequest();
        xhr.open("GET", "users.jsp", true);

        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4 && xhr.status === 200) {
                // 응답 데이터를 JSON으로 파싱
                const data = JSON.parse(xhr.responseText);

                // 사용자 목록 생성
                let userListHTML = "<ul>";
                data.users.forEach(user => {
                    userListHTML += `<li>${user.name} (${user.email})</li>`;
                });
                userListHTML += "</ul>";

                // 결과를 HTML에 삽입
                document.getElementById("userList").innerHTML = userListHTML;
            }
        };

        xhr.onerror = function () {
            // 에러 처리
            document.getElementById("userList").innerHTML = "<p>데이터를 불러오는 데 실패했습니다.</p>";
            console.error("AJAX 요청 실패");
        };

        // 요청 전송
        xhr.send();
    });
});

users.jsp :

<%@ page language="java" contentType="application/json; charset=UTF-8" pageEncoding="UTF-8"%>
<%
    // JSON 데이터 생성
    String json = "{\"users\": ["
                + "{\"name\":\"Alice\", \"email\":\"alice@example.com\"},"
                + "{\"name\":\"Bob\", \"email\":\"bob@example.com\"},"
                + "{\"name\":\"Charlie\", \"email\":\"charlie@example.com\"}"
                + "]}";

    // JSON 응답 전송
    response.setContentType("application/json; charset=UTF-8");
    response.getWriter().write(json);
%>

예3) jQuery 사용 : js 파일을 통한 AJAX 요청 - POST

index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AJAX POST with jQuery</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="scripts/ajax_post.js"></script> <!-- 외부 JS 파일 연결 -->
</head>
<body>
    <h1>사용자 추가</h1>
    <form id="userForm">
        <label for="name">이름:</label>
        <input type="text" id="name" name="name" required>
        <br>
        <label for="email">이메일:</label>
        <input type="email" id="email" name="email" required>
        <br>
        <button type="submit">사용자 추가</button>
    </form>
    <div id="response">여기에 응답 결과가 표시됩니다.</div>
</body>
</html>

script/ajax_post.js :

$(document).ready(function () {
    // 폼 제출 이벤트 처리
    $("#userForm").on("submit", function (event) {
        event.preventDefault(); // 기본 폼 제출 방지

        // 폼 데이터 가져오기
        const userData = {
            name: $("#name").val(),
            email: $("#email").val()
        };

        // jQuery를 사용한 AJAX POST 요청
        $.ajax({
            url: "addUser.jsp",      // POST 요청을 처리할 서버 URL
            method: "POST",          // POST 요청
            data: userData,          // 서버로 전송할 데이터
            success: function (response) {
                // 서버 응답 처리
                $("#response").html(`<p>${response}</p>`);
            },
            error: function (xhr, status, error) {
                // 에러 처리
                $("#response").html("<p>사용자 추가에 실패했습니다.</p>");
                console.error("AJAX 요청 실패:", error);
            }
        });
    });
});

addUser.jsp :

<%@ page language="java" contentType="text/plain; charset=UTF-8" pageEncoding="UTF-8"%>
<%
    // 클라이언트로부터 받은 데이터 처리
    String name = request.getParameter("name");
    String email = request.getParameter("email");

    // 데이터 검증 및 처리
    if (name != null && email != null && !name.isEmpty() && !email.isEmpty()) {
        // 성공 응답
        response.setContentType("text/plain; charset=UTF-8");
        response.getWriter().write("사용자가 성공적으로 추가되었습니다: " + name + " (" + email + ")");
    } else {
        // 실패 응답
        response.setStatus(HttpServletResponse.SC_BAD_REQUEST);
        response.getWriter().write("잘못된 요청입니다.");
    }
%>

실행 흐름 :

HTML 렌더링
- index.jsp를 통해 클라이언트가 HTML을 로드하고, 브라우저는 외부 js 파일(ajax_post.js)을 실행
폼 제출 이벤트
- 사용자가 이름과 이메일을 입력한 뒤 폼을 제출하면 JavaScript가 기본 폼 동작을 중단하고, AJAX 요청을 실행
AJAX POST 요청
- 폼 데이터를 POST 방식으로 addUser.jsp에 전송
서버에서 데이터 처리
- addUser.jsp가 요청 데이터를 읽고, 적절한 응답을 클라이언트에 전송

'JSP' 카테고리의 다른 글

JSP 기본 문법 (0)	2024.12.01
JSP(JavaServer Pages)란? (0)	2024.12.01

daeng note

jQuery를 이용한 AJAX

'JSP' 카테고리의 다른 글

티스토리툴바

jQuery를 이용한 AJAX

'JSP' 카테고리의 다른 글

'JSP' Related Articles

티스토리툴바