비동기 처리 AJAX , XMLHttpRequest

AJAX (Asynchronous Javascript And XML)

• 페이지 새로고침 없이 서버에 요청
• 서버로부터 데이터를 받고 작업을 수행
• axios, fetch, async/await, promise, XMLHttpRequest, superagent, request

fetch

Request, Resonse와 같은 HTTP의 파이프라인 구성 요소 조작가능

var myImage = document.querySelector('img');

fetch('flowers.jpg')
.then(function(response) {
  return response.blob();
})
.then(function(myBlob) {
  var objectURL = URL.createObjectURL(myBlob);
  myImage.src = objectURL;
});

 

 

XMLHttpRequest

readyState : 요구 상태 값

var httpRequest;

httpRequest = new XMLHttpRequest();

// 서버 응답에 대한 로직
httpRequest.onreadystatechange = function(){
    //...
}

// 요청
httpRequest.open('GET', 'http://www.site.com/abcd.file', true)
httpRequest.send(null)

 

• 0 (uninitialized) - (request가 초기화되지 않음)
• 1 (loading) - (서버와의 연결이 성사됨)
• 2 (loaded) - (서버가 request를 받음)
• 3 (interactive) - (request(요청)을 처리하는 중)
• 4 (complete) - (request에 대한 처리가 끝났으며 응답할 준비가 완료됨)

// request에 대한 처리가 끝나고 응답할 준비가 완료 됬다면
if (httpRequest.readyState === XMLHttpRequest.DONE)) {
}
if (httpRequest.readyState === 4) {
}

if (httpRequest.status === 200) {
    // 이상 없음!
} else {
    // 요구를 처리하는 과정에서 문제가 발생되
    // 예를 들어 응답 상태 코드는 404 (Not Found) 이거나
    // 혹은 500 (Internal Server Error)
}