2.2.1 AJAX

AJAX(Asynchronous Javascript And XML)는 비동기적 웹 서비스를 개발하기 위한 기법입니다. 이름에 XML이 들어가 있지만 꼭 XML을 사용해야 하는 것은 아닙니다. 요즘에는 JSON을 많이 사용합니다. 쉽게 말해 페이지 이동 없이 서버에 요청을 보내고 응답을 받는 기술입니다. 요청과 응답은 4.1절에 설명되어 있습니다. 웹 사이트 중 페이지 전환 없이 새로운 데이터를 불러오는 사이트는 대부분 AJAX 기술을 사용하고 있다고 보면 됩니다.

보통 AJAX 요청은 jQuery나 axios 같은 라이브러리를 이용해서 보냅니다. 하지만 이 책은 프런트엔드 라이브러리의 사용을 최소화하고 있으므로 자바스크립트가 기본으로 제공하는 방식으로 요청을 보냅니다. 기본 구조는 다음과 같습니다. 프런트엔드에는 ES2015+ 코드를 사용할 수 없는 경우(IE)가 있으므로 ES5 문법을 사용했습니다.

<script>
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function() { // 요청에 대한 콜백
    if (xhr.readyState === xhr.DONE) { // 요청이 완료되면
      if (xhr.status === 200 || xhr.status === 201) { // 응답 코드가 200이나 201이면
        console.log(xhr.responseText); // 서버에서 보내주는 값
      } else {
        console.error(xhr.responseText);
      }
    }
  };
  xhr.open('GET','https://www.zerocho.com/api/get'); // 메서드와 주소 설정
  xhr.send(); // 요청 전송
</script>