[springboot] AJAX 사용 방법과 동기(Synchronous), 비동기(Asynchronous) 차이

AJAX란?

AJAX(Asynchronous JavaScript and XML)는 웹 페이지에서 전체를 새로고침하지 않고도 서버와 데이터를 주고받을 수 있는 기술입니다. 이를 통해 사용자 경험이 개선되고 웹 애플리케이션이 더욱 동적으로 작동할 수 있습니다.

• "Asynchronous": 비동기적으로 동작하여, 요청과 응답이 이루어지는 동안 다른 작업을 계속 수행할 수 있습니다.
• "JavaScript": 클라이언트 측에서 동작하며, 주로 XMLHttpRequest 객체나 Fetch API를 사용해 서버와 통신합니다.
• "XML": 초기에는 XML 형식으로 데이터를 주고받았지만, 현재는 JSON이 주로 사용됩니다.

AJAX의 주요 특징

1. 비동기 통신: 전체 페이지를 다시 로드하지 않고도 데이터를 갱신할 수 있음.
2. 사용자 경험 개선: 더 빠르고 응답성이 좋은 웹 페이지를 제공.
3. 다양한 데이터 포맷: JSON, XML, HTML, 텍스트 등 다양한 형식의 데이터 처리.

AJAX 비동기 예시:

fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error('Error:', error));

 

AJAX는 기본적으로 비동기 방식을 사용하지만, 필요에 따라 동기 방식으로도 사용할 수 있습니다. 다만, 동기 방식은 사용자 경험에 악영향을 줄 수 있기 때문에 잘 사용하지 않습니다.

---

 

AJAX 사용 방법

다음은 자바스크립트에서 AJAX를 사용하는 몇 가지 예시입니다. 각 방법은 상황에 따라 적합하게 사용할 수 있습니다.

1. XMLHttpRequest를 사용한 AJAX

가장 기본적인 방식으로, 초기 AJAX 구현 방법입니다.

const xhr = new XMLHttpRequest();
xhr.open("GET", "https://jsonplaceholder.typicode.com/posts/1", true); // true는 비동기 설정
xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(JSON.parse(xhr.responseText)); // 응답 데이터 출력
    }
};
xhr.send();

설명:

• xhr.open(method, url, async)로 요청 초기화.
• xhr.onreadystatechange로 요청 상태 변경 시 작업을 수행.
• xhr.readyState가 4(완료), xhr.status가 200(성공)일 때 응답 처리.

---

2. Fetch API를 사용한 AJAX

현대적인 방식으로, 간결하고 가독성이 좋습니다.

fetch("https://jsonplaceholder.typicode.com/posts/1")
    .then(response => {
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        return response.json(); // JSON으로 변환
    })
    .then(data => console.log(data)) // 데이터 출력
    .catch(error => console.error("Error:", error)); // 에러 처리

설명:

• fetch()는 Promise를 반환.
• response.json()을 사용해 JSON 데이터를 파싱.
• 에러 처리를 위해 catch() 블록 사용.

---

3. Async/Await로 Fetch API 사용

비동기 코드를 동기적으로 작성할 수 있어 가독성이 높아집니다.

async function fetchData() {
    try {
        const response = await fetch("https://jsonplaceholder.typicode.com/posts/1");
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        const data = await response.json(); // JSON 데이터 파싱
        console.log(data); // 데이터 출력
    } catch (error) {
        console.error("Error:", error); // 에러 처리
    }
}

fetchData();

설명:

• async/await로 비동기 흐름을 동기 코드처럼 작성.
• try-catch 블록으로 에러 처리.

---

4. jQuery를 사용한 AJAX

jQuery 라이브러리를 사용할 경우 매우 간단하게 AJAX 요청을 작성할 수 있습니다.

$.ajax({
    url: "https://jsonplaceholder.typicode.com/posts/1",
    type: "GET",
    dataType: "json",
    success: function (data) {
        console.log(data); // 성공 시 데이터 출력
    },
    error: function (xhr, status, error) {
        console.error("Error:", error); // 에러 처리
    }
});

설명:

• url: 요청할 API 경로.
• type: 요청 메서드 (GET, POST 등).
• dataType: 데이터 형식(JSON 등).
• success, error로 각각 성공과 실패 시의 동작 정의.

---

5. POST 요청 예시 (Fetch API 사용)

POST 요청으로 데이터를 서버에 전송하는 경우입니다.

async function postData() {
    try {
        const response = await fetch("https://jsonplaceholder.typicode.com/posts", {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
            },
            body: JSON.stringify({
                title: "foo",
                body: "bar",
                userId: 1
            })
        });

        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }

        const data = await response.json();
        console.log(data); // 응답 데이터 출력
    } catch (error) {
        console.error("Error:", error);
    }
}

postData();

설명:

• method: HTTP 메서드 (POST).
• headers: 요청 헤더 설정 (JSON 데이터 전송).
• body: 서버로 전송할 데이터(JSON 문자열로 변환).

---

요약

• 최신 코드 작성 시에는 Fetch API나 Async/Await 방식을 사용하는 것이 권장됩니다.
• jQuery는 간편하지만 추가적인 라이브러리 로드가 필요하므로 프로젝트 환경에 따라 사용 여부를 결정하세요.

---

동기와 비동기의 차이

1. 동기 (Synchronous)

• 작업이 순차적으로 처리됩니다.
• 현재 작업이 완료될 때까지 다음 작업이 대기합니다.
• 코드 실행 순서와 결과 반환이 일치합니다.
• 장점: 구현이 단순하고 예측 가능.
• 단점: 하나의 작업이 오래 걸리면 전체 프로세스가 멈춤.

2. 비동기 (Asynchronous)

• 작업이 동시에 또는 병렬로 처리될 수 있습니다.
• 다른 작업을 수행하는 동안 현재 작업이 완료되기를 기다리지 않습니다.
• 콜백, 프로미스(Promise), async/await 등의 방식으로 처리.
• 장점: 오래 걸리는 작업 중에도 다른 작업을 수행할 수 있어 효율적.
• 단점: 코드 흐름이 복잡해질 수 있음.

주요 차이점 요약

특징		동기	비동기
처리 방식		순차적 처리	병렬 처리
작업 대기		다음 작업이 이전 작업 완료를 기다림	다음 작업이 바로 실행 가능
사용자 경험		대기 시간 발생	반응성이 빠름
구현 복잡도		단순	다소 복잡 (콜백, 프로미스 필요)