Transcript Ajax (Asynchronous JavaScript + XML )

Ajax
(Asynchronous JavaScript
+ XML )
김은옥
목차
• Ajax란 무엇인가?
• Ajax의 현재의 활용과 앞으로의 발전방향
Ajax란 무엇인가?
• 오늘날 애플리케이션을 작성할 시 두 가지
애플리케이션이 있다.
– 데스크톱 애플리케이션
• 데스크톱 애플리케이션은 CD상에 배치된 다음
(또는 웹 사이트에서 다운로드) 컴퓨터에 완전
설치된다. 이 애플리케이션은 인터넷을 이용해
업데이트를 다운로드하기도 하지만 애플리케이션
실행 코드는 데스크톱 상에 상주해 있다.
– 웹 애플리케이션
• 웹 애플리케이션은 웹 서버 상에서 실행되며 웹
브라우저 상에서 접속된다.
Ajax란 무엇인가?
• 두 애플리케이션의 구분은
– 두 애플리케이션에 대한 코드 실행 위치가
어디인가 보다는 애플리케이션의 작동방식 및
애플리케이션과 사용자와의 상호작용방식이
더중요한 요소이다.
–
Ajax란 무엇인가?
• 데스크톱 애플리케이션
– 상당히 빠르고 (컴퓨터 상에서 실행되므로
인터넷 상에서 대기 중인 상태가 안 나온다.)
– 대형 사용자 인터페이스(일반적으로
운영체제와 상호작용)를 갖추며 상당히
동적이다.
– 거의 대기시간 없이 메뉴 및 하위 메뉴를 클릭,
지시, 입력하는등의 작업을 수행한다.
Ajax란 무엇인가?
• 웹 애플리케이션
– 가장 최신 것이며 데스크톱에서는 전혀 얻을 수
없는 서비스를 제공한다.(Amazon.com 및
eBay를 생각해 볼 것.)
– 하지만 웹 애플리케이션 기능으로 인해 서버
응답 대기, 스크린 재생 대기, Request 컴백 및
새 페이지 생성에 관한 대기 기능 등이
부수적으로 사용자들에게 부과된다.
• =>웹 어플리케이션의 문제점이다.
• 이런것을 해결하기 위해 Ajax가 대두가 되었다.
Ajax란 무엇인가?
• Ajax는 'Asynchronous JavaScript + XML'의
줄임말로, '비동기 자바스크립트 XML'란
의미를 갖는다.
• Ajax는 자바스크립트 렌더링 엔진을 이용한
기술로, Ajax를 이용할 경우 플래시나
ActiveX 의존도를 많이 벗어날 수 있다.
– 대표적으로 구글과 야후, 아마존 등의 여러
서비스에서 Ajax 기술을 활용하고 있다. 이들
사이트의 서비스는 ActiveX 를 사용하는
사이트와 달리 윈도의 익스플로러가 아닌 다른
운영체제나 브라우저에서도 사용할 수 있다.
Ajax란 무엇인가?
• Ajax는 데스크톱 애플리케이션 과 웹
애플리케이션의 기능 및 상호작용 간의
차이를 줄여주는 역할을 한다.
– 즉, 데스크톱 애플리케이션에서 사용하는
것처럼 동적 사용자 인터페이스 및 가상
제어기능을 사용한다.
– 그러나 웹 상에서 데스크탑 컴퓨터를 사용할 수
는 없다.
– 데스크톱 애플리케이션에서 사용하는 것처럼의
의미는 무엇인가? =>이것으로 부터 시작한다.
Ajax란 무엇인가?
• 데스크톱 애플리케이션에서 사용하는 것처럼의
의미를 이해하기위해 Ajax 애플리케이션에 포함된
기본기술을 알아보자.
– 웹 양식을 구축하고 애플리케이션 완료 때까지
사용되는 필드를 식별하는 데 HTML을 사용한다.
– 자바 스크립트 코드는 Ajax 애플리케이션을 실행하는
중심 코드며 서버 애플리케이션과의 커뮤니케이션을
용이하게 한다.
– DHTML(동적 HTML)은 웹 양식을 동적으로 업데이트
한다. div, span및 기타 동적 HTML 요소를 사용해
HTML을 마크업 한다.
– 서버에서 복귀(응답)된 HTML 및 (때로) XML 구조를
다루는 데 있어 DOM, 즉 문서 객체 모델(Document
Object Model)을 사용한다.
Ajax란 무엇인가?
• 기존의 웹어플리케이션의 모델과 Ajax웹
어플리케이션 모델의 비교
Ajax란 무엇인가?
• Ajax는 웹프로그래밍의 한 종류로 하나의
기술이 아니라 여러 가지 기술이 복합된
방법론 또는 기술집합체 이다.
• Ajax에 사용된 기술을 보면 XHTML과
CSS를 사용한 표준 설계에 동적 표시,
DOM을 사용한 상호작용, XML과 XSLT를
이용한 자료 교환과 조종,
XmlHttpRequest을 이용한 비동기 자료
검색, 모든 것을 결합시켜 정리해주는
자바스크립트 등이 모두 포함되어 있다.
Ajax란 무엇인가?
• XML: 브라우저와 서버 사이의 통신에 사용
• 자바스크립트: 사용자가 보는 브라우저 화
면의 인터페이스로사용
• 따라서 클라이언트 와 서버의 관계가 "브라
우저(클라이언트) -웹서버"의 구조 에서
Ajax가 중간에 위치한 "브라우저- Ajax엔진
(클라이언트)- 웹서버"의 구조로 바뀐다.
Ajax란 무엇인가?
• 기존의 웹어플리케이션 방식의 처리순서
– 웹 애플리케이션에서 사용자는 입력폼(회원가
입폼, 글쓰기폼등등..)에 내용을 모두 기입후 제
출 버튼을 클릭한다.
– 그러면 사용자가 입력한 전체내용을 서버에 보
내며 서버는 처리과정을 통해 양식을 스크립트
(일반적으로 PHP, JSP, ASP 또는 CGI 과정/이
와 유사한 과정)에 전송한다.
– 스크립트를 실행할 때 스트립트를 통해 완전히
새로운 페이지가 사용자에게 전송된다. =>결과
를 HTML문서를 생성해서 보낸다.
Ajax란 무엇인가?
• 기존의 웹어플리케이션 방식의 문제점
– 서버 상의 스크립트/프로그램이 처리되면서 새
로운 사용자입력폼을 다시 보내는 동안 사용자
는 대기해야 한다.
– 서버로부터 데이터를 다시 받을 때까지는 스크
린 상에 아무 것도 없게 되며 결국 상호대화성은
낮게 된다.
– 사용자는 즉각적으로 응답을 받지 못한다
• 즉, 데스크톱 애플리케이션 상에서 작업하는것과 같
은 빠른 응답을 받지 못하게 된다.
Ajax란 무엇인가?
• Ajax는 근본적으로 자바 스크립트 기술 및 웹 양식
및 서버 간의 XMLHttpRequest 객체를 결합한다.
– XMLHttpRequest: MSXML Parser의 기능 중 하나로
XML Document를 URL을 통해서 읽어들이기 위해서
제공되는 객체
• 사용자가 입력폼에 내용을 기입할 때 데이터는
직접 서버 스크립트에 전송되지 않고, 자바
스크립트 코드에 전달된다.
• 그대신 자바 스크립트 코드는 입력폼의 데이터를
포착해 Request(요청)를 서버에 전송한다. 이
과정이 일어나는 동안, 사용자 스크린 상의
입력폼은 깜빡이거나 사라지거나 정지하지
않는다.
Ajax란 무엇인가?
• 즉, 자바 스크립트 코드는 사용자 몰래
Request(요청)를 전송하며, 사용자는
Request가 만들어졌는지도 알지 못한다.
• 게다가 Request를 비동기적으로 전송하기
때문에 더욱 빠르다.
– 비동기적이라는 것은 자바 스크립트에서 서버
응답을 그냥 기다리지 않는다는 것을 의미한다.
따라서, 사용자는 데이터를 계속 기입하고
화면을 이동하고 웹 애플리케이션을 사용한다.
Ajax란 무엇인가?
• 그런 다음 서버는 자바 스크립트 코드에 데이터를
다시 전송한다.
– 아직 사용자는 입력폼에 계속입력하는 중이다.
• 자바 스크립트 코드에서는 데이터와의
상호기능을 결정하며 연속적으로 입력폼 필드를
업데이트 하면서, 웹 애플리케이션에 즉각적인
응답을 준다.
– 결국 사용자는 양식을 제출/재생하는 작업 없이 새로운
데이터를 얻게 된다.
• 자바 스크립트 코드는 데이터를 얻고 계산도
수행하며 또 다른 Request(요청)를 전송한다.
– 이런 모든 과정은 사용자 개입 없이도 된다!
Ajax란 무엇인가?
• 이것이 바로 XMLHttpRequest 객체의
장점이다.
• XMLHttpRequest 객체는 서버와
커뮤니케이션을 주고받고 사용자는 그
과정에서 벌어지는 과정을 알지 못한다.
• 이로 인해 데스크톱 애플리케이션과
마찬가지로 동적, 상호 반응적인 고도의
양방향(상호대화성)을 경험하게 된다.
– 그 속에 인터넷의 모든 장점이 담겨 있다.
Ajax란 무엇인가?
• 자바 스크립트에 대한 부가사항 :일단
XMLHttpRequest에 대해 다루게 되면 나머지 자바
스크립트 코드는 상당히 평범한 것들이다. 다음과
같은 기본적인 작업에 자바 스크립트 코드를
이용한다.
– 양식 데이터 얻기: 자바 스크립트 코드로 HTML
양식에서 데이터를 꺼내 이를 서버에 전송하는 작업이
간단해진다.
– 양식 상의 값 변환: 필드 값 설정에서 연속적인 이미지
교체작업에 이르는 양식 업데이트 작업 또한 간단하다.
– HTML 및 XML 구문분석: 자바 스크립트 코드를 이용해
DOM을 처리하고 서버에서 다시 전송하는 HTML 양식
및 임의의 XML 데이터에 관한 구조를 다루게 된다.
Ajax란 무엇인가?
• DOM으로 종료하기. (마지막에는 필요하다.)
– JavaScript 코드와 서버 사이에 XML을
이리저리 전송하고 HTML 양식을 변화시킬 때
DOM 이 필요하다.
Ajax란 무엇인가?
• Ajax 애플리케이션에 포함된 기본기술은 다음과
같다.
– 웹 양식을 구축하고 애플리케이션 완료 때까지
사용되는 필드를 식별하는 데 HTML을 사용한다.
– 자바 스크립트 코드는 Ajax 애플리케이션을 실행하는
중심 코드며 서버 애플리케이션과의 커뮤니케이션을
용이하게 한다.
– DHTML(동적 HTML)은 웹 양식을 동적으로 업데이트
한다. div, span및 기타 동적 HTML 요소를 사용해
HTML을 마크업 한다.
– 서버에서 응답된 HTML 및 (때로) XML 구조를 다루는
데 있어 DOM, 즉 문서 객체 모델(Document Object
Model)을 사용한다.
Ajax란 무엇인가?
• 주의: Ajax에서 Microsoft 브라우저
및Mozilla 와 비 Microsoft 브라우저에서
사용자의 요청을 처리하는
XMLHttpRequest 객체를 생성하는 방식이
다르다.
– 따라서 브라우저의 종류나 MSXML파서의
종류에 따라 생성하는 방법이 다르다.
Ajax의 현재의 활용과 앞으로의
발전방향
• 현재 Ajax의 활용상황
– 온라인 상의 공유를 통한 애플리케이션의 사용
• 온라인 오피스 기능
– http://www.writely.com - 온라인 워드프로세서. 작성 후
공유하거나 컴퓨터에 Word, HTML, ZIP 형식으로 저장 가능.
– http://www.planzo.com - 일정관리, 다른 사람들과 일정 공유 가능.
드래그 앤 드롭, RSS 피드 지원.
– http://www.kiko.com - 일정 관리, 드래그 앤 드롭, 레이블 지원.
– http://www.calendarhub.com - 또 다른 일정 관리 사이트.
– http://www.rememberthemilk.com - 할일 목록 리스트. 메신저로
리마인더 수신 가능.
– http://typetester.maratz.com - 폰트를 간편하게 비교할 수 있음.
– http://www.numsum.com - 온라인 스프레드시트.
– http://sandbox.sourcelabs.com/livemarks/ - del.icio.us의 새로
추가된 북마크를 실시간으로 볼 수 있음.
– http://www.squarefree.com/htmledit/ - 실시간 HTML 편집기
Ajax의 현재의 활용과 앞으로의
발전방향
• 기타
– http://del.icio.us/ 북마크 관리
http://flickr.com/ 사진 관리
http://basecamphq.com/ 프로젝트 관리
http://backpackit.com/ 개인 정보 정리
http://writeboard.com/ 공동 게시판
http://tadalist.com/ 할 일 목록
http://odeo.com/ 포드캐스트 포털
– Ajax 로 구현한 http://tryruby.hobix.com/
ruby 인터프리터쉘을 웹에서 바로 사용
– IE7.0을 위한 기술
• IE7.0에서는 ActiveX컨트롤을 지원하지 않는다.
이것을 Ajax가 대치한다.
Ajax의 현재의 활용과 앞으로의
발전방향
• 향후 발전방향
– 현재 웹에서 떠오르는 최대 화두인 Web2.0을
지원하는 기술로 사용되고 있다.
– 따라서 Web2.0이 더욱 발전할 가능성이 있는
만큼 동반적으로 사용범위가 더욱 확대
될것으로 예상된다.
• 참고: Web2.0은 사용자들이 단순히 제공되는 정보를
받아들이는 수동적인 Web1.0에 대비되어
사용자들이 자발적으로 정보의 제공자가 되어
서비스를 제공하는 업체와 상호보완협력하는 관계로
발전 => 해당업체의 가치증대
참고
• XMLHttpRequest 객체 생성하는 방법
– Mozilla및 비IE 웹브라우저
• <script language="javascript" type="text/javascript">
var xmlHttp = new XMLHttpRequest(); </script>
– IE
• var xmlHttp = false; try { xmlHttp = new
ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try
{ xmlHttp = new
ActiveXObject("Microsoft.XMLHTTP"); } catch (e2)
{ xmlHttp = false; } }