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

231_자바스크립트에서 XMLHttpRequest로 데이터 읽어오기

[적용]

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

---

[문법]

메소드	의미	반환
new XMLHttpRequest()	인스턴스 생성	XMLHttpRequest
open(메소드, url)	리퀘스트 초기화	없음
send()	리퀘스트 전송	없음

---

[내용]

자바스크립트에서 fetch()보다 오래된 기능인 XMLHttpRequest()를 사용하면 처리가 복잡하지만

저레벨 방식의 제어가 가능하고 구 버전의 브라우저에서도 사용할 수 있다.

 

XMLHttpRequest 객체의 불러오기 완료 확인은 load 이벤트를 사용하며,

이벤트 핸들러에서 responseText 속성을 사용해 불러온 문자열 데이터를 참조할 수 있다.

 

JavaScript (부분)                                                                                                                                               main.js

// XHR 생성
const req = new XMLHttpRequest();
// 불러오기 완료 후 이벤트
req.addEventListener('load', (event) => {
  // response 가져오기
  const text = event.target.responseText;
  
  // 텍스트 출력
  document.querySelector('#log').innerHTML = text;
});
// 파일 지정
req.open('GET', './sample.txt');
// 가져오기 시작
req.send();

 

 

 

---

 

 

 

 

 

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