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

232_자바스크립트에서 XMLHttpRequest로 작업상황 확인하기 [적용] 외부 파일의 불러오기 진행 상황을 확인하고 싶을 때 진행 상태바를 표시하고 싶을 때 [문법] 속성 의미 타입 event.loaded 현재 로딩 진행상태 숫자 event.total 전체 데이터 크기 숫자 [내용] XMLHttpRequest 객체 인스턴스의 불러오기 진행 상황은 progress 이벤트로 감시하고, 이벤트 핸들러에서 total 속성(전체 데이터 크기)과 loaded 속성(현재 불러오기 진행 상황)을 사용해 확인할 수 있다. loaded와 total을 조합하면 진행 상황을 % 단위로 계산할 수도 있다. HTML index.html CSS style.css .progress { position: relative; wid..

2022.08.02

[JavaScript] 자바스크립트에서 XMLHttpRequest로 데이터 읽어오기

231_자바스크립트에서 XMLHttpRequest로 데이터 읽어오기 [적용] 구 버전의 브라우저에서 데이터를 전송하고 싶을 때 [문법] 메소드 의미 반환 new XMLHttpRequest() 인스턴스 생성 XMLHttpRequest open(메소드, url) 리퀘스트 초기화 없음 send() 리퀘스트 전송 없음 [내용] 자바스크립트에서 fetch()보다 오래된 기능인 XMLHttpRequest()를 사용하면 처리가 복잡하지만 저레벨 방식의 제어가 가능하고 구 버전의 브라우저에서도 사용할 수 있다. XMLHttpRequest 객체의 불러오기 완료 확인은 load 이벤트를 사용하며, 이벤트 핸들러에서 responseText 속성을 사용해 불러온 문자열 데이터를 참조할 수 있다. JavaScript (부분) ..

2022.08.02