XHR 로 text 내용 가져오기

jb kim·2021년 8월 25일

Ajax Fetch API

목록 보기

3/8

index.html

<!DOCTYPE html>
<html lang="ko">

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.css" />
  <title>Ajax Simple Text</title>
</head>

<body>
  <div class="container">
    <button id="button">Get Data</button>
    <br><br>
    <div id="output"></div>
  </div>

  <script src="app.js"></script>
</body>

</html>

data.txt

그냥 간단한 문자열

app.js 직접 입력!

HTTP 응답상태 코드

200: "OK"
403: "허가금지"
404: "Not Found"

XHR readyState

0 (uninitialized) - (request가 초기화되지 않음)
1 (loading) - (서버와의 연결이 성사됨)
2 (loaded) - (서버가 request를 받음)
3 (interactive) - (request(요청)을 처리하는 중)
4 (complete) - (request에 대한 처리가 끝났으며 응답할 준비가 완료됨)

  /*
    XHR readyState 값 변화
    0: request가 초기화되지 않음
    1: 서버와의 연결이 성사됨
    2: 서버가 request를 받음
    3: request(요청)을 처리하는 중
    4: request에 대한 처리가 끝났으며 응답할 준비가 완료됨

    HTTP 응답상태
    200: "OK"
    403: "허가금지"
    404: "Not Found"
  */
  
//버튼을 클릭했을때(이벤트) => 함수 loadData 실행!
document.getElementById('button').addEventListener('click', loadData);

function loadData() {
  // XHR 객체 생성
  const xhr = new XMLHttpRequest();

  // 열기 메소드
  xhr.open('GET', 'data.txt', true);

  //console.log('READYSTATE', xhr.readyState);

  // 예전 문법 ( 아래의 onload를 사용한다.)
  // xhr.onreadystatechange = function() {
  //   console.log('READYSTATE', xhr.readyState);
  //   if(this.status === 200 && this.readyState === 4){
  //     console.log(this.responseText);
  //   }
  // }

  xhr.onload = function () {
    //console.log('READYSTATE', xhr.readyState);
    if (this.status === 200) {
      console.log(this.responseText);
      //document.getElementById('output').innerHTML = `<h1>${this.responseText}</h1>`;
    }
  }

  xhr.onerror = function () {
    console.log('Request error...');
  }

  xhr.send();

}

콘솔로그로 readyState 체크, onreadychange 사용시

onload만 사용시

화면에 출력

  xhr.onload = function () {
    if (this.status === 200) {
      //console.log(this.responseText);
      document.getElementById('output').innerHTML = `<h1>${this.responseText}</h1>`;
    }
  }

Ajax 요청 및 응답 처리 과정

XMLHttpRequest 객체, open()메서드, send()메서드, onload()메서드

1) XMLHttpRequest 객체

var xhr = new XMLHttpRequest();
XMLHttpRequest 객체를 생성(객체 인스턴스)하고 변수에 저장한다.

2) open() 메서드

xhr.open('GET', 'data/test.json', true);
세 개의 매개변수(HTTP 메서드/요청 처리할 페이지의 URL/요청이 비동기로 처리될 것인지 지정하는 불리언 값)를 정의한다.

3) send() 메서드

xhr.send();
준비된 요청을 추가 정보와 함께 전달한다.

4) onload() 메서드 - 응답

xhr.onload = function() {
if(xhr.status == 200) {
// 서버 실행 결과 처리 내용
}
}
브라우저가 서버로부터 응답을 받을 때 발생하는 이벤트. 이벤트가 발생하면 함수가 호출된다. 익명 함수는 xhr 객체의 status 속성 값을 검사해 서버의 응답이 정상인지 확인한다.