[JavaScript] XMLHttpRequest

XMLHttpRequest 객체

const xhr = new XMLHttpRequest(); 

const method = "GET"; 
const url = "<https://dog.ceo/api/breed/affenpinscher/images/random>";

xhr.open(method, url);
/*
open() 함수를 통해 요청을 초기화한다.
onreadystatechange 이벤트를 이용해 요청에 대한 응답 결과를 처리합니다. 
onreadystatechange 프로퍼티는 
XMLHttpRequest 객체의 readyState 프로퍼티 값이 변할 때마다
자동으로 호출되는 함수를 설정합니다.
*/
xhr.onreadystatechange = function (event) { 
/*
onreadystatechange 프로퍼티(속성)에 콜백함수 설정
응답이 와서 상태값이 변하면 호출된다.
*/
const { target } = event; //이벤트 객체
	if (target.readyState === XMLHttpRequest.DONE) { 	//응답완료
	const { status } = target; 
	if (status === 0 || (status >= 200 && status < 400)) {         
          console.log(status)
          console.log(xhr.response);
          const movieObj = JSON.parse(xhr.response)        
          console.log(movieObj)
          const movieList = movieObj.data.movies
          console.log(movieList)
/*
요청이 정상적으로 처리된 경우 status
status 프로퍼티는 서버의 문서 상태를 나타낸다.
-200 : 서버에 문서가 존재함.
-404 : 서버에 문서가 존재하지 않음.

응답은 글자형태로 출력되기 때문에 후에 JSON파싱 작업이 필요하다.
*/

        } else { 
         // 에러가 발생한 경우
        } 
      } 
    }; 
xhr.send();
//서버에 요청을 보냅니다.

서버에 요청을 보내고 서버에 응답하여 상태가 변경되면 콜백함수가 실행되어 콘솔에 결과가 출력된다.