이제 모르는 사람이 없을 정도로 잘알려지 '구글맵' http://maps.google.com/ 다시봐도 신기할 따름이다.
구글맵을 보면서 Ajax의 힘은 대단하다라는 생각을 볼때마다 하게 된다.물론 네이버의 맵도 훌륭하지만 액티브엑스 [ActiveX] 를 설치해야하며 좀 느리다는게 단점이다.(네이버 맵이 Ajax로 바뀐지 꽤 됐군요 ㅎㅎ 글수정합니다.)
구글맵은 액티브엑스 [ActiveX] 를 설치하지 않고도 실시간으로 화면상에 나타내주니 정말 사용자들은 고마울 따름이다.
Ajax 은 뭔가 잠깐 다시 한번 살펴보기로 하자.!
정의
XHTML, CSS, 자바스크립트 등의 기술이 고루 섞여 대화형 웹어플리케이션을 만들 수 있게 하는 웹프로그래밍 기술의 복합체. 비동기식 자바스크립트와 XML(Asynchronous JavaScript And XML)의 줄임말이다.
특징
Ajax는 XHTML, CSS, JavaScript, Document Object Model, XMLHttpRequest 등의 기술로 이루어진다. 세 특징을 소개하자면 다음과 같다. 우선 Ajax는 XML기반의 웹서비스 언어를 사용하고 클라이언트에서는 자바스크립트를 가지고 서버에 응답한다. 그 결과 브라우저와 웹서버 간의 데이터량이 줄어들어 어플리케이션의 응답성이 향상되고 웹서버의 부담이 줄어들게 된다. 두 번째 특징은, 웹에서 해당 서비스를 쓰는데 있어 별도로 프로그램을 설치(예:액티브엑스, 플래시)하거나 해당 기능을 갖춘 새 창을 띄울 필요 없다는 것이다. 일반 브라우저 화면에서 그대로 이용할 수 있다. 마지막으로 Ajax는 사용자로 하여금 직접 웹 상의 자료의 위치를 편집하는 등 커스토마이징을 가능하게 해준다.
적용 사례 및 이슈
구글의 지메일, 구글맵이 Ajax를 구현한 서비스이다. 사진공유사이트인 플릭커(Flickr)는 사진 미리보기 기능에서 플래시를 빼고 Ajax로 전환했다. 차세대 인터넷 Web 2.0에 부합하는 혁신적인 기술로 평가받기도 하나, 브라우저에 따라 XMLHttpRequest를 사용할 수 없는 경우도 있고 복잡성이 문제가 되기도 하므로 아직 논란이 존재한다.
Ajax란 웹클라이언트 화면 제어를 보다 세밀하게 하기위한 기술로써,
JavaScript + 통신객체(XMLHttpRequest) + 통신데이터(XML) 세가지가 주요 기술요소며,
JavaScript 에서 웹서버에 비동기통신을 통하여 데이터를 얻어서 화면에 반영해주는 방식으로 동작합니다.
예를들어 로그인화면이 있다고 해보죠.
일반 웹프로그램이라면, ID/Password를 입력 받은 후 웹서버로 HTTP 요청을 보내고 로그인 결과를 받아서 화면에 보여줍니다. 이과정에서 페이지가 한번 껌뻑하면서 로그인초기화면에서 로그인결과화면으로 화면이 변경되게 됩니다.
Ajax로 프로그래밍한다면, ID/Password를 입력 받은 후 XMLHttpRequest객체를 이용하여 웹서버로 HTTP 요청을 보내고 로그인 결과를 받고, 그 결과를 이용해 JavaScript로 화면 다시 그립니다. 이때 전체 HTML을 이용하여 전체화면을 다시그리는 것이 아니라 JavaScript가 로그인 초기화면을 그대로 사용하면서 프로그램적으로 화면을 재구성하기 때문에 화면 깜박임이 없습니다.
다른 예로 실시간 랭킹을 보여주는 화면을 생각해 보죠
일반 웹프로그램이라면 주기적으로 랭킹화면을 Refresh 하는 방법을 사용해야 합니다. 매번의 주기적인 요청때마다 랭킹화면 전체를 받아서 화면에 새로 뿌려야하므로, 새 화면이 나타날때 마다 화면이 껌뻑이게 되고, 브라우저 하단 상태바의 프로그래스바가 동작하고, 약간의 랙이 나타나는 등, 새로고침하면 나타나는 현상이 사용자에게 보여집니다.
Ajax로 프로그래밍한다면, 주기적으로 랭킹데이터를 XMLHttpRequest객체를 이용하여 웹서버로부터 받고, JavaScript가 이 데이터를 이용해서 랭킹화면을 재구성합니다. 이 경우 JavaScript가 화면을 재구성하기 때문에 새로고침하면 나타나는 현상이 전혀없이 랭킹화면이 부드럽게 바뀌게됩니다.
아마 네이버 검색어 입력시 나타나는 검색어 입력완성기와 실시간 랭킹 박스도 Ajax를 이용하여 구현되었을 것으로 생각됩니다.
AJaX(Asynchronous JavaScript and XML)은 대화식 웹 어플리케이션의 제작을 위해 자바스크립트, XML을 이용하는 웹 개발 기법으로, 데이터의 비동기 전송을 가능하게 함
■ AJaX(Asynchronous JavaScript and XML)
▶ A is for “Asynchronous”
- 동기, 비동기 응답 가능
- 동기식, 비동기식 정보 요청시 웹페이지의 리프레쉬(Reflesh) 없이 업데이트 가능
- 사용자는 비동기식 처리 동안 다른 프로세스의 업무 처리 가능
▶ J is for “JavaScript”
- 일반적으로 자바스크립트는 클라이언트 사용환경에 영향
- 서버통신은 다른 언어를 사용하여 HTTP 통신을 적용 할 수 있음(Java Servlets, Ruby, CGI 등)
▶ X is for “XML”
- 답변요청 및 답변 메시지는 XML 형태
- 다양한 형태의 텍스트를 포함
■ 전송기술
▶ XMLHttpRequest
- 동적 xml 데이터 통신 가능하게 하며, AJaX를 가능하게 한 가장 기본적인 기술
- Browser에 내장된 XML Parser의 DOM API, XSLT와 같은 기능과 DHTML, JavaScript의 막강한 기능을 이용하면 기존의 웹 UI와는 사뭇 다른 C/S 또는 RIA(Rich Internet Applications)과 비슷한 UI를 구성할 수 있음
▶ REST(REpresentational State Transfer)
- 별도의 추가적인 기능이나 모델없이 URL로 명기된 자원을 HTTP로 조작할 수 있는 기술
- 분산 하이퍼미디어 시스템을 위한 아키텍처로서 등록저장소에서 제공하는 서비스를 URL 을 통해 접근 가능하도록 하는 것
■ AJaX의 장점
▶ 액티브엑스나 자바애플릿을 이용하지 않고도 실시간 접속자 체크, 실시간 쪽지 등 기능 구현
▶ 페이지를 새로고침 할 필요도 없고 실시간 정보 제공
▶ 서버측에서도 필요한 데이터만을 전송하여 불필요한 트래픽 감소
Ajax 로 만든 사이트는 다음과 같다.
이밖에 Ajax 로 만든 사이트들이 계속적으로 나오고 있으며, 훌륭한 웹사이트들을 몸소 느낄수가 있다.
