[Day 35 | Spring] XMLHttpRequest(XHR) API

1. XMLHttpRequest란?

XMLHttpRequest(XHR)는 클라이언트가 서버와 데이터를 비동기적으로 교환할 수 있게 해주는 브라우저 API입니다.

• 1999년에 처음 도입된 이후로 AJAX 기술의 핵심 구성 요소로 자리 잡았습니다.
• 이름에 XML이 포함되어 있지만, JSON, HTML, 텍스트 등 다양한 데이터 포맷을 처리할 수 있습니다.

---

2. XMLHttpRequest의 주요 특징

1. 비동기 데이터 교환:
   • 전체 페이지를 새로 고치지 않고, 필요한 데이터만 갱신 가능.
2. 다양한 데이터 형식 지원:
   • XML, JSON, 텍스트 등.
3. GET/POST 등의 HTTP 메서드 지원:
   • RESTful API와 함께 사용 가능.
4. 브라우저 내장 객체:
   • 모든 최신 브라우저에서 지원.

---

3. XMLHttpRequest의 기본 사용법

3.1 객체 생성

const xhr = new XMLHttpRequest();

---

3.2 요청 열기 (open)

• 서버에 요청을 보낼 준비를 합니다.

xhr.open("GET", "https://jsonplaceholder.typicode.com/posts/1", true);
// 첫 번째 인자: HTTP 메서드 (GET, POST 등)
// 두 번째 인자: 요청 URL
// 세 번째 인자: 비동기 여부 (true: 비동기, false: 동기)

---

3.3 요청 전송 (send)

• 요청을 서버로 보냅니다.

xhr.send();

---

3.4 응답 처리

• 요청에 대한 서버 응답은 onreadystatechange 이벤트 핸들러를 통해 처리.
• readyState와 status 값을 사용해 응답 상태를 확인.

xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(xhr.responseText); // 서버 응답 출력
    }
};

---

4. XMLHttpRequest의 주요 프로퍼티와 메서드

4.1 주요 프로퍼티

프로퍼티	설명
readyState	요청의 현재 상태 (0~4의 값)
status	HTTP 상태 코드 (200: 성공, 404: 파일 없음 등)
statusText	상태 코드의 텍스트 표현 (예: "OK", "Not Found")
responseText	서버로부터 응답받은 텍스트 데이터
responseXML	서버로부터 응답받은 XML 데이터 (XMLDocument 객체로 제공)

---

4.2 주요 메서드

메서드	설명
open	요청 준비 (HTTP 메서드, URL, 비동기 여부 지정).
send	요청 실행.
setRequestHeader	요청 헤더 설정 (예: Content-Type, Authorization).
abort	요청 취소.
getResponseHeader	특정 응답 헤더 값을 가져옴.
getAllResponseHeaders	모든 응답 헤더를 문자열로 가져옴.

---

5. readyState의 값

readyState는 요청의 상태를 나타내는 숫자 값입니다.

readyState 값	상태	설명
0	UNSENT	요청이 초기화되지 않음 (open 메서드 호출 전).
1	OPENED	open 호출 후, 요청이 준비됨.
2	HEADERS_RECEIVED	응답 헤더가 수신됨.
3	LOADING	응답 본문 일부가 수신 중.
4	DONE	응답 완료. 데이터를 사용할 준비가 됨.

---

6. XMLHttpRequest 사용 예제

6.1 GET 요청

const xhr = new XMLHttpRequest();

xhr.open("GET", "https://jsonplaceholder.typicode.com/posts/1", true);

xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
        console.log("Response:", xhr.responseText);
    }
};

xhr.send();

---

6.2 POST 요청

const xhr = new XMLHttpRequest();

xhr.open("POST", "https://jsonplaceholder.typicode.com/posts", true);
xhr.setRequestHeader("Content-Type", "application/json");

xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 201) {
        console.log("Created:", xhr.responseText);
    }
};

const data = JSON.stringify({
    title: "New Post",
    body: "This is a new post.",
    userId: 1
});

xhr.send(data);

---

6.3 에러 처리

xhr.onreadystatechange = function () {
    if (xhr.readyState === 4) {
        if (xhr.status === 200) {
            console.log("Response:", xhr.responseText);
        } else {
            console.error("Error:", xhr.status, xhr.statusText);
        }
    }
};

---

7. Fetch API와의 비교

XMLHttpRequest는 Fetch API가 등장하면서 점차 대체되고 있지만, 여전히 일부 레거시 코드 및 특정 기능에서 사용됩니다.

특징	XMLHttpRequest	Fetch API
비동기 처리 방식	콜백 기반.	Promise 기반으로 더 간결하고 직관적.
응답 데이터 처리	responseText, responseXML 등을 직접 처리.	JSON, 텍스트, Blob 등을 Response 객체로 처리.
에러 처리	수동으로 상태 코드 확인 및 에러 처리.	try-catch 또는 catch로 간편한 에러 처리.
브라우저 호환성	오래된 브라우저에서도 지원.	최신 브라우저에서만 지원.

---

참고

1. MDN: XMLHttpRequest
2. MDN: HTTP 상태 코드
3. AJAX와 XMLHttpRequest 기초