JavaScript에서 AJAX를 통한 GET 요청 전송

이제 AJAX 요청을 통해 서버에 데이터를 전송하는 방법을 배워봅시다. 서버는 이 데이터로 어떤 작업을 수행하고 결과를 다시 우리에게 보내줄 것입니다.

우리의 테스트 서버는 주소 /handler/로 전송된 데이터를 처리할 것입니다:

public/client.jsbutton.addEventListener('click', function() {
  let promise = fetch('/handler/');
});

먼저 GET 요청을 보내 봅시다:

public/client.jsbutton.addEventListener('click', function() {
  let promise = fetch('/handler/?num=3');
});

서버 측에서 전송된 데이터를 받아봅시다:

server.jsexport default {
  '/handler/': function({get}) {
    console.log(get.num); // 3을 출력합니다
  }
}

이 데이터로 무언가 작업을 하고 다시 돌려보내 봅시다:

server.jsexport default {
  '/handler/': function({get}) {
    return get.num ** 2;
  }
}

클라이언트 측에서 결과를 받아 어딘가에 출력해 봅시다:

public/client.jsbutton.addEventListener('click', function() {
  fetch('/handler/?num=3').then(
    response => {
      return response.text();
    }
  ).then(
    text => {
      console.log(text);
    }
  );
});