AJAX

AJAX(Asynchronous JavaScript And XML)는 비동기적 웹 서비스를 개발할때 사용하는 기법이다.

 

 

이름에 XML이 들어있지만 꼭 XML을 사용해야하는것은 아니며, 요즘에는 JSON을 많이 사용한다.

쉽게 말해 페이지 이동없이 서버에 요청을 보내고 응답을 받는 기술이다.

 

 

웹사이트 중에서 페이지 변환없이 새로운 데이터를 불러오는 사이트는 대부분 AJAX 기술을 사용하고 있다.

 

보통 AJAX 요청은 jQuery, axios 같은 라이브러리를 이용해서 보낸다.

브라우저 에서 기본적으로 XMLHttpRequest 객체를 제공하긴 하지만, 사용 방법이 복잡하고 서버에서는 사용할수 없으므로 공부할때는 axios를 사용할거다.

 

프론트엔트에서 사용하려면 HTML 파일을 하나 만들고 그안에 script 태그를 추가해야 한다 두번째 script 태그안에 앞으로 나오는 프런트 엔드 예제 코드를 넣으면 된다.

 

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
  // 여기에 예제 코드를 넣으세요.
</script>

 

 

먼저 요청의 한 종류인 GET 요청을 보낸다.

axios.get 함수의 인수로 요청을 보낼 주소를 넣으면 된다.

  axios.get('<https://www.zerocho.com/api/get>')
    .then((result) => {
      console.log(result);
      console.log(result.data); // {}
    })
    .catch((error) => {
      console.error(error);
    });

axios.get도 내부에 new Promise가 들어있으므로 then과 catch를 사용할수 있다.

result.data에는 서버로부터 보낸 데이터가 들어 있다. 이는 개발자 도구 console 탭에서 확인 가능하다.

result는 data며
result.data는 {}이다.

 

 

프로미스이므로 async/await 방식으로 변경할수 있습니다. 익명 함수라서 즉시 실행을 위해 코드를 소괄호로 감싸서 호출했습니다.

  (async () => {
    try {
      const result = await axios.get('<https://www.zerocho.com/api/get>');
      console.log(result);
      console.log(result.data); // {}
    } catch (error) {
      console.error(error);
    }
  })();

 

 

이번에는 POST 방식의 요청을 보내겠다. POST 요청에서는 데이터를 서버로 보낼 수 있다.

(async () => {
    try {
      const result = await axios.post('<https://www.zerocho.com/api/post/json>', {
        name: 'zerocho',
        birth: 1994,
      });
      console.log(result);
      console.log(result.data);
    } catch (error) {
      console.error(error);
    }
  })();

전체적인 구조는 비슷한데 두 번째 인수로 데이터를 넣어 보내는것이 다르다. GET요청이라면 axios.get을, POST요청이라면 axios.post를 사용한다.