TIL24: XHR / jQuery ajax

XHR(XML HTTP Request)

function reqListener () {
  console.log(this.responseText);
}
var onReq = new XMLHttpRequest();
onReq.addEventListener("load", reqListener);
onReq.open("GET", "http://www.example.org/example.txt");
onReq.send();

jQuery ajax

$.ajax({
    url: 'http://example.com',
    method: 'GET',
    dataType: 'json'
  }).done(function(json) {
    console.log(json);
  }).fail(function(xhr, status, errorThrown) {
    console.log(errorThrown);
  }).always(function(xhr, status) {
    console.log('요청완료')
  });

Fetch API
XHR이나 jQuery ajax 보다 간단하고, 통신을 포함한 리소스 취득을 위한 편리한 인터페이스를 제공하는 것이 바로 fetch API입니다. 기본적인 기능면에서는 큰 차이가 없어 보이지만 fetch API는 좀 더 강력하고 유연한 조작이 가능합니다.

fetch('http://example.com')
  .then(res => res.json())
  .then(data => {
    console.log(data);
  })
  .catch(err=>{
    console.error(err)	
  });

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