XMLHttpRequest 간단 소개

XMLHttpRequest란?

XMLHttpRequest는 HTTP를 통해서 쉽게 데이터를 받을 수 있게 해주는 오브젝트를 제공한다.

Ajax로 실행되는 HTTP 통신도 XMLHttpRequest 규격을 이용하고 있다.

How to use?

var xhr = new XMLHttpRequest();

xhr.open('GET', 'http://localhost:3000/', true);

xhr.send(null);

위 코드를 사용하게 되면 http://localhost:3000 로 비동기로 HTTP 요청을 하게 된다.

정리하면 아래와 같다.

1. XMLHttpRequest()를 통해 오브젝트 생성을 한다.

2. 그 후 open() 함수를 통해 메소드 방식, url, 그리고 비동기 여부를 설정한다.

3. send(data) 로 설정한 방식대로 request를 보낸다.(data는 null이어도 된다.)

How to response?

xhr.onreadystatechange = function()
{
    if(xhr.readyState == XMLHttpRequest.DONE && xhr.status == 200) {
        console.log(xhr.responseText);
    }
}

위 코드를 사용하게 XMLHttpRequest 오브젝트에 onreadystatechange를 등록하면 request 후 해당 server로부터 status code가 200이면 response 받은 text를 콘솔에 출력한다.

How to send data?

xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

var data = 'id=' + id + '&' + 'pw' + pw;
xhr.send(data);

x-www-form-urlencoded로 Content-type을 지정하면 data는 form 형식을 유지해야 한다.

xhr.setRequestHeader('Content-Type', 'application/json');

var data = {
  id: id,
  pw: pw
}

xhr.send(data);

application/json 타입이면 data는 json 타입이어야 한다.