네트워크 요청 1 - XMLHTTPRequest

1) 서버와 클라이언트 동작 방식

• 서버와 클라이언
  
  • 클라이언트는 요청을하고 서버는 응답을 한다.
  • 서버와 클라이언트는 REST API를 통해 소통한다.
  • 클라이언트는 REST API를 호출하고 서버는 응답을 보내준다.

2)XMLHTTPRequest

XMLHttpRequest 객체는 서버와 통신하기 위해 사용하는 객체이다.

달리 말하면 브라우저는 XMLHttpRequest를 이용해서 Ajax 요청을 생성하고 전송한다.

이때, 서버가 브라우저의 요청에 대한 어떤 응답을 돌려주면 같은 XMLHttpRequest 객체가 그 결과를 처리한다.

XML뿐만 아니라 JSON, text 등 모든 종류의 데이터를 받아오는데 사용할 수 있다.

HTTP 이외의 프로토콜도 지원한다.(file,ftp)

• XMLHTTPRequest 객체 생성하기

let xhr = new XMLHttpRequest();

• 요청 만들기

xhr.open('GET', 'http://localhost:포트번호/엔드포인트');

• 요청 보내기

xhr.send();

• 응답 받기

// 두가지 방법으로 응답을 받을 수 다. 
// 하나는 onreadystatechange를 쓰는 방법,
// 다른 하나는 onload를 쓰는 방법이다.

// 1. 
// XMLHttpRequest.readyState 프로퍼티가 변경(이벤트 발생)될 때마다 
// 콜백함수(이벤트 핸들러)를 호출한다.
xhr.onreadystatechange = function (e) {
  // 이 함수는 Response가 클라이언트에 도달하면 호출된다.

  // readyStates는 XMLHttpRequest의 상태(state)를 반환한다.
  // readyState :::
  // UNSENT = 0; // XMLHttpRequest.open() 메소드 호출 이전
	// OPENED = 1; // XMLHttpRequest.open() 메소드 호출 완료
	// HEADERS_RECEIVED = 2; // XMLHttpRequest.send() 메소드 호출 완료
	// LOADING = 3; // 응답 기다리는 중(서버 응답 중(XMLHttpRequest.responseText 미완성 상태))
  // DONE = 4; // 서버 응답 완료
  if (xhr.readyState !== XMLHttpRequest.DONE) return;

  // status는 response 상태 코드를 반환 : 200 => 정상 응답
  if(xhr.status === 200) {
    console.log(xhr.responseText);
  } else {
    console.log('Error!');
  }
};

//2. 
// load 이벤트는 서버 응답이 완료된 경우에 발생
xhr.onload = function (e) {
  // status는 response 상태 코드를 반환 : 200 => 정상 응답
  if(xhr.status === 200) {
    console.log(xhr.responseText);
  } else {
    console.log('Error!');
  }
};