AJAX

AJAX (Asynchronous Javascript And XML)

비동기적 웹 서비스를 개발할 때 사용하는 기법으로, 페이지 이동 없이 서버에 요청을 보내고 응답을 받는 기술이다.

 

---

AJAX를 사용하는 이유

페이지의 일부분만 갱신할 경우에도 페이지 전체를 다시 로드해야하는데, 이때 엄청난 자원과 시간이 낭비된다.

하지만 ajax는 html 페이지 전체가아닌 일부분만 갱신할수 있도록 XMLHttpRequest객체를 통해 서버에 request한다.

이 경우 Json이나 xml형태로 필요한 데이터만 받아 갱신하기 때문에 그만큼의 자원과 시간을 아낄 수 있다.

 

AJAX의 장단점

장점	웹페이지의 속도가 향상된다. JavaScript를 사용하기 때문에 JS의 특징인 비동기적 통신 가능 = 서버의 처리가 완료 될 때까지 기다리지 않아도 된다. 서버에서 Data만 전송되면 되므로 전체적인 코딩의 양이 줄어든다. 페이지 리로드 없이 웹의 일부분을 수정할 수 있어 기존 웹에서는 불가능했던 다양한 UI를 가능하게 해준다.
단점	히스토리 관리가 안되어 보안에 좀 더 신경을 써주어야 한다. 연속으로 데이터를 요청하면 서버 부하가 증가할 수 있다.

 

AJAX 구현방식

1) axios - npm게시물

• javascript 라이브러리 npm install axios
• 브라우저의 버전에 상관없이 사용이 가능하다.
• node.js에서의 사용이 가능하다.
• return 값은 Promise 객체 형태이다.

axios.post('request url', data)
  .then(function (res) {
    //...
  })

 

2) fetch

• javascript 내장 라이브러리이기 때문에 import하지 않고 사용할 수 있다.
• 지원하지 않는 브라우저의 버전이 있고, 호환시키려면 polyfill을 사용해 호환성을 맞춰야 한다.

  (fetch와 호환 가능한 버전 종류)

• 라이브러리의 업데이트에 따른 에러 방지가 가능하다.
• response timeout API 제공되지 않기 때문에, 네트워크 에러가 발생했을 경우에 기다려야 한다.
• return 값은 Promise 객체 형태이다.

fetch('request url', {
  method: 'POST',
  body,
}).then((res) => {
  //...
});

 

3) fetch와 axios의 차이점

잘 정리된 블로그 => blog.logrocket.com/axios-or-fetch-api/