Ajax
Ajax는 Asyncronous Javascript And XML의 줄임말입니다. 비동기 자바스크립트와 XML이라는 뜻을 가졌는데, 구체적으로 이야기하자면 XMLHttpRequest라는 자바스크립트 객체를 이용해서 서버와 비동기 통신을 하고 결과를 DOM이 변경되었을 경우 페이지에 반영하는 기술입니다.
동기 통신
Ajax가 등장하기 전에는 동기 통신 방식이 주를 이루었습니다. 동기 통신은 다음과 같은 순서로 진행되었습니다.
- 페이지에서 이벤트가 발생한다.
- 클라이언트는 서버에 요청을 보낸다.
- 요청에 대한 응답 결과를 HTML 방식으로 응답한다.
- 클라이언트는 응답을 받아 변화된 부분을 새로고침하여 갱신한다.
동기 통신방식은 요청을 보내고 응답을 받는 시간동안 사용자가 다른 동작을 수행하지 못하고 통신이 완료될 때까지 기다려야 했습니다. 또, 응답을 HTML 문서로 받아 해독하고 반영할 때 새로고침하느라 화면이 깜빡이게 되는데, 이것은 사용자 경험을 저하시키기도 했습니다. 또한 HTML 문서전체를 요청하고 응답으로 받음으로써 시간이 상대적으로 오래걸리기도 한다는 단점이 있었습니다.
Ajax와 비동기 통신
Ajax는 웹 페이지에 비동기 통신을 쉽게 구현할 수 있도록 해주었습니다. Ajax의 비동기 통신은 다음과 같이 진행됩니다.
- 페이지에서 이벤트가 발생한다.
- 클라이언트는
JS + XMLHttpRequest 객체를 통해 서버에 요청을 보냅니다. - 서버는 응답으로 XML 문서를 보냅니다., 최근에는 주로 JSON 문서로 결과를 보냅니다.
- 응답을 받으면 DOM을 통해 갱신이 필요한 부분에 대해서만 새로고침을 합니다.
비동기 통신은 데이터의 처리만 서버에서 수행하고, UI는 클라이언트에서 처리합니다. 따라서 서버의 트래픽이 줄어서 동기 통신보다 빠른 속도를 낼 수 있습니다. 그리고 응답을 기다리는 동안 사용자가 UI에 대해서 조작을 계속해서 할 수도 있습니다.
또한, 비동기 통신은 HTML 전체 응답이 아닌 변경된 부분에 대해서만 정보 갱신을 처리하므로 빠른 속도를 보장하고 전체 화면 깜빡임 현상도 제거할 수 있습니다.
Ajax의 장단점
Ajax의 장점은 다음과 같습니다.
- 필요한 부분만 업데이트하므로 빠른 속도를 보여준다.
- 사용자가 서버의 처리 시간을 기다리지 않고 계속해서 조작이 가능하다.
- 동기 통신에서 불가능 했던 다양한 웹 페이지 기능 구현이 가능하다.
Ajax의 단점은 다음과 같습니다.
- 서버가 요청을 수행하는 동안 클라이언트측에서 조작이 과다하게 쌓이면 서버 부하가 일어난다.
- Ajax가 미적용된 사이트와의 통신은 불가능하다.
- 히스토리 관리가 되지 않는다.
- 통신 진행 상황을 사용자가 알 수 없다. 개발자가 명시적으로 알리기를 권장하고 있다.
