[책] 자바스크립트 코드 레시피 278 - 210일차

XMLHttpRequest로 작업 상황 확인하기

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

구문

event.loaded 현재 로딩 진행 상태
event.total 전체 데이터 크기

설명

XMLHttpRequest 객체 인스턴스의 불러오기 진행 상황은 progress 이벤트로 감시하고, 이벤트 핸들러에서 total 속성(전체 데이터 크기)과 loaded 속성(현재 불러오기 진행 상황)을 사용해 확인할 수 있습니다. loaded와 total을 조합하면 진행 상황을 % 단위로 계산할 수 있습니다.

실습

index.html

<div>
  <button>불러오기</button>
  <div class="progress">
    <div class="progress-bar"></div>
  </div>
  <pre id="log"></pre>
</div>

---

style.css

@charset "utf-8";

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

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

#log {
  height: 350px;
}

---

script.js

const btn = document.querySelector('button'); // 버튼 요소 가져오기
btn.addEventListener('click', () => { // 버튼 클릭 시
const req = new XMLHttpRequest(); // XHR 생성
req.responseType = 'blob'; // 데이터 종류 설정

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

// 불러오기 완료 후 이벤트
req.addEventListener('load', (event) => {
  const data = event.target.response; // 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(); // 가져오기 시작
});