AJAX
AJAX란, JavaScript의 라이브러리중 하나로 비동기식 자바스크립트와 xml 의 약자이며,
서버랑 비동기적으로 JS기술을 이용하여 정보를 주고받는 기술이다. 즉 웹페이지를 새로고침 없이 서버에서 데이터를 받아오고 Dom을 조작하여 페이지를 서버에서 받아온 데이터로 렌더링 해 줄 수 있다.
AJAX를 사용하는 이유는?
일반적으로 HTTP 프로토콜은 단방향 통신이다. 그렇기 때문에 클라이언트에서 요청을 보내고, 서버쪽에서 응답을 받으면 연결이 끊어진다. 그래서 화면의 내용을 갱신하기 위해서는 다시 요청을 보내고 응답을 받으며 페이지 전체를 갱신해야한다. 이러한 경우에는 엄청난 자원낭비와 시간낭비를 겪게 된다.
하지만, AJAX는 웹 페이지 전체를 다시 로딩하지 않고, 웹 페이지의 일부분만 갱신할 수 있다.
즉 AJAX를 이용하면 필요한 데이터만 받아 갱신하기 때문에 그만큼의 자원과 시간을 아낄 수 있다.
추가로 Jquery와의 시너지가 좋다 일반 Javascript만으로 Ajax를 하게되면 코딩량도 많아지고 브라우저별로 구현방법이 다른 단점이 있는데 Jquery를 이용하면 더 적은 코딩량과 동일한 코딩방법으로 대부분의 브라우저에서 같은 동작을 할 수 있게 된다. 한마디로 크로스브라우징이 쉬워진다.
AJAX의 진행과정
- 요청 : 브라우저는 XMLHttpRequest 객체를 만들어 서버에 정보를 요청.
- 응답 : 요청한 정보를 받아 화면에 렌더링.
XMLHttpRequest - HTTP를 통해서 쉽게 데이터를 받을 수 있게 해주는 오브젝트를 제공한다.
AJAX의 동작원리
아래는 Ajax를 이용한 통신과정과 일반적인 단방향 통신방식을 비교한 이미지 입니다.
이미지 출처 : http://www.tcpschool.com/ajax/ajax_intro_works
Ajax, Axios, Fetch 간단 비교
Ajax, Axios, Fetch : 클라이언트와 서버간의 데이터를 주고 받기 위한 비동기 통신 기술
XMLHttpRequest API를 통해 주고받는 것에 불편함을 느끼기 시작해 제이쿼리로 구현하다 fetch, Axios가 등장했다.
Axios
Axios는 Node.js와 브라우저를 위한 Promise API를 활용하는 HTTP 통신 라이브러리이다. 비동기로 HTTP 통신을 할 수 있으며 return을 promise 객체로 해주기 때문에 response 데이터를 다루기 쉽다. 또한 브라우저 호환성이 좋다. 다만 사용을 위해 별도의 모듈(라이브러리)을 설치해 줘야 한다는 단점이 있다.
fetch
Fetch API는 브라우저에서 기본적으로 제공하는 기능으로 별도의 설치과정이 필요 없다. Promise 기반으로 만들어졌기 때문에 axios와 마찬가지로 데이터 다루기가 쉽다. 다만 IE11은 지원하지 않고 JSON으로 변환하여 데이터를 처리해야 하므로 상대적으로 axios에 비해 불편하다는 단점이 있다.
요약
Ajax - XHR 객체를 이용해서 필요한 데이터만 불러올수 있으나 Promise기반이 아니므로 콜백지옥이 발생할수 있음
Axios - Node.js에서 많이 사용하며, promise 기반이기 때문에 데이터를 다루기 쉬움. 별도의 모듈 설치 혹은 CDN 연결이 필요함
fetch - 브라우저에서 기본적으로 제공되기 때문에, 별도의 라이브러리 설치나 CDN 연결이 필요하지 않음, promise기반이기 때문에 데이터 다루기가 쉬움. IE11 지원 X
