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 타입이어야 한다.

ajax 란?

ajax란 Asynchronous Javascript and XML의 약자로 비동기적으로 서버와 브라우저가 데이터를 주고 받는 방식을 의미한다.

ajax 사용하기

먼저 아래의 예제를 보자. 아래는 data에 user에 대한 정보를 담아 유저를 생성하는 API를 호출하는 간단한 예제이다.

let data = {
  userId: userId,
  userPw: userPw
};
data = JSON.stringify(data);
 
let url = "http://localhost:3000/users";
 
let xhr = new XMLHttpRequest();
xhr.open('POST', url, true);
xhr.setRequestHeader('Content-type', "application/json");
xhr.send(data);
 
xhr.addEventListener('load', function() {
  let result = JSON.parse(xhr.responseText);
 
  switch(xhr.status) {
    case 200:
      // 성공 처리
      break;
    case 404:
      // 예외 처리
      break;
  }
 
  // console.log(xhr.responseText);
  // console.log(xhr.status);
  // console.log(result);
});

먼저 XMLHttpRequest 객체를 생성한다.

let xhr = new XMLHttpRequest();

open() 를 통해 POST, GET, PUT, DELETE 인지 정할 수 있다.

세 번째 인자로 true를 주면 async를 의미하고 false를 주면 sync를 의미한다.

xhr.open('POST', url, true);

send()를 통해 data를 전송한다.

xhr.send(data);

load 이벤트를 등록하여 서버로부터 response가 올 때의 행동을 구현할 수 있다.

xhr.status 는 서버로부터 전송받은 status code를 의미한다. 상황에 맞게 처리하면 된다.

xhr.responseText 는 서버로부터 받은 데이터를 의미하는데 String 형태로 받기 때문에 상황에 따라 JSON 형태로 파싱하여 사용해야 한다.

xhr.addEventListener('load', function() {
  let result = JSON.parse(xhr.responseText);
 
  switch(xhr.status) {
    case 200:
      // 성공 처리
      break;
    case 404:
      // 예외 처리
      break;
  }
});

정리

ajax를 통해 동적인 웹 브라우저를 구현할 수 있게 되었다. 하지만 직접 사용하다보니 jquery의 한계점을 조금은(?) 경험하게 되었다.

DOM 이 수정되면 기존의 jQuery는 알지 못하여 이벤트를 매번 관리를 해주어야 한다. ajax 로직이 생각보다 커졌다. 프론트 엔드 프레임워크를 사용하면 이 문제점을 보완할 수 있다고 하니 프레임워크를 공부해봐야 겠다.