TIL23: Asynchronous JavaScript and XHR

Dynamic Web Page

• 과거의 웹 페이지상에서 이루지는 요청과 그에 따른 응답은 페이지를 전환(새로운 페이지 전체를 로딩)하여 처리하였습니다.
• 하지만 오늘날의 SPA(Single Page Application)에서는 서버의 응답에 따라 페이지의 일부만 업데이트(페이지의 구성 요소를 동적으로 변경)하여 처리합니다.
• 즉, 단순한 Web Page가 아닌, 서버와 자유롭게 통신하고 페이지의 깜빡임 없이 매끄럽게 작동하는 Web App이 등장하게 되었습니다.
• Web App의 등장을 가능하게 한 것은 바로 1. JavaScript와 2. DOM 그리고 3. XHR(XMLHttpRequest)[ 또는 jQuery, Fetch API] 입니다. [하나 더 추가하자면 4. CORS(Cross-Origin Resource Sharing) 까지] 이들을 통틀어 AJAX(Asynchronous JavaScript and XHR) 라고 부릅니다.

// Using XHR
var xhr = new XMLHttpRequest();
xhr.open('get', 'http://localhost:3000/messages');
// 요청의 상태 변화를 추적
xhr.onreadystatechange = function() {
  // readyState 4: 완료
  if(xhr.readyState !== 4) return;
  // status 200: 성공
  if(xhr.status === 200) {
    console.log(xhr.responseText); // 서버로부터 온 응답
  } else {
    console.log('에러: ' + xhr.status); // 요청 도중 에러 발생
  }
}
xhr.send(); // 요청 전송

// Using jQuery ajax
$.get('http://localhost:3000/messages', function(response) {
  // response: 서버로부터 온 응답
});

// Using fetch API
fetch('http://localhost:3000/messages')
  .then(function(response) {
    return response.json();
  }).then(function(json) {
    // json 형태로 전달받은 서버로부터의 응답
  });

최근에 개발된 표준 API인 fetch가 보다 쓰기 쉽고 편리하지만, 여전히 XHR과 jQuery 또한 많이 쓰이는 기술이므로 차이점을 분명히 알고 사용법 또한 익혀 두어야 Legacy Code에 대해 이해할 수 있습니다.

코드 및 자료 출처: 코드스테이츠(CodeStates)