Javascript - XMLHttpRequest 사용하기

 웹 페이지에서 데이터를 보여주기 위해서는 서버와 통신을 해야 합니다. 통신을 하는 일련의 과정으로는 서버에 데이터를 달라고 요청을 보내고 결과를 받아와야 하는데요. 이때 서버와 주고받는 데이터를 쉽게 다룰 수 있는 방법이 XMLHttpRequest를 사용하는 방법입니다. 웹 개발 방법 중 하나인 AJAX(Asynchronous Javascript And Xml)를 이야기할 때 사용하는 통신 객체이기도 합니다.

문법

const xhr = new XMLHttpRequest();
const method = "GET";
const url = "https://7942yongdae.tistory.com/";

// 요청을 초기화 합니다.
xhr.open(method, url);

// onreadystatechange 이벤트를 이용해 요청에 대한 응답 결과를 처리합니다.
xhr.onreadystatechange = function (event) {
    const { target } = event;

    if (target.readyState === XMLHttpRequest.DONE) {
        const { status } = target;

        if (status === 0 || (status >= 200 && status < 400)) {
            // 요청이 정상적으로 처리 된 경우
        } else {
            // 에러가 발생한 경우
        }
    }
};

// 서버에 요청을 보냅니다.
xhr.send();

 

 XMLHttpRequest를 사용하는 방법은 다음과 같습니다.

 

1. open() 함수를 통해 요청을 초기화한다.
2. onreadystatechange(이벤트 핸들러)에 함수를 설정한다.
3. send() 함수를 통해 요청을 보낸다.

 

1. open() 함수를 통해 요청을 초기화한다.

 open() 함수를 통해 XMLHttpRequest 객체를 초기화할 수 있습니다. 초기화를 할 때 사용하는 구문은 아래와 같이 정의됩니다.

XMLHttpRequest.open(method, url[, async[, user[, password]]])

 method: "GET", "POST", "PUT", "DELETE" 등 요청의 HTTP request methods 값을 설정한다.

 url: 요청을 처리할 주소 값을 설정한다.

 async: 비동기 여부를 설정하며, 기본값은 true로 설정된다.

 user: 인증이 필요한 경우 설정하는 username이며 기본값은 null로 설정된다.

 password: 인증이 필요한 경우 설정하는 password이며 기본값은 null로 설정된다.

2. onreadystatechange(이벤트 핸들러)에 함수를 설정한다.

 XMLHttpRequest의 readyState 값이 변경되면 호출되는 이벤트입니다. readyState 값의 변경에 따라, 요청의 처리 결과를 확인할 수 있습니다. readyState의 값은 다음과 같은 상태를 정의합니다.

 

0: UNSET - 요청이 생성된 상태로 아직 서버에 요청을 보내지 않았습니다.

1: OPENED - open() 함수가 호출된 상태로, 요청이 초기화되었습니다.

2: HEADERS_RECEIVED - send() 함수 호출 후, 서버에 요청한 결과의 Header를 수신한 상태입니다.

3: LOADING - send() 함수 호출 후, 서버에 요청한 결과를 받아오는 중입니다.

4: DONE - 서버에 요청한 결과를 받은 상태이며, 결과는 성공이거나 실패했음을 알 수 있습니다.

const xhr = new XMLHttpRequest();

console.log('UNSENT', xhr.readyState);
// readyState: 0

xhr.open('GET', '/api', true);
console.log('OPENED', xhr.readyState);
// readyState: 1

xhr.onprogress = function () {
    console.log('LOADING', xhr.readyState);
    // readyState: 3
};

xhr.onload = function () {
    console.log('DONE', xhr.readyState);
    // readyState: 4
};

xhr.send(null);

 addEventListener를 통해서도 이벤트를 사용이 가능합니다.

xhr.addEventListener('readystatechange', event => {
  // 처리 내용 정의
});

 

 

3. send() 함수를 통해 요청을 보낸다.

 send() 함수를 통해 요청을 서버로 전달합니다. send() 함수는 XMLHttpRequest 요청이 비동기인 경우 요청을 보내고 바로 반환되지만, 요청이 동기인 경우에는 서버로부터 응답이 반환될 때까지 대기합니다.

XMLHttpRequest.send(body)

 send() 함수는 body를 정의할 수 있는 옵션을 허용합니다. 요청을 할 때 "POST", "PUT"과 같이 body가 필요한 경우 선택적으로 사용하는 값입니다. method가 "GET", "HEAD"인 경우 body는 필요가 없기 때문에 무시되며, null로 설정됩니다.

XMLHttpRequest 예제 코드

JSON으로 데이터 보내기

const xhr = new XMLHttpRequest();
const method = "POST";
const url = "https://xmlHttpReqeust.com/";

const data = {
    name: 'YD',
    url: 'https://7942yongdae.tistory.com',
};

// 요청을 초기화 합니다.
xhr.open(method, url);

// 보내는 본문의 Content-Type을 JSON으로 설정합니다.
xhr.setRequestHeader('Content-Type', 'application/json');

xhr.addEventListener('readystatechange', function (event) {
    const { target } = event;

    if (target.readyState === XMLHttpRequest.DONE) {
        const { status } = target;

        if (status === 0 || (status >= 200 && status < 400)) {
            // 요청이 정상적으로 처리 된 경우
        } else {
            // 에러가 발생한 경우
        }
    }
});

// 서버에 요청을 보냅니다.
xhr.send(JSON.stringify(data));

 JSON으로 요청을 보내려면 2가지의 작업을 더 해야 합니다. setRequestHeader() 함수로 본문이 JSON이라고 설정하고, send() 함수로 서버에 보내는 데이터를 JSON 문자열로 바꿔야 합니다.

FormData로 데이터 보내기

const xhr = new XMLHttpRequest();
const method = "POST";
const url = "https://xmlHttpReqeust.com/";

const formData = new FormData();
formData.append('name', 'YD');
formData.append('url', 'https://7942yongdae.tistory.com');

// 요청을 초기화 합니다.
xhr.open(method, url);

// 보내는 본문의 Content-Type을 multipart/form-data로 설정합니다.
// FormData를 사용하는 경우 Content-Type은 multipart/form-data로 자동 설정됩니다.
xhr.setRequestHeader('Content-Type', 'multipart/form-data');

xhr.addEventListener('readystatechange', function (event) {
    const { target } = event;

    if (target.readyState === XMLHttpRequest.DONE) {
        const { status } = target;

        if (status === 0 || (status >= 200 && status < 400)) {
            // 요청이 정상적으로 처리 된 경우
        } else {
            // 에러가 발생한 경우
        }
    }
});

// 서버에 요청을 보냅니다.
xhr.send(formData);

 FormData으로 요청을 보내는 방법은 일반적으로 XMLHttpRequest를 사용하는 방법과 다르지 않습니다. 또한 JSON을 보낼 때처럼 Content-Type을 별도로 설정하지 않아도 됩니다. FormData를 사용하면 Content-Type은 자동으로 multipart/form-data로 변경됩니다.

정리하기

 일반적으로 XMLHttpRequest를 직접적으로 사용하는 경우는 별로 없습니다. 환경에 따라 변수가 있어 사용하기가 어렵기 때문입니다. 그래서 통상적으로는 axios 혹은 jQuery ajax와 같은 HttpRequest 라이브러리를 사용합니다.

 

 또한 XMLHttpRequest를 사용하는 것도 좋지만 발전된 형태의 Fetch API를 사용하는 것을 권장드립니다. IE를 제외한 모던 브라우저에서 사용 가능한 API로 XMLHttpRequest보다 강력하고 유연한 기능을 제공합니다.