XMLHttpRequest

XMLHttpRequest (XHR) 객체는 서버와 상호작용하기 위해 사용되며, 전체 페이지의 새로고침 없이도 URL로부터 데이터를 받아올 수 있게 해줍니다. 이는 AJAX(Asynchronous JavaScript and XML) 통신의 핵심 요소 중 하나입니다. **XMLHttpRequest**를 사용하면, 웹 페이지가 로드된 후에도 서버로부터 데이터를 요청하고 받아올 수 있으며, 이를 통해 페이지의 일부분만을 업데이트할 수 있습니다.

기본 사용법

XMLHttpRequest 객체의 사용법은 다음과 같은 단계로 요약할 수 있습니다:

1. XHR 객체 생성: XMLHttpRequest 객체의 인스턴스를 생성합니다.
2. 요청 초기화: .open() 메서드를 사용하여 요청을 초기화합니다.
3. 응답 처리를 위한 이벤트 핸들러 설정: .onreadystatechange 이벤트 핸들러를 사용하여 서버 응답을 처리합니다.
4. 요청 전송: .send() 메서드를 사용하여 서버에 요청을 전송합니다.

예제 코드

// XMLHttpRequest 객체 생성
var xhr = new XMLHttpRequest();
 
// 요청 초기화
xhr.open('GET', '<https://api.example.com/data>', true);
 
// 응답 처리를 위한 이벤트 핸들러 설정
xhr.onreadystatechange = function () {
  // 요청이 완료되고, 응답이 성공적으로 도착했는지 확인
  if (xhr.readyState === 4 && xhr.status === 200) {
    // 서버 응답 처리
    console.log(xhr.responseText);
  }
};
 
// 요청 전송
xhr.send();
 

XMLHttpRequest의 주요 속성 및 메서드

• .open(method, url[, async[, user[, password]]]): HTTP 요청을 초기화합니다. method는 HTTP 메서드('GET', 'POST' 등), url은 요청을 보낼 서버의 URL입니다. async는 비동기적(true) 또는 동기적(false) 요청 여부를 결정합니다.
• .send([body]): 요청을 서버에 전송합니다. **body**는 주로 'POST' 메서드와 함께 사용됩니다.
• .setRequestHeader(header, value): 요청에 특정 HTTP 헤더 값을 설정합니다.
• .status: HTTP 응답 상태 코드를 반환합니다 (예: 200, 404).
• .responseText: 서버로부터 반환된 응답 텍스트를 문자열로 반환합니다.
• .readyState: 요청의 현재 상태를 나타내는 값으로, **0**에서 **4**까지의 값을 가집니다.

주의사항

• 보안: 같은 출처 정책(Same-Origin Policy)에 의해, 다른 도메인으로의 요청은 기본적으로 제한됩니다. CORS(Cross-Origin Resource Sharing)를 지원하는 서버에서는 이러한 제한을 완화할 수 있습니다.
• 대체 기술: **XMLHttpRequest**보다 더 현대적이고 간결한 API인 **fetch**가 널리 사용되고 있습니다. **fetch**는 프로미스 기반으로, 비동기 처리를 더 쉽게 할 수 있게 해줍니다.

**XMLHttpRequest**는 여전히 웹 개발에서 유용하게 사용될 수 있지만, 새로운 프로젝트에서는 더 나은 기능과 가독성을 제공하는 **fetch API**의 사용을 고려해 보는 것이 좋습니다.