[Javascript] 비동기 통신을 위한 3가지 방법

0. XMLHttpRequest

XMLHttpRequest는 꽤 이전부터 비동기 통신을 위해 사용해온 객체이다.

let xhr = new XMLHttpRequest();
xhr.open('post', '/test');
xhr.responseType = 'json';

xhr.setRequestHeader('Content-Type', 'application/json;charset=utf-8');

xhr.onreadystatechange = function(){
    if(xhr.readyState == 4 && xhr.status == 200){
        console.log(xhr.response);
    }
}

xhr.send(JSON.stringify({
    'testNum' : 'Test001'
    })
);

 

 

1. $.ajax

$.ajax는 JQuery에서 제공하는 비동기통신 방식이다.

$.ajax({
    url : '/test',
    type : 'post',
    contentType : 'application/json;charset=utf-8',
    data : JSON.stringify({
        'testNum' : 'Test001'
    }),
    success : function(res){
        console.log(res);
    },
    error : function(err){
    	console.log(err.status + ' : ' + err.statusText);
    },
    dataType : 'text'
});

 

 

2. fetch

fetch는 비교적 최근에 나온 비동기 통신을 위한 api이다.

fetch('/test', {
    method : 'POST',
    headers : {
        'Content-Type' : 'application/json;charset=utf-8'
    },
    body : JSON.stringify({
        'testNum' : 'Test001'
    })
})
    .then((res) => res.text())
    .then((text) => console.log(text));