XMLHttpRequest

XMLHttpRequest: 서버와 상호작용하기 위한 객체로 웹페이지가 전부 로딩된 후에도 서버에 데이터를 요청하거나 서버로부터 데이터를                                  전송받을 수 있다.

 

사용방법

1. XMLHttpRequest객체 생성

    const XHR = new XMLHttpRequest();    

2. open() 메서드로 요청에 필요한 정보 설정

    XHR.open(method, url, [async, user, password]);    

method - HTTP 요청 메서드

url - 요청을 보낼 URL

async - true인 경우 비동기식으로 동작

           - false인 경우 동기식으로 동작하며 send메서드로 요청을 보냈을 때 응답을 받을 때까지 반환 결과 없음

user & password - 기본 HTTP 인증을 위한 로그인 및 비밀번호

3. send() 메서드로 서버에 요청 보냄

    XHR.send(보낼 데이터);    

4. 응답에 대한 콜백 함수 실행 (load 이벤트리스너: onload)

    XHR.onload = function(){}    

 

 

XMLHttpRequest의 readyState

0: UNSET(미전송) - XMLHttpRequest가 생성된 상태로 아직 서버에 요청을 보내지 않은 상태

1: OPENED(열림) - open() 메서드가 호출된 상태로, 객체가 초기화 된 상태

2: HEADERS_RECEIVED(헤더 응답) - send() 메서드 호출된 이후, 서버에 요청한 결과의 헤더를 수신한 상태

3: LOADING(로딩) - send() 메서드 호출 후, 서버에 요청한 결과를 받아오는 중

4: DONE(완료) - 서버에 요청한 결과를 받은 상태