XMLHttpRequest(XHR) - 비동기 자바스크립트

XMLHttpRequest(XHR)는 자바스크립트에서 비동기적으로 서버와 통신할 수 있게 해주는 API입니다. 이는 웹 페이지가 전체적으로 다시 로드되지 않고도 데이터를 서버에서 가져오거나 서버로 전송할 수 있도록 해줍니다. 이 방식은 AJAX(Asynchronous JavaScript and XML)의 핵심 부분으로, 사용자가 웹 페이지와 상호작용할 때 좀 더 빠르고 부드러운 사용자 경험을 제공할 수 있습니다.

XMLHttpRequest 객체 사용

XMLHttpRequest 객체는 자바스크립트에서 서버와의 요청을 만들고, 데이터를 비동기적으로 처리할 수 있게 해줍니다. 이 객체를 사용하면 GET, POST와 같은 HTTP 요청을 비동기적으로 보낼 수 있으며, 서버의 응답을 처리할 수 있습니다.

기본 사용 방법

1. XMLHttpRequest 객체 생성
2. 서버 요청 초기화 (open() 메서드 사용)
3. 요청 보내기 (send() 메서드 사용)
4. 서버 응답 처리 (onreadystatechange 또는 onload 이벤트)

XHR 비동기 요청 예시

// 1. XMLHttpRequest 객체 생성
var xhr = new XMLHttpRequest();

// 2. 요청 초기화 (비동기 요청)
xhr.open('GET', 'https://api.example.com/data', true);

// 3. 요청에 대한 응답을 처리하는 함수 설정
xhr.onload = function() {
    if (xhr.status >= 200 && xhr.status < 300) {
        // 성공적으로 데이터를 받았을 때 처리
        console.log('Success:', xhr.responseText);
    } else {
        // 에러 처리
        console.error('Error:', xhr.statusText);
    }
};

// 4. 요청 보내기
xhr.send();

설명:

1. XMLHttpRequest 객체 생성: new XMLHttpRequest()를 사용하여 새로운 XHR 객체를 생성합니다.
2. open() 메서드: xhr.open()으로 요청을 설정합니다. 첫 번째 인자는 요청 방식(GET, POST 등), 두 번째 인자는 URL, 세 번째 인자는 요청을 비동기적으로 처리할 것인지 여부를 나타냅니다. true로 설정하면 비동기 요청이 됩니다.
3. onload 이벤트: 서버로부터 응답을 받을 때 호출되는 이벤트로, 여기서 상태 코드를 확인하여 요청이 성공했는지 여부를 판단합니다. 성공적으로 데이터를 받아왔다면 responseText에 서버에서 반환한 데이터가 담겨 있습니다.
4. send() 메서드: 서버로 요청을 전송합니다.

POST 요청 예시

POST 요청은 GET 요청과 다르게 데이터를 서버로 전송할 때 사용됩니다. 예를 들어, 양식 데이터를 전송하거나 JSON 데이터를 서버로 보낼 때 POST 방식을 사용합니다.

var xhr = new XMLHttpRequest();

// 요청 초기화 (POST 방식)
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) {
        console.log('Success:', xhr.responseText);
    } else {
        console.error('Error:', xhr.statusText);
    }
};

// 서버로 전송할 JSON 데이터
var data = JSON.stringify({ name: 'John', age: 30 });

// 요청 보내기 (데이터 포함)
xhr.send(data);

설명:

• POST 방식으로 요청 보내기: open() 메서드를 호출할 때 POST를 첫 번째 인자로 전달합니다.
• setRequestHeader(): Content-Type 헤더를 설정하여 서버에 데이터를 전송할 때 어떤 형식으로 보내는지 지정합니다. 여기서는 JSON 형식으로 데이터를 전송합니다.
• JSON 데이터 전송: send() 메서드를 호출할 때 서버로 보내는 데이터를 함께 전달합니다.

XHR 상태 코드

XMLHttpRequest 객체는 요청의 상태를 나타내는 여러 가지 상태 코드를 제공합니다. 이를 통해 요청의 진행 상태를 추적할 수 있습니다.

• xhr.readyState: 요청의 현재 상태를 나타냅니다.

  • 0: 요청이 초기화되지 않음.
  • 1: 서버와 연결이 열림.
  • 2: 요청이 수신됨.
  • 3: 요청 처리 중.
  • 4: 요청이 완료되고 응답이 준비됨.

• xhr.status: HTTP 상태 코드를 반환합니다. 200번대는 성공, 400번대는 클라이언트 오류, 500번대는 서버 오류를 나타냅니다.

비동기 요청 처리

XHR 요청은 비동기적으로 처리되기 때문에, 요청이 완료되기 전에 다른 작업을 계속할 수 있습니다. 서버 응답이 완료되면, onload, onreadystatechange 등 이벤트 핸들러가 호출되어 응답을 처리합니다.

예를 들어, 다음과 같이 onreadystatechange를 통해 요청의 상태 변화에 따라 코드를 실행할 수 있습니다:

xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        // 요청이 완료되고 성공했을 때
        console.log(xhr.responseText);
    }
};

동기식 요청

XHR은 비동기 방식이 기본이지만, 세 번째 인자에 false를 전달하여 동기적으로 처리할 수 있습니다. 하지만 동기식 요청은 전체 페이지가 응답을 기다리며 멈추기 때문에, 권장되지 않습니다.

xhr.open('GET', 'https://api.example.com/data', false);  // 동기식 요청
xhr.send();
console.log(xhr.responseText);  // 응답이 올 때까지 기다린 후 실행

결론

XMLHttpRequest는 서버와 비동기 통신을 가능하게 해주는 자바스크립트의 중요한 API입니다. 이를 사용하면 웹 페이지를 다시 로드하지 않고도 서버로부터 데이터를 받아오거나 서버로 데이터를 전송할 수 있습니다. 하지만 최근에는 Fetch API가 더 간결한 비동기 처리를 제공하기 때문에, XMLHttpRequest보다는 fetch()를 사용하는 것이 더 선호되고 있습니다.