Ajax

Ajax

Asynchronous JavaScript and XML(비동기식 자바스크립트와 XML)의 약자로, 비동기적인 웹 애플리케이션의 제작을 위해 이용하는 웹 개발 기법이다.
-> JavaScript를 사용한 비동기 통신, 클라이언트와 서버간에 XML 데이터를 주고받는 기술

이전에 페이지가 새로고침되면서 페이지가 깜빡이며 새로운 페이지를 받아오는데, 이것은 좋은 사용자 경험을 제공하지 못한다.

페이지 전체가 아니라, 필요한 부분만 렌더하기 위해서 dynamic web page가 등장하였다.

• 서버와 자유롭게 통신할 수 있고 (XMLHttpRequest(XHR)의 등장)
• 페이지 깜빡임 없이 seamless하게 작동하는 (Javascript와 DOM이용)

이것을 합쳐 AJAX가 되었다.

ES6에서 지원하는 fetch()는 Promise와 함께 Ajax를 쉽게 사용하게 해주는 방식이다.
오늘날 fetch()를 흔하게 사용하지만, 여전히 XMLHttpRequest는 많이 쓰이는 기술이므로 둘의 차이점을 확인 후 사용하는 것이 바람직하다.

fetch() 사용 예제

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

XMLHttpRequest() 사용 예제

let xhr = new XMLHttpRequest();
xhr.open('get', 'http://52.78.213.9:3000/messages');

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