▶ JavaScript AJAX

JavaScript AJAX XMLHttp

JavaScript AJAX and XMLHttpRequest: 비동기 웹 요청 처리

*AJAX (Asynchronous JavaScript and XML)**는 웹 페이지에서 비동기적으로 데이터를 주고받을 수 있는 기술입니다. 이를 통해 페이지를 새로 고침하지 않고도 서버와 통신할 수 있으며, 더 빠르고 동적인 사용자 경험을 제공합니다. AJAX의 핵심 요소 중 하나인 XMLHttpRequest 객체를 사용하여 서버에 요청을 보내고 응답을 처리하는 방법에 대해 설명합니다.

1. XMLHttpRequest란?

*XMLHttpRequest*는 AJAX의 핵심 객체로, 웹 브라우저와 서버 간의 데이터 통신을 담당합니다. 이 객체를 사용하면 GET 및 POST 요청을 포함한 다양한 HTTP 요청을 생성할 수 있습니다.

1.1. 주요 특징

비동기 요청: XMLHttpRequest는 비동기적으로 작동하여, 사용자 인터페이스를 차단하지 않고 데이터 요청을 처리할 수 있습니다.
다양한 데이터 형식: XML, JSON, HTML 등 다양한 형식의 데이터를 요청하고 받을 수 있습니다.
상태 코드 확인: 서버의 응답 상태를 확인할 수 있어, 성공적인 요청인지 확인할 수 있습니다.

2. XMLHttpRequest 사용법

2.1. 기본 AJAX 요청

XMLHttpRequest를 사용하여 서버에 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. XMLHttpRequest의 응답 처리

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

3.1. 상태 코드 확인

XMLHttpRequest의 상태 코드는 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. XMLHttpRequest를 사용한 예제

다음은 XMLHttpRequest를 사용하여 간단한 AJAX 요청을 구현하는 전체 예제입니다.

5.1. 예제: 사용자 데이터 가져오기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AJAX Example</title>
</head>
<body>
    <h1>User Data</h1>
    <button id="loadData">Load User Data</button>
    <pre id="result"></pre>

    <script>
        document.getElementById('loadData').addEventListener('click', () => {
            const xhr = new XMLHttpRequest();
            xhr.open('GET', '<https://jsonplaceholder.typicode.com/users>', true);

            xhr.onload = function() {
                if (xhr.status >= 200 && xhr.status < 300) {
                    const users = JSON.parse(xhr.responseText);
                    document.getElementById('result').textContent = JSON.stringify(users, null, 2);  // 결과 출력
                } else {
                    console.error('Error:', xhr.statusText);
                }
            };

            xhr.onerror = function() {
                console.error('Request failed');
            };

            xhr.send();  // 요청 전송
        });
    </script>
</body>
</html>

이 코드는 버튼을 클릭할 때 사용자 데이터를 가져와서 화면에 출력하는 AJAX 요청의 전체 예시입니다. https://jsonplaceholder.typicode.com/users API를 사용하여 가상의 사용자 데이터를 가져옵니다.

6. Fetch API의 대안

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

6.1. Fetch API 사용 예시

fetch('<https://jsonplaceholder.typicode.com/users>')
    .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보다 사용하기 쉽고 코드가 더 간결합니다.

요약

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

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

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

코딩 스쿨 JavaScript