Ajax를 간단하게 알아보자

초창기의 웹은 특정 웹 페이지에서 다른 웹 페이지로 갈 수 있는 링크를 클릭하면 새로운 웹 페이지가 로드되는 방식이었습니다. 

하지만 화면의 일부분만 바뀌면 되는 경우에도 매번 새 페이지가 로드되는 방식은 효율적이지도 않고 사용자에게도 그다지 좋지 않은 경험을 안겨주었습니다. 그래서 2000년대 초부터는 웹의 이런 단점을 극복하기 위해서 Ajax라는 기술이 도입되었습니다.

 

Ajax는 웹 브라우저가 현재 페이지를 그대로 유지한 채로 서버에 리퀘스트를 보내고 리스폰스를 받아서, 새로운 페이지를 로드하지 않고도 변화를 줄 수 있게 해주는 기술입니다.

Ajax는 Asynchronous JavaScript And XML의 줄임말입니다.

이는 자바스크립트를 사용해서 비동기적으로(=사용자가 보고 있는 현재 화면에 영향을 미치지 않고 별도로 백그라운드에서 작업을 처리)

리퀘스트를 보내고 리스폰스를 받는데 기반이 되는 기술들의 집합을 의미합니다.

여기서 마지막에 XML이 쓰인 것은 Ajax라는 용어가 생겨난 당시에 XML이 가장 많은 인기를 누리던 데이터 타입이었기 때문입니다. 

 

 

Ajax의 원리는 여러분이 흔히 쓰는 구글 맵(Google Map) 같은 웹 서비스를 생각해보면 이해하기 쉽습니다. 

명동 성당을 클릭했을 때, 초창기의 웹이었다면 아예 새로운 페이지를 로드해야 했을 겁니다.

하지만 실제로 명동 성당 아이콘을 클릭해보면

현재 웹 페이지는 그대로 유지되고, 단지 그 밑에 명동 성당에 관한 간단한 정보창이 떠오를 뿐입니다. 이것이 가능한 이유는 웹 브라우저가, 사용자가 보고 있는 현재 페이지를 방해하지 않고 별도로 서버로 리퀘스트를 보내고, 리스폰스를 받아왔기 때문입니다.

 

 

자바스크립트에서는 XMLHttpRequest라고 하는 객체를 통해 Ajax 통신을 할 수 있습니다.

XMLHttpRequest를 사용하는 예시 코드는 다음과 같습니다.

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://test.com/api/members');
xhr.onload = function () {
  console.log(xhr.response);
};
xhr.onerror = function () {
  alert('Error!');
};
xhr.send();

하지만 요즘에는 XMLHttpRequest를 이렇게 직접 사용하지 않아도 됩니다.

첫 번째 이유는 XMLHttpRequest 객체 이후에 등장한 fetch 함수를 사용해서 Ajax 통신을 할 수 있기 때문입니다. 

두 번째 이유는 XMLHttpRequest을 기반으로 더 쓰기 편하게 만들어진 axios라는 패키지가 존재하기 때문입니다.

 

 

 

Ajax 통신이 아닌 것은 이런 태그를 사용자가 클릭하도록 해서 새 페이지를 로드하게 하는 방식이고

<a href="https://test.com/api/main">메인 화면으로 가기</a>

 

Ajax 통신은 이런 식으로 사용자가 느낄 수 없게, 리퀘스트를 보내고 리스폰스를 받아 현재 페이지에 원하는 변화를 주는 방식입니다.

// (위 예시를 단순화한 코드입니다)
function getLocationInfo(latitude, longitude) {
  fetch('https://map.google.com/location/info?lat=latitude&lng=longitude')
    .then((response) => response.text())
    .then((result) => { /* 사용자 화면에 해당 위치 관련 정보 띄워주기 */ });
}