AJAX (Asynchronous javascript and xml)

송민혁·2023년 10월 13일

AJAX 출현

초기의 웹은 일부분이 바뀌면 매번 새로운 페이지를 로드해야 하는 방식이라 비효율적이고 사용자 경험이 안좋습니다.

사용자 경험을 향상시키고 동적인 기능을 갖춘 웹페이지를 구현하기 위해서는 서버와 비동기적으로 데이터를 교환하는 ajax가 필요합니다.

Ajax (Asynchronous javascript and xml)란 웹페이지의 전체 페이지를 새로 고치지 않고, 페이지 일부분만을 서버에서 가지고 와서 웹페이지 화면을 동적으로 변경하는 방식입니다.

다시 말해, Ajax는 자바스크립트를 이용해 백엔드 서버의 데이터만 가져와서 웹페이지의 일부분을 동적으로 바꾸는 기술입니다.

일부분을 동적으로 만들기 위해서는 비동기 방식을 이해해야 합니다.

비동기 방식은 서버로부터 리스폰스가 올 때까지 대기하지 않고 서버의 리스폰스가 준비되는 동안 사용자가 웹페이지에서 다른 작업을 수행할 수 있는 방식을 의미합니다.

그래서 사람들은 동기적으로 한다고 착각하는 경우가 많습니다.

비동기를 사용함으로써 최종 작업 시간을 줄일 수 있다는 장점을 가지고 있습니다.
비동기를 사용하는 방식으로는 다음과 같습니다.

Axios는 Node.js와 브라우저를 위한 Promise API를 활용하는 ‘HTTP 통신 라이브러리’입니다. Fetch는 웹브라우저에서 지원하는 API이므로 Node.js에서는 axios를 사용하여 Ajax를 사용할 수 있습니다.

또한, fetch에는 없는 서버 요청 시 timeout 설정이 가능하며, 구형 브라우저를 포함한 다양한 브라우저 호환성이 뛰어납니다. Axios를 사용하여 Ajax 호출은 다음과 같이 사용할 수 있습니다.

// axios를 사용한 ajax 호출
axios.get('/service')
	.then(response => {console.log(response);})
	.catch(error => {console.log(error);}
;

// async/ await를 활용한 ajax
try {
	const response = await axios.get('/service');
  	console.log(response);
} catch (error) {
  console.log(error);
}

참고 링크

ajax_나무위키

Ajax 란, 활력 있는 웹페이지를 만들기 위한 필수 기능