AJAX 기본 개념

 

★ AJAX : Asynchronous JavaScript + XML

    JavaScript를 사용한 비동기 통신, 클라이언트와 서버간에 XML 데이터를 주고받는 기술

1. AJAX 장점

• 페이지 이동 없이 고속으로 화면 전환
• 서버 처리를 기다리지 않고 비동기 요청이 가능
• 서버 측 처리를 각 PC에 분산 가능
• 수신하는 데이터의 양을 줄임  

 

   

2. AJAX 단점

• 크로스 브라우저화의 노하우 필요
• AJAX를 사용하지 못하는 브라우저
• 오픈 소스이므로 차별화가 어려움
• 보안에 더욱 신경을 써야 함  

   

3. 기존방식과 AJAX의 차이 

 1) 기존방식

 - 웹 브라우저가 웹 서버에 요청 전송

- 웹 서버는 JSP 등의 서버 어플리케이션을 사용해 사용자의 요청 처리 후 결과를 HTML로 생성해서 웹 브라우저에 전송

- 웹 브라우저는 응답으로 받은 HTML을 분석한 뒤 그 내용을 화면에 그림 

- 결과적으로 웹 브라우저가 웹 서버와 통신을 하고 요청 결과는 HTML로 생성되고 사용자 입장에서는 페이지 이동이 발생함

 

 

   

2) AJAX방식 

- 사용자가 이벤트를 발생 > 자바스크립트는 DOM을 사용해서 필요한 정보를 구한 뒤, XMLHttpRequest 객체를 통해서 웹 서버에 요청을 전달

- 웹 서버는 XMLHttpRequest로부터의 요청을 알맞게 처리후 결과를 XML이나 단순 Text을 생성해서 XMLHttpRequest에 전송

- 서버로부터 응답이 도착하면 XMLHttpRequest 객체는 자바스크립트에 도착 사실을 알고 자바스크립트는 응답 데이터와 DOM을 이용해 사용자 화면에 반영 

- 결과적으로 사용자 입장에서는 페이지 이동이 발생되지 않고 페이지 내부 변화만 일어남 

 

 

   

 

4. AJAX의 주요 구성 요소 

 - XMLHttprequest : 웹서버와 통신을 담당함. 사용자의 요청을 웹서버에 전송 및 웹서버로부터 받은 결과를 웹브라우저에 전달함
- DOM : 문서의 구조를 나타냄, 폼 등의 정보나 화면 구성을 조작할때 사용함
- CSS : 글자색,배경색,위치,투명도 등 UI관련 부분을 담당
- 자바스크립트 : 사용자가 마우스를 드래그하거나 버튼을 클릭하면 XMLHttpRequest객체를 사용해 웹서버에 요청을 전송함.
XMLHttpRequest 객체로부터 응답이 오면 DOM, CSS등을 사용해 화면을 조작함.

 

 

출처 - http://blog.naver.com/jhoh86?Redirect=Log&logNo=10133727118

Ajax(Asynchronous JavaScript and XML, 에이잭스)는 대화식 웹 애플리케이션의 제작을 위해 아래와 같은 조합을 이용하는 웹 개발 기법이다.

• 표현 정보를 위한 HTML (또는 XHTML) 과 CSS
• 동적인 화면 출력 및 표시 정보와의 상호작용을 위한 DOM, 자바스크립트
• 웹 서버와 비동기적으로 데이터를 교환하고 조작하기 위한 XML, XSLT, XMLHttpRequest (Ajax 애플리케이션은 XML/XSLT 대신 미리 정의된 HTML 이나 일반 텍스트, JSON, JSON-RPC를 이용할 수 있다).

DHTML이나 LAMP와 같이 Ajax는 자체가 하나의 특정한 기술을 말하는 것이 아니며, 함께 사용하는 기술의 묶음을 지칭하는 용어이다. 실제로 AFLAX와 같이 사실상 Ajax에 바탕을 두고 있는 유사/복합 기술들이 속속 나타나고 있다.

Ajax 애플리케이션은 실행을 위한 플랫폼으로 위에서 열거한 기술들을 지원하는 웹 브라우저를 이용한다. 이것을 지원하는 브라우저로는 모질라 파이어폭스, 인터넷 익스플로러, 오페라, 사파리,구글 크롬 등이 있다. 단, 오페라는 현재 XSL 포맷팅 객체와 XSLT 변환을 지원하지 않는다.^[1]

목차   [숨기기]  1 기존 기술과의 차이점 2 Ajax의 보급 3 Ajax라는 용어에 대한 비판 4 Ajax와 접근성 5 웹 브라우저 5.1 Ajax를 지원하는 웹브라우저 5.2 Ajax를 지원하지 않는 웹브라우저 6 주석 7 링크 7.1 Ajax 프레임워크

[편집]기존 기술과의 차이점

기존의 웹 애플리케이션은 브라우저에서 폼을 채우고 이를 웹 서버로 제출(submit)을 하면 하나의 요청으로 웹 서버는 요청된 내용에 따라서 데이터를 가공하여 새로운 웹 페이지를 작성하고 응답으로 되돌려준다. 이때 최초에 폼을 가지고 있던 페이지와 사용자가 이 폼을 채워 결과물로서 되돌려 받은 페이지는 일반적으로 유사한 내용을 가지고 있는 경우가 많다. 결과적으로 중복되는HTML 코드를 다시 한번 전송 받게 됨으로써 많은 대역폭을 낭비하게 된다. 대역폭의 낭비는 금전적 손실을 야기할 수 있으며 사용자와 대화(상호 반응)하는 서비스를 만들기 어렵게도 한다.

반면에 Ajax 애플리케이션은 필요한 데이터만을 웹서버에 요청해서 받은 후 클라이언트에서 데이터에 대한 처리를 할 수 있다. 보통 SOAP이나 XML 기반의 웹 서비스 프로토콜이 사용되며, 웹 서버의 응답을 처리하기 위해 클라이언트 쪽에서는 자바스크립트를 쓴다. 웹 서버에서 전적으로 처리되던 데이터 처리의 일부분이 클라이언트 쪽에서 처리 되므로 웹 브라우저와 웹 서버 사이에 교환되는 데이터량과 웹서버의 데이터 처리량도 줄어들기 때문에 애플리케이션의 응답성이 좋아진다. 또한 웹서버의 데이터 처리에 대한 부하를 줄여주는 일이 요청을 주는 수많은 컴퓨터에 대해서 일어나기 때문에 전체적인 웹 서버 처리량도 줄어들게 된다.

장점

• 페이지 이동없이 고속으로 화면을 전환할 수 있다.
• 서버 처리를 기다리지 않고, 비동기 요청이 가능하다.
• 수신하는 데이터 량을 줄일 수 있고, 클라이언트에게 처리를 위임할 수도 있다.

단점

• Ajax를 쓸 수 없는 브라우저에 대한 문제가 있다.
• Http클라이언트의 기능이 한정되어 있다.
• 페이지 이동없는 통신으로 인한 보안상의 문제
• 지원하는 Charset이 한정되어 있다.
• 스크립트로 작성되므로 Debugging이 용이하지 않다.
• 요청을 남발하면 역으로 서버 부하가 늘 수 있음.

[편집]Ajax의 보급

이것은 이미 존재하던 기술이었지만, 2005년 초에 있었던 몇 가지 사례 이후로 인기를 끌기 시작했다. 먼저 구글이 구글 그룹스를 포함한 훌륭한 대화형 애플리케이션의 기반을 위해 비동기식 통신을 이용한 것이다. 두 번째로는 Ajax라는 용어가 AJAX: A new approach for a new application^[2] 기사에서 등장한 것으로, 이후 빠르게 대중화되어 이 기법의 보급에 도움이 되었다.

현재 대화형 웹 페이지를 위한 도구로서 Ajax를 이용하는 애플리케이션들이 급격히 늘어나고 있으며, 이는 부분적으로 이용할 수 있는 애플리케이션 툴킷(예: Ruby on Rails, DWR)이 늘어나 프로그래머들이 구현하기가 쉬워진 때문이다.

대한민국에서도 네이버와 다음등을 비롯한 포털 업체에서 이 기술을 도입하고 있다.

[편집]Ajax라는 용어에 대한 비판

Ajax라는 용어에 대해서 비판이 있어 왔는데, 어댑티브 패스(Adaptive Path)의 컨설턴트는 이 조어를 만든 사람^[3]이 이미 있는 기법을 마케팅 수단(과 밈)으로써 사용하고 있다고 주장했다 ^[4][5] [6].

Ajax 기술이 이전에는 일반적인 이름이 없었기 때문에 이 용어 자체가 발전이 될 수 있었다. 그러나 이 기술을 이용해 가장 특출한 애플리케이션들을 만든 사람 중 하나인 한 구글 엔지니어가 그들이 사용한 기술이 '자바스크립트'라고 간주한다는 얘기도 있다. ^[7]

Ajax는 소프트웨어 개발에 대한 새로운 접근방식이 아니다. 보다 높은 관점에서 Ajax는 MVC 패턴의 뷰와 컨트롤러에 해당하는 기술이며, 이런 방식은 이전의 프로그래밍 환경인 델파이, MFC,MP3, 비주얼 베이직, 오라클 ADF, 윈도 Forms 등에서 이미 많이 사용하고 있던 것이다. 예를 들어 WebDAV를 사용하는 마이크로소프트 아웃룩 웹 액세스와 브라우저에서 직접 웹 서비스를 이용하는 웹 기반의 ERP 시스템 P2plus 같은 것들이 해당한다. 그러나 이전에는 표준적인 통신 모델이 없었기 때문에, 이들은 모두 독자적인 확장을 이용한다.

Ajax의 새로운 양상은 마이크로소프트의 인터넷 익스플로러만을 고려하면 되었을 예전의 기술과는 달리 이 같은 애플리케이션을 이용할 수 있는 브라우저가 다양해 졌다는 점이다.

[편집]Ajax와 접근성

Ajax 사용에 있어서, Ajax 기술을 지원하지 않는 브라우저를 위한 대체물을 만드는 것은 거의 힘들다. 이 같은 한계는 WAI 접근성 지침에 거스르는 측면이 있다.

한편, 웹 개발자들은 때때로 Ajax를 단순히 웹 페이지의 일부분을 대체하기 위해 사용한다. 비 AJAX 사용자가 전체 페이지를 불러오는 것에 비해 Ajax 사용자는 페이지의 일부분만을 불러올 수가 있다. 이것으로 개발자들이 비 AJAX 환경에 있는 사용자의 접근성을 포함한 경험을 보호할 수 있으며, 적절한 브라우저를 이용하는 경우에 전체 페이지를 불러오는 일 없이 응답성을 향상시킬 수 있다.

[편집]웹 브라우저

[편집]Ajax를 지원하는 웹브라우저

참고: 이 목록은 포괄적이며, 브라우저 특징에 따라서 Ajax 애플리케이션이 지원이 다를 수 있다.

• 마이크로소프트 인터넷 익스플로러 5.0 이상, 기타 인터넷 익스플로러를 기반으로 한 브라우저들 (맥 오에스 버전은 미지원 )

• 게코 기반 모질라, 모질라 파이어폭스, 시몽키, 에피파니, 갈레온 브라우저 그리고 넷스케이프 7.1 이상

• KHTML 3.2 이상, 컹커러 3.2 이상 그리고 애플 사파리 1.2 이상 포함
• 오페라 브라우저 8.0 이상, 오페라 모바일 브라우저 8.0 이상
• 구글 크롬

[편집]Ajax를 지원하지 않는 웹브라우저

참고: 이 목록의 브라우저는 확실히 Ajax를 지원하지 않는다.

• 오페라 7 이하
• 마이크로소프트 인터넷 익스플로러 4.0이하
• 텍스트 기반의 브라우저 링크스, w3m
• 시각장애인을 위한 브라우저
• 1997년 이전 브라우저

[편집]주석

1. ↑ Opera: Web specifications support
2. ↑ adaptive path » ajax: a new approach to web applications
3. ↑ AJAX: Web 'shift' or business as usual? | News Blog - CNET News
4. ↑ Dare Obasanjo aka Carnage4Life - SOA, AJAX and REST: The Software Industry Devolves into the Fashion Industry
5. ↑ On Ajax and Marketing Technologies
6. ↑ Slashdot | Building Richly Interactive Web Apps with Ajax
7. ↑ Tech News, Blogs, Product Reviews & IT Resources - ZDNet Asia

[편집]링크

• Ajax/Concept RedWiki에 있는 Ajax의 개요 및 소개
• Ajax vs. AJAX Ajax 표기에 관한 Jesse 의 의견
• Ajax Impact Ajax Portal
• Ajaxian Ajax 관련 논의를 위한 블로그
• AJAXKorea Community AJAX 커뮤니티 정보공유
• PHPSCHOOL Ajax Tip&Tech, 기술문서, 뉴스등 정보교환과 기술논의를 위한 공간
• BACKBASE Ajax Applications tool

[편집]Ajax 프레임워크

• Prototype 널리 알려져 있는 AJAX 프레임워크
• script.aculo.us Prototype을 기반으로 하는 여러 인터페이스 제공
• jQuery prototype만큼 많이 사용되는 AJAX 프레임워크
• JQuery UI JQuery을 기반으로 하는 여러 인터페이스 제공
• dojo 다양한 화면효과, 위젯등을 제공
• Google Web Toolkit 구글에서 배포중인 AJAX 프레임워크
• ASP.NET AJAX MS에서 공식 개발된 ASP.NET 지원용 AJAX 프레임워크
• YUI Yahoo User Interface