XMLHttpRequest는 도대체 XML과 무슨 관련이 있을까?

DH.J·2024년 10월 28일

XML XMLHTTPRequest ajax

Javascript

목록 보기

4/8

What you will learn today

XMLHttpRequest의 개념과 예시 코드
XMLHttpRequest 객체 프로퍼티와 메서드
XML과 json의 활용도 비교
XML이 잘 사용되지 않는 이유

What is XMLHttpRequest?

const xhr = new XMLHttpRequest();

XMLHttpRequest객체는 javascript object이며, HTTP 혹은 HTTPS 요청을 서버에게 보냄으로써, 웹 페이지가 리로딩 없이 업데이트될 수 있게 합니다.

한 마디로, 서버와 상호작용하기 위해 사용하는 Web API인 셈입니다.

이는 브라우저에서 제공하는 Web API이므로 반드시 브라우저 환경에서 실행해야 합니다.

그리고 AJAX 또한 XMLHttpRequest 객체를 기반으로 동작합니다.

Ajax (Asynchronous Javascript and XML)
자바스크립트를 사용하여 브라우저가 서버에게 비동기적으로 데이터를 요청하고 서버가 응답한 데이터를 수신하여 웹 페이지를 동적으로 만드는 프로그래밍 방식

여기서 중요한 것은 ’페이지를 리프레시 하지 않고’ 데이터를 가져올 수 있다는 것입니다.
UX를 해치지 않고(화면 전체가 깜빡이는 등) 브라우저에서 웹 페이지를 동적으로 반응성 있게 업데이트할 수 있게 만드는 것입니다.

.
.

🧐 그런데 아까부터 자꾸 등장하는 XML이라는 친구는 과연 무엇일지 의문이 들어서 한 번 찾아보았습니다.

XML(Extensible Markup Language)
XML은 데이터를 정의하는 규칙을 제공하는 마크업 언어입니다.
이러한 규칙 덕분에 response를 받은 수신자가 데이터를 효율적으로 읽을 수 있습니다.
그러므로 모든 네트워크에서 데이터를 XML 파일로 손쉽게 전송할 수 있습니다.

아하! XML은 데이터를 구조화하는 형식일 뿐, 그 이외에 네트워크를 통해 전송하려면 XMLHttpRequest 와 같은 객체가 필요하구나!
.
.

자, 그럼 XML이 본격적으로 어떻게 생긴 놈인지 json과 비교하여 살펴봅시다.

<?xml version="1.0" encoding="UTF-8"?>
<library>
    <book>
        <title>Clean Code</title>
        <author>Robert C. Martin</author>
        <year>2008</year>
        <publisher>Prentice Hall</publisher>
    </book>
</library>

// json
{
    "book": {
        "title": "Clean Code",
        "author": "Robert C. Martin"
    }
}

웹 페이지를 만들 때 사용되는 HTML과 상당히 닮아 있는 XML은 트리 패턴으로 데이터를 나타냅니다.

이 덕분에 복잡한 데이터 구조를 정의하고 표현할 수 있다는 점이 매력적이군요!
.
.

“그런데… 왜 웹 개발에선 아무도 안쓰지?“ 라는 의문이 드셨다면 당신은 정상입니다. 🤖

웹 개발자들은 왜 XML을 사용하여 데이터를 구조화하지 않고 왜 JSON을 사용하는걸까요?
.
.

그 이유는 바로… 가볍기 때문? 이라고 생각이 드셨다면 정답!
json은 빠르게 읽고 쓸 수 있으며, javascript와 매우 스무~~~스한 궁합을 자랑합니다.

반면 XML은 opening & closing tag를 사용해야 할 뿐더러, 읽고 쓰기 매우 번거롭습니다.

사실 가장 큰 이유는 바로 호환성의 문제입니다.

javascript 내에서 파싱하기 위해선 DOMparser 같은 추가적인 도구가 필요하기 때문에, javscript 내에서 XML을 조작하는 것은 매우 복잡하고, 시간이 많이 요구되는 일입니다.

반면 json은 javascript 표준 함수(JSON.parsed() method)에 의해서 pasing 되기에 편리하죠.
.
.

🧐 그런데 왜 이름이 ‘XML‘HTTPRequest인지 이해가 되지 않는다구요?
저도 궁금해서 GPT에게 물어보았습니다.

과거에는 XML이 주로 사용되었기 때문에 그렇다네요
그럼 이제부터 JSONHTTPRequest로 바꿔 부르도록 하겠습니다
(ㅋㅋ)

이제 본격적으로 XMLHTTPRequest로 넘어가 봅시다

Example code

javascript를 사용하여 HTTP 요청을 전송하려면 XMLHttpRequest 객체를 사용합니다.

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

// HTTP request initialization
xhr.open('GET', '/users');

// HTTP request header
xhr.setRequestHeader('content-type', 'application/json');

// HTTP request transfer
xhr.send();

EX) method

open : HTTP의 요청을 초기화합니다
send : HTTP 요청을 전송합니다
setRequestHeader : 특정 HTTP 요청의 헤더 값을 설정합니다

Ex) Prototype property

readyState : HTTP 요청의 상태를 나타냅니다 (0~4)
status : HTTP 응답의 상태를 나타냅니다 (200)
statusText : HTTP 응답 메시지를 나타냅니다 (“OK”)
responseType : HTTP 응답 type을 나타냅니다 (document, json, text)

HTTP response handling

서버가 전송한 응답을 처리하려면?

XMLHttpRequest 객체가 발생시키는 이벤트를 캐치해야 합니다

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

// HTTP request 초기화
xhr.open('GET', 'https://jsonplaceholder.typicode.com/todos/1');

// HTTP request 전송
xhr.send();

// onreadystatechange: HTTP request status 나타내는 readyState 변경할 때 나타냄
xhr.onreadystatechange = () => {
	// readyState DONE: 4
    if (xhr.readyState !== XMLHttpRequest.DONE) return;
    // 200: 정상 응답 상태
    if (xhr.status === 200) {
        console.log(JSON.parse(xhr.response)); // response
    } else {
        console.error('Error', xhr.status, xhr.statusText);
    }
}