Ajax

해외 축구를 많이 보던 저에게 단어 자체는 Ajax라는 단어는 익숙한 단어였습니다. 아약스라는 축구팀이 있기도 하고 그리스 신화에도 아약스라는 인물이 등장하기 때문에 처음 이 단어를 들을땐 어? 뭐지?하는 느낌이 인상깊었습니다.

농담은 이쯤하고 Ajax(에이잭스)에 대해서 알아보겠습니다.

---

1. Ajax 소개

Ajax는 Asynchronous Javascript & XML의 준말입니다. 비동기 자바스크립트와 XML이라는 것인데, 간단하게 말하면 'XMLHttpRequest'라는 자바스크립트 객체를 이용해서 서버와 비동기 통신을 하고 결과를 DOM을 경우해 페이지에 반영하는 기술입니다.

Ajax가 등장하기 이전에는 동기 통신 방식을 이용해서 (1)페이지에서 이벤트가 발생하면 (2)서버에 요청을 보내고 (3)결과를 HTML방식으로 응답합니다. (4)응답을 받으면 페이지를 새로고침하는 방식으로 웹페이지를 구성했습니다. 이 방식은 서버에 요청을 보내고 처리를 기다리는 동안 클라이언트는 기다려야 했습니다. 그리고 HTML 방식으로 응답을 받아서 새로고침 하기 때문에 이벤트 처리 시 화면이 하얗게 되었다가 페이지를 새로 로드하므로 화면이 깜빡이는 것이 필요했고, HTML 전체를 요청받고 응답하기 때문에 시간이 오래걸리는 문제도 있었습니다.

여담으로 2010년도 전에 어릴 때 플래시 게임 사이트에 가서 게임을 하려고 클릭하면 하면이 잠시 하얗게 변했다가 다시 페이지가 뜨는게 Ajax가 적용되지 않았던 사이트였기 때문이었다고 지금을 유추해볼 수 있겠네요.

---

Ajax는 비동기 통신을 적용하여 (1)페이지에서 이벤트가 발생하면 (2)JS+XMLHttpRequest객체를 서버에 요청을 송신합니다. (3)서버는 처리한 결과는 XML 최근에는 주로 JSON의 형식으로 결과를 응답합니다. (4)응답을 받으면 DOM 요소로 필요한 부분만을 새로고침 합니다.

이때 수행 방식이 데이터 처리만 서버단에서 수행을 하게 되고, UI 부분은 클라이언트에서 수행합니다. 이 점은 서버 통신의 트래픽 양도 줄어서 동기 통신보다 빠른 속도를 보일 수 있게 됩니다.

마찬가지로 HTML 전체를 응답하는 것이 아닌 변경된 일부분에 대해서만 처리하기 때문에 빠른 속도와 화면의 깜빡임 현상 또한 사라지게 되었습니다.

또 백그라운드에서만 데이터 처리를 담당하기 때문에 동기 통신에 비해 사용자가 처리 응답을 기다리는 동안 다른 조작을 할 수 있습니다.

 

 

2. Ajax의 장점과 단점

장점은 위에서 소개했지만 다시 한 번 깔끔하게 정리하겠습니다.

• 필요한 부분만 변경하기 때문에 빠른 속도를 보장한다.
• 서버의 처리를 기다리지 않고 클라이언트에서 조작이 가능하다.
• 동기 통신에서 불가능 했던 다양한 웹페이지 기능을 구현할 수 있다.

이런 Ajax에게도 단점이 있습니다.

• 클라이언트에서 조작이 계속 가능하기 때문에 데이터 요청이 계속해서 쌓이면 서버에 부하가 생긴다.
• Ajax가 적용되지 않은 사이트와의 통신이 불가능하다.
• 히스토리 관리가 되지 않는다.
• 통신 진행 상황을 사용자가 알 수 없다. (개발자가 명시적으로 알리기를 권장)

---

참조

https://developer.mozilla.org/ko/docs/Web/Guide/AJAX/Getting_Started

Ajax 시작하기 - 웹 개발자 안내서 | MDN

http://tcpschool.com/ajax/ajax_intro_basic

코딩교육 티씨피스쿨