▶ JavaScript AJAX

JavaScript AJAX Request

JavaScript AJAX Request: 비동기 요청 처리하기

AJAX (Asynchronous JavaScript and XML) 요청은 웹 페이지에서 서버와 비동기적으로 데이터를 주고받기 위한 기술입니다. 이를 통해 웹 애플리케이션은 페이지를 새로 고침하지 않고도 서버와 통신할 수 있으며, 사용자 경험을 개선할 수 있습니다. 이 가이드는 JavaScript에서 AJAX 요청을 만드는 방법, XMLHttpRequest 객체의 사용법, Fetch API와의 비교에 대해 설명합니다.

1. AJAX 요청이란?

AJAX 요청은 JavaScript를 사용하여 서버에 HTTP 요청을 보내고 응답을 받는 프로세스를 의미합니다. 이를 통해 사용자는 더 빠르고 동적인 웹 페이지를 경험할 수 있습니다.

1.1. AJAX의 기본 작동 원리

사용자 이벤트: 버튼 클릭, 폼 제출 등으로 AJAX 요청을 시작합니다.
AJAX 요청 생성: XMLHttpRequest 객체를 생성하여 서버에 요청을 보냅니다.
서버 응답 처리: 서버로부터 응답을 받으면 JavaScript를 사용하여 데이터를 처리하고 웹 페이지를 업데이트합니다.

2. XMLHttpRequest 객체 사용하기

2.1. AJAX 요청 생성

XMLHttpRequest 객체를 사용하여 AJAX 요청을 생성하는 기본적인 방법은 다음과 같습니다.

2.1.1. GET 요청 예제

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

// 요청 초기화 (GET 방식, URL 설정)
xhr.open('GET', '<https://api.example.com/data>', true);

// 응답 처리
xhr.onload = function() {
    if (xhr.status >= 200 && xhr.status < 300) {
        const data = JSON.parse(xhr.responseText);  // JSON 응답 파싱
        console.log(data);  // 데이터 출력
    } else {
        console.error('Error:', xhr.statusText);  // 오류 처리
    }
};

// 오류 처리
xhr.onerror = function() {
    console.error('Request failed');
};

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

위 코드는 GET 요청을 보내고, 서버로부터 응답을 받아 JSON 형식으로 파싱한 후 출력하는 간단한 AJAX 요청을 나타냅니다.

2.2. POST 요청 예제

POST 요청을 사용하여 데이터를 서버로 전송하는 방법은 다음과 같습니다.

const xhr = new XMLHttpRequest();
xhr.open('POST', '<https://api.example.com/data>', true);
xhr.setRequestHeader('Content-Type', 'application/json');  // 요청 헤더 설정

// 응답 처리
xhr.onload = function() {
    if (xhr.status >= 200 && xhr.status < 300) {
        const response = JSON.parse(xhr.responseText);
        console.log('Response:', response);  // 서버 응답 출력
    } else {
        console.error('Error:', xhr.statusText);  // 오류 처리
    }
};

// 데이터 전송
const data = JSON.stringify({ name: 'John', age: 30 });
xhr.send(data);  // JSON 데이터 전송

이 코드는 JSON 형식의 사용자 데이터를 서버에 POST 요청으로 전송하는 예시입니다.

3. AJAX 요청의 응답 처리

AJAX 요청의 응답은 onload 이벤트 핸들러를 통해 처리됩니다. 이 핸들러는 서버의 응답이 도착했을 때 호출됩니다.

3.1. 상태 코드 확인

AJAX 요청의 상태 코드는 xhr.status를 통해 확인할 수 있습니다. 일반적으로 200번대 상태 코드는 성공을 나타냅니다.

3.2. 응답 데이터 처리

응답 데이터는 xhr.responseText 또는 xhr.response를 통해 접근할 수 있습니다. JSON 형식의 응답을 받을 경우, JSON.parse()를 사용하여 JavaScript 객체로 변환합니다.

xhr.onload = function() {
    if (xhr.status === 200) {
        const data = JSON.parse(xhr.responseText);  // JSON으로 변환
        console.log(data);  // 데이터 출력
    }
};

4. AJAX의 제한사항

4.1. CORS(Cross-Origin Resource Sharing)

AJAX 요청은 CORS 정책을 따릅니다. 즉, 다른 출처의 리소스에 요청을 보내는 경우, 서버에서 CORS 헤더를 설정해야 합니다. 그렇지 않으면 브라우저에서 요청이 차단됩니다.

4.2. 비동기적 작동

XMLHttpRequest는 비동기적으로 작동하므로, 데이터 요청과 응답 처리를 기다리는 동안 UI가 중단되지 않습니다.

4.3. 오류 처리

HTTP 오류 상태(예: 404, 500)는 onload 이벤트에서 수신되며, 적절한 오류 처리가 필요합니다.

5. Fetch API와 비교

AJAX의 전통적인 방법인 XMLHttpRequest를 사용하는 대신, Fetch API를 사용할 수도 있습니다. Fetch API는 더 간단하고 직관적인 방식으로 네트워크 요청을 처리합니다.

5.1. Fetch API 사용 예시

fetch('<https://api.example.com/data>')
    .then(response => {
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        return response.json();  // JSON으로 변환
    })
    .then(data => {
        console.log(data);  // 데이터 출력
    })
    .catch(error => {
        console.error('Fetch error:', error);
    });

Fetch API는 XMLHttpRequest보다 사용하기 쉽고 코드가 더 간결합니다.

6. AJAX의 활용 사례

AJAX는 다양한 웹 애플리케이션에서 활용될 수 있습니다:

6.1. 사용자 인터페이스 개선

비동기 데이터 로딩을 통해 사용자 경험을 향상시킬 수 있습니다.

6.2. 실시간 데이터 업데이트

소셜 미디어 피드, 뉴스 업데이트 등을 실시간으로 반영할 수 있습니다.

6.3. 위치 기반 서비스

사용자의 위치를 기반으로 하는 서비스에서 AJAX를 활용하여 동적으로 데이터를 가져올 수 있습니다.

요약

JavaScript AJAX Request는 웹 애플리케이션에서 서버와 비동기적으로 통신하는 데 사용되는 중요한 기술입니다. 이를 통해 사용자 경험을 개선하고, 페이지를 동적으로 업데이트할 수 있습니다.

주요 메서드: XMLHttpRequest, open(), send(), onload, onerror.
응답 처리: 상태 코드 확인 및 응답 데이터 처리.
대안: Fetch API를 통해 더 간편하게 네트워크 요청을 처리할 수 있음.

JavaScript의 AJAX 요청을 활용하여 더 나은 사용자 경험과 동적인 웹 애플리케이션을 개발할 수 있습니다.

코딩 스쿨 JavaScript