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

XMLHttpRequest로 데이터 읽어 오기

• 구 버전의 브라우저에서 데이터를 전송하고 싶을 때

구문

new XMLHttpRequest()
open('메소드', 'url)
req.send()

설명

자바스크립트에서 fetch()보다 오래된 기능인 XMLHttpRequest()를 사용하면 처리가 복잡하지만 저레벨 방식의 제어가 가능하고 구 버전의 브라우저에서도 사용할 수 있습니다. XMLHttpRequest() 객체의 불러오기 완료 확인 load 이벤트를 사용하며, 이벤트 핸들러에서 responseText 속성을 사용해 불러온 문자열 데이터를 참조할 수 있습니다.

실습

const btn = document.querySelector('button'); // 버튼 요소 가져오기
btn.addEventListener('click', () => {
  const req = new XMLHttpRequest();
  req.addEventListener('load', (event) => {
    const text = event.target.responseText;
    document.querySelector('#log').innerHTML = text;
  });
  req.open('GET', 'sample.txt');
  req.send();
});