Ajax 활용 – Ajax 개요 2008 고급 XML 프로그래밍 임순범

1장. Ajax 개념 목차 들어가기 전에 1. 들어가기 전에, 2. Ajax란?, 3. New Approach 4. Ajax가 주는 메시지, 5. Ajax 기술, 6. Ajax 웹 어플리케이션 모델, 7. 사용자 중심 애플리케이션 들어가기 전에 표준 표준을 준수하지 않으면 업그레이드에 많은 시간과 비용 브라우저의 사례 Ajax는 W3C 표준에 근거 하루아침에 사라지지 않을 것 브라우저만 있으면 Ajax 어플리케이션 개발 가능

Ajax 란? Ajax 개발자 중심 패러다임 Jesse James Garrett, 2005.2, 에세이 – 구글 사례 소개 “Ajax: A New Approach to Web Application” Asynchronous + JavaScript + CSS + DOM + XML + XMLHttpRequest 개발자 중심 패러다임 새로운 기술이 아니라 기존의 기술 활용 기존 클라이언트/서버 환경 => 웹 개발시 새로운 언어를 공부해야 Ajax는 기존의 노하우/기술력을 더욱 발전 => 개발자가 주도적

소프트웨어 세계를 바꾸는 Ajax Ajax가 실용성과 합리성을 바탕 접근의 용이성 : 지금의 실력을 응용하고 조금만 추가 고객을 위한 합리성, 현존 기술의 장점을 취하는 실용성 접근의 용이성 : 지금의 실력을 응용하고 조금만 추가 JavaScript, XML 기본개념, XHTML, CSS + XMLHttpRequest 역동적인 웹 애플리케이션 데이터 처리만 서버에서, 유저 인터페이스는 클라이언트에서 유려한 유저 인터페이스 데스크 탑의 유저 인터페이스 + 웹의 유저 인터페이스 실시간 데이터 제공 대부분 경우 비동기 방법, 데이터 처리 형태(Text, XML, JSON, CSV) 사용자 만족

New Approach 생각의 전환을 요구 Ajax가 주는 메시지 특별히 어려운 기술이 아니다 서비스 마인드를 요구 사용자의 행동에 즉시 처리하는 서비스 Ajax가 주는 메시지 끊임없이 변화하는 기술=>쫓아가는 모습이 아니라 응용하는 모습 고객을 만족시키기 위해 애플리케이션이 할 일을 고민 사용자는 고차원적인 기술이 의미 없다. Ajax 개발에 필요한 소프트웨어는 오픈소스 형태

Ajax 기술 Ajax 구현 기술 Ajax 요소 기술 : 브라우저가 요소 기술을 내장 기술표준과 W3C 브라우저마다 차이점 => 크로스 브라우저 체크 필요 XHTML, CSS standards-based presentation using XHTML & CSS; DOM dynamic display and interaction using the Document Object Model; XML, XSLT data interchange and manipulation using XML and XSLT; XMLHttpRequest asynchronous data retrieval using XMLHttpRequest; JavaScript and JavaScript binding everything together. 유저 인터페이스 XHTML, DHTML, CSS, XSLT, DOM 통합제어 / 통신 JavaScript, XMLHttpRequest 데이터 처리 XML, JSON, CSV

Ajax 웹 애플리케이션 모델 Ajax 모델의 형태 전통적인 웹 Ajax 클릭 할 때마다 HTML 문서 요청하여 해석 데이터 처리를 위해 서버와 통신 비동기 방식으로 데이터만 전송 받음 필요시 동기통신 : JSON, CSV, Text 클라이언트에서 HTML+CSS 해석

Ajax 엔진 Asynchronous HTML 문서처리 부분을 제외한 모든 엔진 (추상적) XMLHttpRequest 객체 서버처리 진행상태를 기록 Ajax 엔진이 서버와 통신 브라우저는 서버와 무관 유저 인터페이스만 수행 데이터처리 등 비즈니스 로직은 서버가 담당 C#, Java 등으로 개발

Ajax 모델과 MVC 패턴 MVC(Model-View-Control) : 객체지향 컴포넌트 기반 개발방법 Control : View 와 Model을 제어 전통적인 MVC 패턴흐름 예 View : JSP (사용자 확인 버튼) Control : 서블릿 (EJB 호출) Model : EJB (회원정보 검색) View : JSP (화면 표시) => 실행주체는 JSP

Ajax MVC 패턴 Ajax MVC 패턴 흐름 예 클라이언트에서 View와 Control 수행 JSP 필요 없음 Control : Ajax엔진(서블릿호출) Control : 서블릿 (EJB 호출) Model : EJB (회원정보 검색) Control : 서블릿 => Ajax엔진 View : 브라우저 (화면 표시)

사용자 중심 애플리케이션 Ajax는 유저 인터페이스를 중심에 두고 있다. Ajax는 인간 중심의 애플리케이션을 유도한다

2장. Ajax 사례 네이버 서제스트 Google Suggest Google Maps 참고 사이트 구글 검색 : 알파벳 순서 아님 (검색 빈도수 => 광고가능) Google Maps 화면 속도, 광고 가능 참고 사이트 www.programmableweb.com