Ajax 비동기 통신 설정

사용하기

동기 통신과 세팅에서 다른 점은 .open()에 true 값을 전달 한다.

var xhr = new XMLHttpRequest;
xhr.open('GET', 'ajax/data.txt', true);
xhr.send();

// 서버에서 응답이 올 경우, 이벤트를 감지하여 처리하는 이벤트 핸들링  
xhr.onreadystatechang = function() {
  if((xhr.status === 200 || xhr.status === 304) && xhr.readyState === 4) {
    console.log(xhr, xhr.responseText);
  } else {
    console.warn('통신 실패')
  }
}

• .onreadystatechang : 서버에서 응답이 올 경우 실행한다.

이벤트 & 통신상태 확인

• 0 : Uninitialized (초기화 되지 않음)

• 1 : Loading

• 2 : Loaded

• 3 : Interactive

• 4 : Complete (완료)