[JavaScript] 자바스크립트에서 XMLHttpRequest로 작업상황 확인하기

232_자바스크립트에서 XMLHttpRequest로 작업상황 확인하기

[적용]

• 외부 파일의 불러오기 진행 상황을 확인하고 싶을 때
• 진행 상태바를 표시하고 싶을 때

---

[문법]

속성	의미	타입
event.loaded	현재 로딩 진행상태	숫자
event.total	전체 데이터 크기	숫자

---

[내용]

XMLHttpRequest 객체 인스턴스의 불러오기 진행 상황은 progress 이벤트로 감시하고,

이벤트 핸들러에서 total 속성(전체 데이터 크기)과 loaded 속성(현재 불러오기 진행 상황)을 사용해 확인할 수 있다.

loaded와 total을 조합하면 진행 상황을 % 단위로 계산할 수도 있다.

 

HTML                                                                                                                                                              index.html

<div class="progress">
  <div class="progress-bar"></div>
</div>

CSS                                                                                                                                                                      style.css

.progress {
  position: relative;
  width: 600px;
  height: 20px;
  border-radius: 10px;
  background: gray;
  overflow: hidden;
  display: block;
  margin: 20px auto;
}

.progress-bar {
  position: absolute;
  background: orangered;
  content: '';
  height: 20px;
  display: block;
}

JavaScript (부분)                                                                                                                                               main.js

// XHR 생성
const req = new XMLHttpRequest();
// 데이터 종류 설정
req.responseType = 'blob';

req.addEventListener('progress', (event) => {
  // 진행 상황 계산(0~1)
  const rate = event.loaded / event.total;
  
  // 진행 바 폭 변경
  const element = document.querySelector('.progress-bar');
  element.style.width = `${rate * 100}%`;
});

// 불러오기 완료 후 이벤트
req.addEventListener('load', (event) => {
  // response 가져오기
  const data = event.target.response;
  // 이미지 데이터 변환
  const source = URL.createObjectURL(data);
  
  // 이미지 생성
  const image = new Image();
  image.src = source;
  // 텍스트 출력
  document.querySelector('#log').appendChild(image);
});
// 파일 지정
req.open('GET', './sample.jpg');
// 가져오기 시작
req.send();

 

 

---

 

 

 

 

 

참조 :
실무에 바로 적용하는 자바스크립트 코드레시피 278
아케다 야스노부, 카노 타케시 지음 / 이춘혁 옮김