[JavaScript]XMLHttpRequest 사용 방법

XMLHttpRequest란?

JavaScript에서 XMLHttpRequest 객체를 사용하여 서버에 동기 또는 비동기식 요청을 보낼 수 있으며, 요청에 대한 응답 정보를 웹 페이지에 로드할 수 있습니다.

 

따라서, 웹 페이지를 다시 로드하지 않아도 웹 페이지의 일부를 변경할 수 있습니다.

XMLHttpRequest() 객체 사용 방법을 요약하면 다음과 같습니다.

- XMLHttpRequest 객체를 생성합니다.

- open() 메서드로 요청에 필요한 정보를 설정합니다.

- send() 메서드로 서버에 요청을 보냅니다.

- 응답에 대한 콜백 함수를 생성합니다.

 

이번 포스팅은 XMLHttpRequest 객체 사용 방법을 설명합니다.

---

XMLHttpRequest 객체 생성

new 키워드를 사용하여 XMLHttpRequest 객체를 생성합니다.

const xhr = new XMLHttpRequest();

 

open() 메서드로 요청에 필요한 정보를 설정합니다.

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

method(필수)

- HTTP 요청 메서드입니다.("GET", "POST", "PUT", "DELETE" 등)

 

url(필수)

- 요청을 보낼 URL 문자열 또는 URL 객체입니다.

 

async(선택)

- true인 경우 비동기식으로 동작하며, false인 경우 동기식으로 동작합니다.

- false인 경우 send() 메서드로 요청을 보냈을 때, 응답을 받을 때까지 반환 결과가 없습니다.

- 기본 값은 true입니다.

 

user & password(선택)

- 기본 HTTP 인증을 위한 로그인 및 비밀번호입니다.

- 기본 값은 null입니다.

---

헤더 추가

setRequestHeader() 메서드를 사용하여 Reqeust Header에 데이터를 설정할 수 있습니다.

xhr.setRequestHeader(header, value);

header(필수)

- 헤더의 이름입니다.

 

value(필수)

- 헤더의 이름과 매핑되는 값입니다.

 

다음과 예시처럼 open() 메서드 이후 호출할 수 있습니다.

const xhr = new XMLHttpRequest();
xhr.open('get', 'https://jsonplaceholder.typicode.com/todos/1');
xhr.setRequestHeader('Custom-Header1', 'Hello');
xhr.setRequestHeader('Custom-Header2', 'Test');

 

만약, open() 메서드를 호출하기 전에 setRequestHeader() 메서드를 호출하면, DOMException 예외가 발생합니다.

const xhr = new XMLHttpRequest();

// open() 메서드 호출 이전에 setRequestHeader() 메서드 호출
xhr.setRequestHeader('Custom-Header1', 'Hello');
xhr.setRequestHeader('Custom-Header2', 'Test');

[에러 내용]

---

요청 보내는 방법 - GET

send() 메서드를 사용하여 서버에 요청을 보낼 수 있습니다.

const xhr = new XMLHttpRequest();
xhr.open("GET", "https://jsonplaceholder.typicode.com/todos/1");
xhr.setRequestHeader("content-type", "application.json");
xhr.send();

xhr.onload = () => {
  if (xhr.status === 200) {
    console.log(xhr.response);
  } else {
    console.error(xhr.status, xhr.statusText);
  }
};

서버로 요청이 전송되면, 세 가지 이벤트를 사용하여 요청을 추적할 수 있습니다.

---

load

요청에 대해 성공적으로 응답을 받은 경우입니다.

const xhr = new XMLHttpRequest(); // XMLHttpRequest 객체 생성
xhr.open("GET", "https://jsonplaceholder.typicode.com/todos/1");
xhr.setRequestHeader("content-type", "application.json");
xhr.send();

// load 이벤트의 이벤트 리스너는 onload입니다.
xhr.onload = () => {
  console.log(xhr.status);     // HTTP 상태코드
  console.log(xhr.statusText); // HTTP 상태 메시지
  console.log(xhr.response);   // 요청에 대한 응답
};

status

- HTTP 상태 코드입니다.

 

statusText

- HTTP 상태 메시지입니다.

 

response

- 요청에 대한 응답입니다.

---

error

네트워크 장애 또는 CORS로 요청을 할 수 없는 경우입니다.

// error 이벤트의 이벤트 리스너는 onerror입니다.
xhr.onerror = () => {
  console.log('error');
};

---

progress

응답에 대한 진행 상황을 주기적으로 트리거합니다. progress 이벤트를 사용하여 서버에서 응답받은 데이터의 양을 확인할 수 있습니다.

// progress 이벤트의 이벤트 리스너는 onprogress입니다.
xhr.onprogress = (e) => {
  console.log(e.lengthComputable); // 진행상황 측적 가능 여부
  console.log(e.loaded); // 수행한 작업의 양
  console.log(e.total);  // 수행 중인 작업의 총량
};

---

응답 데이터 타입 설정

응답 데이터의 타입은 기본적으로 문자열입니다. 응답 데이터의 타입을 변경하고 싶은 경우 XMLHttpRequest() 객체의 responseType 프로퍼티의 값을 변경합니다.

 

다음 예제는 응답 데이터의 타입을 json으로 설정합니다.

const xhr = new XMLHttpRequest(); // XMLHttpRequest 객체 생성
xhr.open("GET", "https://jsonplaceholder.typicode.com/todos/1"); // HTTP Method, URL 정의
xhr.setRequestHeader("content-type", "application.json"); // 헤더 값 중 content-type 정의
xhr.send(); // 요청 전송

// load 이벤트의 이벤트 리스너는 onload입니다.
xhr.onload = () => {
  console.log(xhr.response); // 요청에 대한 응답
};
xhr.responseType = "json"; // 응답 데이터 타입 설정

다음은 responseType에 설정할 수 있는 값입니다.

 

"" 또는 "text"

- 빈 문자열 또는 "text"는 응답 데이터 타입을 문자열로 설정합니다.

 

"arraybuffer"

- 이진 데이터를 포함하는 ArrayBuffer 객체입니다.

 

"blob"

- 이진 데이터를 포함하는 Blob 객체입니다.

 

"json"

- 응답 데이터를 JSON으로 파싱 합니다.

 

"document"

- 응답 데이터를 HTML 문서 또는 XML 문서로 가져옵니다.

---

요청 보내는 방법 - POST

POST 방식으로 데이터를 요청하는 경우 send() 메서드에 요청 데이터를 파라미터로 전달합니다.

 

예를 들어, POST 방식으로 json 데이터를 요청하는 경우 다음과 같이 코드를 구현할 수 있습니다.

const data = JSON.stringify({
  title: 'foo',
  body: 'bar',
  userId: 1
});

const xhr = new XMLHttpRequest();

xhr.onload = () => {
  if (xhr.status === 201) {
    const post = JSON.parse(xhr.responseText);
    console.log(post);
  } 
};

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

[실행 결과]

{title: "foo", body: "bar", userId: 1, id: 101}

 

만약, 업로드 진행 상황을 추적해야 하는 경우 XHLHttpRequest의 upload 프로퍼티에서 사용 가능한 다음 이벤트를 사용합니다.

const data = JSON.stringify({
  title: 'foo',
  body: 'bar',
  userId: 1
});
const xhr = new XMLHttpRequest();

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

xhr.upload.onloadstart = () => {
  console.log('onloadstart');
}

xhr.upload.onprogress = () => {
  console.log('onload');
}

xhr.upload.onabort = () => {
  console.log('onabort');
}

xhr.upload.onerror = () => {
  console.log('onerror');
}

xhr.upload.onload = () => {
  console.log('onload');
}

xhr.upload.ontimeout = () => {
  console.log('ontimeout');
}

xhr.upload.onloadend = () => {
  console.log('onloadend');
}

xhr.send(data);

loadstart

- 업로드가 시작되었습니다.

 

progress

- 업로드에 대한 진행 상황을 주기적으로 전달합니다.

 

abort

- 업로드 작업이 중단되었습니다.

 

error

- 에러로 인해 업로드 실패하였습니다.

 

load

- 업로드가 성공적으로 완료되었습니다.

 

timeout

- 지정한 시간 내에 응답이 도착하지 않아 업로드 시간이 초과되었습니다.

 

loadend

- 업로드가 완료되었습니다.

- 성공과 실패를 구분하지 않습니다.