AJAX
AJAX(Asynchronous JavaScript와 XML)는 XMLHttpRequest 기술을 사용해 복잡하고 동적인 웹페이지를 구성하는 프로그래밍 방식입니다.
MDN - AJAX
AJAX는 웹 페이지 전체를 새로고침하지 않고 서버와 데이터를 통신하는 방식을 뜻하며, 서버와 통신한 결과를 바탕으로 페이지 일부만을 동적으로 갱신할 수 있습니다. 과거에 서버와 통신을 할때 XML data형식으로 통신하여서 이름에 XML이 들어가 있습니다. 현재엔 json형식으로도 통신을 합니다.
AJAX의 장단점
Ajax의 장점
-
웹페이지의 속도향상 & 생산성 증대효과
- 서버의 처리가 완료 될때까지 기다리지 않고 처리가 가능합니다.
- 웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신할 수 있습니다. (SPA)
- XMLHttpRequest를 통해 필요로하는 일부 데이터만 JSON이나 XML형태로 갱신하기 때문에 그만큼의 시간과 자원을 아낄 수 있습니다.
-
코드의 컴팩트화
- 각각의 페이지마다 html코드를 가지고 있을 필요가 없어지고 서버에서 Data만 전송하면 되므로 전체적인 코딩의 양이 줄어듭니다.
-
웹 페이지가 로드된 후에 서버로 데이터 요청을 보내고 받을 수 있습니다.
-
동적인 통신으로 다양한 UI를 구현할 수 있습니다.
Ajax의 단점
- Ajax는 클라이언트가 서버에 데이터를 요청하는 클라이언트 풀링 방식을 사용하므로, 서버 푸시 방식의 실시간 서비스는 만들 수 없습니다.
클라이언트 풀링(client pooling) 방식이란 사용자가 직접 원하는 정보를 서버에게 요청하여 얻는 방식입니다. 이에 반해 서버 푸시(server push) 방식은 사용자가 요청하지 않아도 서버가 알아서 자동으로 특정 정보를 제공하는 것으로, 대표적인 예로 스마트 폰에서 각종 앱이 보내는 푸시 알림이 등이 있습니다.
-
Ajax 스크립트가 포함된 서버가 아닌 다른 서버로 Ajax 요청을 보낼 수 없다.
-
HTTP 클라이언트의 기능이 한정되어 있다.
-
연속으로 데이터를 요청하면 서버 부하가 증가할 수 있다.
사용하는 이유
위의 4가지 단점외에 여러 단점이 있지만, 웹페이지의 속도향상으로 최적화를 할 수 있고, 사용자 경험이 개선될 수 있기 때문입니다. 페이지 전체를 새로고침 하게 되면 화면을 전부 렌더링 하며 시간과 자원이 오래 소비 됩니다. 그러나 ajax통신을 이용해서 일부분만 바꿀 수 있다면 그만큼 통신시간도 줄어들고, 웹을 이용하는데 불편함이 감소될 것입니다.
AJAX 구현방법
- XMLHttpRequest
- axios
- fetch()
XMLHttpRequest는 오래된 방식이기 때문에 axios와 fetch()를 기준으로 살펴보겠습니다.
axios
axios는 외부 라이브러리이며, 여러 예외처리를 쉽게 할 수 있기 때문에 많이 사용되는 방식입니다. npm install axios로 설치가 필요하며 JSON을 자동으로 변환해주는 특징이 있습니다.
axios.get('/user?ID=12345')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
fetch()
fetch는 node v17.5.0부터 기본 내장함수가 된, Promise기반 함수입니다. then메소드를 통해 비동기 작업을 추가로 수행 할 수 있습니다. then메소드 마지막에 catch메소드를 작성하여 에러처리를 할 수 있습니다. 예외처리를 하기 위해서 따로 구현을 해야합니다.
fetch('https://example.com')
.then(response => response.json())
.then(data => console.log(data));참고사이트
https://developer.mozilla.org/ko/docs/Glossary/AJAX
https://axios-http.com/docs/example
https://daegwonkim.tistory.com/445
https://velog.io/@gparkkii/whatisajax
