AJAX의 정의
AJAX는 Asynchronous JavaScript and XML의 약자로, 말 그대로 JavaScript와 XML을 이용한 비동기적 정보 교환 기법이다.(출처: 나무위키)
XML...? 비동기적 정보 교환 기법...? 잘 모르겠으니 차근차근 살펴보자.
짚고 넘어가기: 웹의 동작개념
(출처: 훈마로의 보물창고)
위 그림과 같이 클라이언트가 요청을하고 서버로부터 응답을 받으면 그 세션은 끝나게 된다. 우리가 웹에서 보는 여러가지 기능 및 서비스들은 html, image, javascript 등으로 만들어진 덩어리 인데, 이 언어들이 해석이 되면서 웹에 보여지는 것!
그런데 AJAX가 왜 필요할까?
이미 서버로부터 데이터를 받아온 상태(세션이 끝난 상태)에서 보고있는 웹 페이지의 일정 부분만 refresh 하고 싶다면 어떻게 해야할까? 해당 기능을 javascript로는 구현할 수는 없는걸까? js는 버튼 이벤트 함수에서 팝업 등의 기능이 수행이 되는 것이고, 서버통신을 하는 것이 아니다!
따라서 페이지를 유지한채(페이지를 갱신하지 않고)로 특정 부분의 데이터를 바꾸기 위해서는 다른 방법이 필요한데... 그것이 바로 Ajax가 탄생한 배경이다.
Ajax의 동작원리
Ajax는 웹 페이지의 디자인 요소와 정보 요소를 분리한다. 처음 사이트에 접속하면 웹 서버는 해당 페이지의 스타일과 레이아웃을 정의하는 정적 HTML 파일과 CSS 파일, 그리고 데이터를 어떻게 요청하면 되는지를 설명한 JavaScript 파일을 전달한다. 브라우저는 일단 이 내용으로 페이지의 기본적인 골격을 구축해 놓는다. 그리고 골격의 구축이 끝나면 브라우저는 전달받은 JavaScript를 실행해서 서버에 데이터만을 별도로 요청한다. 이 때 서버에서 주는 응답은 순수한 데이터 객체 즉 XML 또는 JSON 데이터이다. 브라우저가 이 데이터를 수신하면 미리 만들어 둔 틀 안에 적절한 방법으로 데이터를 끼워 넣는다.(출처: 나무위키)
① : 사용자에 의한 요청 이벤트가 발생합니다.
② : 요청 이벤트가 발생하면 이벤트 핸들러에 의해 자바스크립트가 호출됩니다.
③ : 자바스크립트는 XMLHttpRequest 객체를 사용하여 서버로 요청을 보냅니다.
이때 웹 브라우저는 요청을 보내고 나서, 서버의 응답을 기다릴 필요 없이 다른 작업을 처리할 수 있습니다.
④ : 서버는 전달받은 XMLHttpRequest 객체를 가지고 Ajax 요청을 처리합니다.
⑤와 ⑥ : 서버는 처리한 결과를 HTML, XML 또는 JSON 형태의 데이터로 웹 브라우저에 전달합니다.
이때 전달되는 응답은 새로운 페이지를 전부 보내는 것이 아니라 필요한 데이터만을 전달합니다.
⑦ : 서버로부터 전달받은 데이터를 가지고 웹 페이지의 일부분만을 갱신하는 자바스크립트를 호출합니다.
⑧ : 결과적으로 웹 페이지의 일부분만이 다시 로딩되어 표시됩니다.
(출처: TCPschool)
