▶자바스크립트 :: Ajax ① 개념 및 활용방향
이 글에서는 자바스크립트 라이브러리중 jQuery와 함께 가장 많이 활용되고있는 Ajax에 대해서 살펴보려고한다. 짧게 요약해보면, Ajax는 "전체 페이지를 새로 고치지 않고도 페이지의 일부만을 위한 데이터를 로드하는 기법"이라고 할 수 있다. 모든 내용을 하나의 글에 담기보다는 여러 글에 나누어 정리해보려고하는데, 이번 글은 그 중 첫 번째글이며, 여기에서는 개념과 활용, 그리고 가장 기본적으로 알아야할 기능의 동작방식에 대해서 살펴볼 것이다.
Ajax란 무엇인가
Ajax는 서버로부터 데이터를 가져와 전체 페이지를 새로 고치지 않고 일부만 로드할 수 있게 하는 기법이다. 본래 Ajax는 비동기 요청을 보내는 데 필요한 기술, 즉 Asynchoronous Javascript And XML의 약자였으나 이후 브라우저 내에서 비동기 기능을 제공하는 모든 기법을 통칭하게 되었다.1
데이터 타입
서버는 주로 HTML, XML, JSON을 전달하므로, 이에대해 학습 해야한다.
jQuery와 Ajax
jQuery는 Ajax요청을 생성하고 서버로부터 전달받은 데이터를 처리하는 과정을 손쉽게 만들어 준다.
[내용출처 mozila developer network]
Ajax가 mozila developer network에 정의되어있는 내용을 보기쉽게 정리해보았는데, 이를 통해 대략적인 ajax기술을 가늠해볼 수 있을 것 같다.
Ajax의 활용방향
페이지의 일부분에만 새로운 콘텐츠를 로드하는 기능은 사용자의 전체적인 사용 경험을 향상시킬 수 있다. 이는 페이지의 일부만 수정하게 되면 사용자가 전체 페이지가 로드될 때까지 기다릴 필요가 없기때문이다. 이 기법은 소위 단일 페이지 웹 애플리케이션(SPA:Sinlge Page Application, 브라우저에서 실행되기는 하지만 마치 소프트웅어 애필리케이션 같은 느낌을 주는 웹 기반 도구)이 등장하는 계기가 되었다.
Ajax의 활용 예시
Ajax를 이해하는데 도움이 되도록 여기서는 몇가지 관련개념을 활용하는 예시를 살펴보기로 하자.
Ajax 활용예시 ① 라이브검색
라이브 검색(혹은 자동완성)이라고 불리는 기능은 주로 Ajax를 이용한다. 위 사진에서보는 것과 같이 오늘날 검색사이트의 대부분이 사용하는 기술이다. 이 방법은 검색막대나 홈페이지에서 검색어를 입력하는 동시에 검색 결과가 나타나도록 한다.
Ajax 활용예시 ② 사용자 정보 표시
사용자가 생성한 콘튼츠를 사용하는 웹사이트(예를들면, 트위터나 플리커 등)는 독자들의 웹사이트에 본인의 정보(최근 트윗이나 사진 등)를 노출하는 기능을 제공한다. 이를 위해 자신들의서버에 데이터를 수집한다.
이 밖에도 회원가입시 중복아이디일 경우, "이미 사용중인 아이디입니다."를 표시하게하는 기능에서도 활용되고있으며, 온라인쇼핑몰에서 장바구니에 원하는 물품을 추가했을 때 페이지 이동이나 전체 페이지에 대한 새로고침 없이도 물품정보만 추가되는 기기능을 구현하고자 할 때, 이 Ajax를 활용한다.
동기처리모델과 비동기처리모델 - Ajax를 이해하기위해 알아둘 내용들
위 타이틀사진의 배경에는 싱크로나이즈(synchronise)선수들의 모습을 넣었다. 아무이유없이 넣은 것은 아니다. 그래도 우리가 한번 쯤 접해봤을 싱크로나이즈 개념을 생각해보면 동기처리모델과 비동기처리모델에 대해서 빠르고,쉽게 이해할 수 있을 것이라고 생각한다.
동기처리모델(synchronouse processing model)과 싱크로나이즈(synchronise)
동기처리모델을 의미하는 'synchronouse processing model'의 개념은 싱크로나이즈'synchoronise'개념을 떠올리면 이해가 빠르다. 잠시 싱크로나이즈가 어떤 경기인지 생각해보면, 아마 물속에서 선수들이 동일한 동작을 취하며 펼치는 모습이 떠오를 것이다. 싱크로나이즈에서는 선수들이 사전에 약속한 동작들을 함께 펼쳐보여야한다. 어느선수가 먼저 하고, 나중에하고가 없다. 내가 빠른감이있다면 다른동작으로 바로이어가지않고, 다른 선수들을 기다려야한다.
동기처리모델에서 브라우저는 <script>태그를 만나면 스크립트를 로드하고 처리하기 전까지 다른 작업을 중단한다. 싱크로나이즈에서처럼, 브라우저는 급하게 다른작업으로 바로넘어가지않고, <script>태그의 내용이 로드&처리 될때까지 기다려준다.
동기처리모델(synchronouse processing model)개념 요약
브라우저는 스크립트가 서버로부터 데이터를 수집하고 이를 처리한 후 페이지의 나머지 부분이 모두 로드될 때까지 대기한다.2
비동기처리모델(asynchronouse processing model)과 커피전문점의 바리스타
Ajax은 비동기처리모델(asnchoronouse processing model)을 사용한다. 이 단어부터 어려운 비동기처리모델에 대해서 쉽게 이해하기 위해서 커피전문점의 바리스타를 떠올리면 편할 것 같다. 커피전문점 바리스타들(바리스타만 전문으로하는경우는 아니겠지만)은 주문도받고, 직접음료도제조하는데 손님이 여러명일경우, 주문을 받고 커피를 내려놓은뒤 다시 다음 손님의 주문을 받는다.
페이지가 로드되는 동안 Ajax를 사용하면, 바리스타가 그랬던 것처럼 바쁘게 여러작업들을 처리해나간다. 먼저 브라우저는 서버에 데이터를 요청한다. 그리고 일단 데이터를 요청했다면, 페이지의 나머지를 계속해서 로드하고 페이지와 사용자의 상호작용을 처리한다. 이런 방식을 비동기 처리모델(asynchronouse processing model)혹은 넌블로킹 모델(non-blocking model)이라고 한다. 브라우저는 페이지에 표시할 서드파티 데이터를 기다리지 않는다 서버가 데이터를 전달하면 이벤트가 발생한다.(마치 페이지가 로드되면 load이벤트가 발생하는 것과동일하다). 그러면 이벤트는 데이터를 처리할 함수를 호출한다.
페이지가 로드 된 후에 Ajax 사용하기
일단 페이지가 로드된 후에 사용자가 브라우저 창을 통해 보고있는 것을 수정해야 한다면, 일반적으로 전체 페이지를 새로 고치게 된다. 즉, 사용자는 전체페이지가 다운로드되고 브라우저가 이를 렌더링 할 때까지 기다려야한다.
Ajax를 이용하면 페이지의 일부를 수정하고 싶을 때 어느 특정요소의 콘텐츠를 업데이트하면 된다.
그러려면(사용자가 링크를 클릭하거나 폼을 전송할 때와 마찬가지로)이벤트를 가로채서 서버에 새로운 콘텐츠를 요청하는 비동기 요청을 보내면된다.
데이터가 로드되는 동안 사용자는 계속해서 페이지를 사용할 수 있다.
그러다가 서버가 데이터를 전달해주면 ,
Ajax이벤트가 발생하여 다른 스크립트가 서버로부터 전달된 새로운 데이터를 읽고 페이지의 일부를 수정하게 된다.
전체페이지를 새로 고칠 필요가 없기 때문에 데이터는 더 빨리 로드되며, 사용자는 기다리지 않고 계속해서 페이지를 사용할 수 있게 된다.
참고문헌
존 두켓 지음, 장현희 옮김, 『자바스크립트&제이쿼리 - 인터랙티브 프론트엔드 웹 개발 교과서』, 제이펍, 2015
'WEB > Ajax' 카테고리의 다른 글
| ▶자바스크립트 :: Ajax ② - Ajax의 동작방식 (1) | 2015.07.12 |
|---|