[JS] XMLHttpRequest

HTTP 요청 전송 

const xhr = new XMLHttpRequest(); //생성자 함수 호철하여 생성
xhr.open(method, url[, async]) // method:Http 요청메서드(GET,POST,PUT,DELETE 등 )
.....

xhr.send(); //HTTP 요청전송

 

XMLHttpRequest.prototype.open

open메서드는 서버에 전송할 HTTP요청을 초기화한다. 

HTTP 요청 메서드는 클라이언트가 서버에게 요청의 종류와 목적을 알리는 방법이다. 

주로 5가지 요청 메서드를 사용하여 CRUD를 구현한다. 

HTTP 요청 메서드	종류	목적	페이로드
GET	index / retrieve	모든/특정 리소스 취득	X
POST	create	리소스 생성	O
PUT	replace	리소스의 전체 교체	O
PATCH	modify	리소스의 일부 수정	O
DELETE	delete	모든/특정 리소스 삭제	X

 

XMLHttpRequest.prototype.send

send메서드는 open메서드로 초기화된 HTTP요청을 서버에 전송한다. 기본적으로 서버로 전송하는 데이터는 GET, POST 요청 메서드에 따라 전송 방식에 차이가 있다. 

• GET 요청 메서드의 경우 데이터를 URL 의 일부분인 쿼리 문자열로 서버에 전송한다. 
• POST 요청 메서드의 경우 데이터(페이로드) 를 요청 몸체(request body) 에 담아 전송한다. 

send 메서드에는 요청 몸체에 담아 전송할 데이터(페이로드)를 인수로 전달할 수 있다. 

페이로드가 객체인 경우 반드시 JSON.stringify 메서드를 사용하여 직렬화한 다음 전달해야 한다. 

*HTTP 요청 메서드가 GET 인 경우 send 메서드에 페이로드로 전달한 인수는 무시되고 요청 몸체는 null로 설정된다. 

 

HTTP 응답처리

서버가 전송한 응답을 처리하려면 XMLHttpRequest 객체가 발생시키는 이벤트를 캐치해야 한다. 

XMLHttpRequest 객체는 onreadystatechange, onload, onerror 같은 이벤트 핸들러 프로퍼티를 갖는다. 

이 이벤트 핸들러 프로퍼티 중에서 HTTP 요청의 현재 상태를 나타내는 readyState 프로퍼티 값이 변경된 경우 발생하는 readystatechage 이벤트를 캐치하여 HTTP 응답을 처리할 수 있다. 

HTTP 요청을 전송하고 응답을 받으려면 서버가 필요하다. 

아래는 가상 REST API를 사용한다. 

const xhr = new XMLHttpRequest(); // XMLHttpRequest객체생성

xhr.open('GET', 'https://jsonplaceholder.typicode.com/todos/1'); //HTTP 요청 초기화

xhr.send(); // HTTP 요청 전송

xhr.onreadystatechange = () => { 
//readystatechage 이벤트는 HTTP요청의 현재삳태를 나타내는 ready 프로퍼티가 변경될 때마다 발생한다.
    if(xhr.readyState !== XMLHttpRequest.DONE) //readyState 프로퍼티 값이 4(XMLHttpRequest.DONE)가 아니면 서버 응답이 완료되지 않은 상태다.
    return; //만약 서버 응답이 아직 완료되지 않았다면 아무런 처리를 하지 않는다. 

    if(xhr.status === 200){ //status 프로퍼티는 응답 상태 코드를 나타낸다. status 값이 200이면 정상적으로 응답된 상태
        console.log(JSON.parse(xhr.response)) //정상적으로 응답된 상태라면 response프로퍼티에 서버의 응답 결과가 담겨 있다.
    }else{
    console.error('Error', xhr.status, xhr.statusText);
    }
};

xhr.response : HTTP 응답 결과가 담긴 값이다. 

개발자도구 -> Network -> Response 를 확인하자.