Ajax ??

Ajax(Asynchronous JavaScript and XML) : 비동기적인 웹 애플리케이션의 제작을 위해 다음과 같은 조합을 이용하는 웹 개발 기법이다.

• 표현 정보를 위한 HTML과 CSS
• 유저와의 상호작용을 위한 DOM, Javascript
• 비동기적으로 데이터를 주고 받기 위한 XMLHttpRequest

위 기술을 조합해서 데이터를 불러올 때, 화면 전체를 다시 로드하는 것이 아니라 필요한 데이터만을 요청해서 클라이언트에서 데이터를 처리하는 것 이다.

이로 인해서 웹 브라우저와 웹 서버 사이에 교환되는 데이터량과 웹 서버의 데이터 처리량도 줄어들기 때문에 애플리케이션의 응답성이 좋아진다.

장점

• 페이지 이동 없이 고속으로 화면 전환 가능
• 서버 처리를 기다리지 않고, 비동기 요청이 가능
• 수신하는 데이터 양을 줄일 수 있고, 클라이언트에게 처리 위임 가능

단점

• 사용이 불가능한 브라우저에 대한 문제
• 페이지 이동없는 통신으로 인한 보안상의 문제
• 요청을 남발이 서버의 부하 가능
• 스크립트로 작성되므로 디버깅이 용이하지 않다.

예시

GET을 사용해서 Ajax 요청

//Ajax 요청을 초기화 합니다.
var xhr = new XMLHttpRequest();
xhr.open('get', 'send-ajax-data.php');

//요청의 상태 변화를 추적
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); // 요청 도중 에러 발생
  }
}

fetch를 이용한 요청

fetch('서버 주소')
 .then((response) => {
  return response.json();
 })
 .then((json) => {
  //json 형태로 전달 받은 데이터를 다룬다.
 })