AJAX와 fatch

비동기 방식

요청을 보내고 응답이 올때까지 기다리면서 화면 전체를 멈추지 않는 방식이다 따라서 페이지 전체가 아닌 필요한 부분만 처리가능하다

동기 방식을 사용하면 요청을 보내는동안 화면이 멈춘것처럼 느껴지기때문에 비동기 방식을 사용한다

AJAX

Asynchronous JavaScript And XML의 약자로
자바스크립트를 이용해 클라이언트와 서버 간에 데이터를 주고받는 비동기 HTTP 통신이다
XMLHttpRequest(XHR) 객체를 이용해서 전체 페이지가 아닌 필요한 데이터만 불러올 수 있다

✔️XMLHttpRequest

// XMLHttpRequest 객체 생성
const xhr = new XMLHttpRequest();

// 서버에 GET 요청 준비
xhr.open("GET", "/api/user", true);

// 요청이 완료되었을 때 실행되는 함수
xhr.onreadystatechange = function () {
    // 요청 완료 상태인지 확인
    if (xhr.readyState === 4) {
        // HTTP 응답 상태가 200이면 성공
        if (xhr.status === 200) {
            console.log("응답 성공:", xhr.responseText);
        } else {
            console.log("요청 실패");
        }
    }
};

// 서버로 요청 전송
xhr.send();

요즘은 거의 사용하지 않고 Jquery를 사용한다

// 문서가 준비되면 실행
$(document).ready(function () {

    // 버튼 클릭 시 AJAX 요청 실행
    $("#btnLoad").click(function () {

        $.ajax({
            url: "/api/user",          // 요청을 보낼 서버 주소
            type: "GET",               // 요청 방식
            dataType: "json",          // 서버가 JSON 형태로 응답한다고 기대함

            success: function (data) {
                // 요청 성공 시 실행
                console.log("응답 성공:", data);

                // 예시로 화면에 데이터 출력
                $("#result").text("이름: " + data.name);
            },

            error: function (xhr, status, error) {
                // 요청 실패 시 실행
                console.log("요청 실패");
                console.log("상태 코드:", xhr.status);
                console.log("에러 내용:", error);
            }
        });

    });

});

장점

• Jquery를 통해 쉽게 구현 가능
• Error, Success, Complete의 상태를 통해 실행 흐름 조절 가능

단점

• Jquery를 사용해야 간편하고 호환성이 보장됨
• Promise 기반이 아님

fatch

자바스크립트에서  서버와 비동기 통신을 쉽게할수 있게 해주는 함수다 기본적으로 promise를 반환한다 응답은 then 또는 async/await으로 결과를 처리할수 있다

GET 요청 보내기

fetch("/api/user")
    .then(response => {
        // 응답 본문을 JSON 형태로 변환
        return response.json();
    })
    .then(data => {
        // 변환된 데이터를 사용
        console.log("받은 데이터:", data);
    })
    .catch(error => {
        // 요청 중 에러 발생 시 처리
        console.error("에러 발생:", error);
    });

POST 요청보내기

// 서버에 POST 방식으로 데이터 전송
fetch("/api/login", {
    method: "POST", // 요청 방식
    headers: {
        "Content-Type": "application/json" // JSON 데이터 전송 선언
    },
    body: JSON.stringify({
        userId: "hong",
        password: "1234"
    }) // 자바스크립트 객체를 JSON 문자열로 변환
})
    .then(response => response.json())
    .then(data => {
        console.log("응답 결과:", data);
    })
    .catch(error => {
        console.error("에러 발생:", error);
    });

async/await 사용하여 fatch 사용하기

async function getUser() {
    try {
        // 서버에 요청 보내고 응답을 기다림
        const response = await fetch("/api/user");

        // 응답 데이터를 JSON으로 변환
        const data = await response.json();

        console.log("받은 데이터:", data);
    } catch (error) {
        console.error("에러 발생:", error);
    }
}

getUser();

장점

• 자바스크립트의 내장 라이브러리 이므로 별도로 import 할 필요가 없음
• Promise 기반으로 만들어졌기 때문에 데이터 다루기 편리
• 내장 라이브러리이기 때문에 업데이트에 따른 에러 방지가 가능

단점

• 지원하지 않는 브라우저가 존재 (IE11...)
• 네트워크 에러 발생 시 response timeout이 없어 기다려야 함
• JSON으로 변환해주는 과정 필요

결론

fetch는 현대적이고 간단한 비동기 요청 처리를 선호할 때, jQuery.ajax는 더 복잡한 AJAX 요청을 처리해야 할 때 유용하다