JavaScript에서의 Ajax 통신

Ajax 개념

XMLHttpRequest라는 자바스크립트 객체를 이용하여 웹 서버와 비동기로 통신하고 DOM을 이용하여 웹 페이지를 동적으로 갱신하는 프로그래밍 기법을 말합니다.
현재 XML을 사용하는 경우는 매우 드물고 주로 JSON과 텍스트 데이터를 사용합니다.

Ajax의 특징

기존에 만든 웹 어플리케이션과 Ajax를 활용한 웹 어플리케이션에는 어떤 차이가 있을까?

기존의 지도 서비스

사용자가 찾아보려는 장소가 바뀌면 클라이언트는 서버에 새로운 지도정보를 보내 달라는 요청을 보냅니다. 서버는 이 요청을 받아서 새로운 지도를 포함한 웹 페이지 전체를 생성한 후에 클라이언트로 전송합니다. 클라이언트는 이 결과를 받아 웹 페이지 전체를 다시 렌더링해서 표시합니다.
이때 일련의 통신은 동기적으로 이루어집니다. 따라서 서버가 모든 데이터를 보내기 전까지 클라이언트는 아무것도 할 수 없는 상태가 됩니다. 또한 웹 페이지 전체를 주고 받아야 하기 때문에 그 만큼 시간이 걸립니다.

Ajax를 활용한 지도 서비스

사용자가 찾아보려는 장소가 바뀌면 클라이언트 측 자바스크립트가 현재 가지고 있는 지도 데이터에서 부족한 부분을 파악합니다. 그리고 서버에 그 부분만 보내달라는 요청을 보냅니다. 이 요청을 받은 서버는 클라이언트가 필요로 하는 데이터만 전송합니다. 클라이언트는 이 데이터를 받아서 필요한 부분만 DOM으로 변겅합니다. 이때 일련의 통신은 비동기적으로 이루어집니다. 따라서 서버가 데이터를 다 보내지 않은 상태라 하더라도 클라이언트를 자유롭게 사용할 수 있습니다.

Ajax의 장점

1. 최소한의 데이터 통신만 하므로 처리 속도가 빠르고 서버 부하와 통신 트래픽 부하가 적다.

2. 비동기로 통신하므로 클라이언트 측에서 다른 작업을 할 수 있다.

3. 웹 페이지 갱신을 클라이언트 측이 담당한다. 페이지를 전환하는 대신에 페이지 일부분만 변경하므로 고속 렌더링이 가능하다.

   또한 Ajax를 활용하면 화면을 전환하는 빈도가 줄어들기 때문에 사용자에게 데스크톱 애플리케이션을 사용하는 듯한 편의성을 제공할 수 있습니다.

참고: 모던 자바스크립트 입문