Ajax - Asynchronous JavaScript and XML
- Posted at 2008/02/21 15:29
- Filed under 일함서/날위한나으강좌ㅋ
아래의 내용은 회사 내부발표자료를 준비하면서 직접 작성한 PPT파일 에서 발췌한 내용들이며, PPT파일을 만들 당시에 참고한 자료의 내역들이 없는관계로 부득이하게 첨부하지 못했습니다.
-2007.03.28 일날 작성된 문서입니다. -
Ajax ( Asynchronous JavaScript and XML )
◈ 대화식 웹 어플리케이션의 제작을 위해 아래와 같은 조합을 이용하는 웹 개발 기법이다.
- HTML (또는 XHTML) 과 CSS , DOM, 자바스크립트 , XML, XSLT, XMLHttpRequest
◈ Ajax는 자체가 하나의 특정한 기술을 말하는 것이 아니며, 함께 사용하는 기술의 묶음을 지칭하는 용어이다.
◈ Ajax 어플리케이션은 실행을 위한 플랫폼으로 위에서 열거한 기술들을 지원하는 웹 브라우저를 이용한다, 이것을 지원하는 브라우저로는 모질라 파이어폭스, 인터넷 익스플로러, 오페라, 사파리 등이 있다, 단, 오페라는 현재 XSL 포맷팅 객체와 XSLT 변환을 지원하지 않는다.


![]()

Difference point of existing technique and
◈ 장점
- 페이지 이동없이 고속으로 화면을 전환할 수 있다.
- 서버 처리를 기다리지 않고, 비동기 요청이 가능하다.
- 수신하는 데이터 량을 줄일 수 있고, 클라이언트에게 처리를 위임할 수도 있다.
◈ 단점
- Ajax를 쓸 수 없는 브라우저에 대한 문제가 있다.
- Http클라이언트의 기능이 한정되어 있다.
- 페이지 이동없는 통신으로 인한 보안상의 문제
- 지원하는 Charset이 한정되어 있다.
- 스크립트로 작성되므로 Debugging이 용이하지 않다.
- 요청을 남발하면 역으로 서버 부하가 늘 수 있음
Ajax
◈ 지원가능
- 마이크로소프트 인터넷 익스플로러 5.0 이상, 기타 인터넷 익스플로러를 기반으로 한 브라우저들 (Mac OS 버전은 미지원 )
- 게코 기반 모질라, 모질라 파이어폭스, 씨몽키, 에피파니, 갈레온 브라우저 그리고 넷스케이프 7.1 이상
- KHTML 3.2 이상, 컨커러 3.2 이상 그리고 애플 사파리 1.2 이상 포함
- 오페라 브라우저 8.0 이상, 오페라 모바일 브라우저 8.0 이상
◈ 지원 불가능
- 오페라 7 이하
- 마이크로소프트 인터넷 익스플로러 4.0이하
- 텍스트 기반의 브라우저 링크스, w3m
- 시각장애인을 위한 브라우저
- 1997년 이전 브라우저
The opinion against the Ajax
◈ 이점
- 비동기식의 최대 이점인 인터페이스의 강화에는 확실히 도움이 되는것 같음.
- 기존코딩방식에서 어렵게 구현되었던 부분에대한 간략화가 가능한 부분도 있음.
- 다양한 웹 퍼포먼스 구현이 가능함.
◈ 단점
- 사용자들이 Ajax의 구현에대한 인지를 못하는부분이 큼.
- Javascript코딩과 복잡한 DIV등이 많이 필요함.
- 디버깅툴을 새로 익혀야함..(단점은 아니지만..)
- 유지보수의 어려움이 예상됨.
- 빗나간 설계시에 서버측 부하가 매우 크게 예상됨.
◈ 다른면
- Ajax에 맞는 PM방식 및 UI접근방법이 필요함(설계의 패러다임에 전환이 필요함)
- Javascript, 와 DOM구조의 이해가 개발자들에게는 필요함
- XML의 이해와 트리구조의 이점을 잘 살릴 수 있는가에 대한 의문점.
- 기존방식보다 간략화 할 수 있다는 이점의 반대로 기본적 코딩이 복잡해짐.
- 비용산출(?)이 아직까지 불확실함
Web2.0 and Ajax
◈ web2.0
- 웹 2.0(Web 2.0)은 어떤 application이나 Technique을 말하는 것이 아니고, 현재 사용되고 쓰여지고 있는 웹의 진화 모델로서 제시되고 있는 트랜드를 말한다고 하는 것이 좀 더 그 의미에 가까울 것이다. 이에 현재 쓰이고 있는 웹은 web1.0이라고 불리기도 한다.
◈ web2.0 에 필요한 요소들
- 웹 표준을 지켜라 : CSS
- 모든 브라우저를 지원하라 : 크로스 브라우징
- 문자 인코딩을 UTF-8로 바꿔라 : EUC-KR -> UTF-8
- 짧고 이해하기 쉬운 주소를 만들어라 : search.naver.com, blog.empas.com
- 콘텐츠의 유통 방식을 고민하라 : RSS(XML), JSON(Ajax)
- API를 공개해 사용자들을 끌어들여라 : Open소스
- 집단지성을 활용하라 : 커뮤니티 활성
- 가벼운 플랫폼을 써라 : 기존의 코딩방식의 개선
- 더 많은 기능을 제공하라 : 기본(?) 이라 칭하는 스팩의 업그레이드
- 브라우저의 한계를 넘어서라 : 각 특성(국내환경 IE)에 맞는 기술적용
Website in Ajax
◈ maps.google.com
- Ajax로 구현된 가장 대표적인 사이트
◈ naver.com
- 국내검색 포탈 네이버(엠파스 등)
◈ ohpy.com
- 국내커뮤니티 사이트
테스트 구현 예제
◈ 회원가입 시 ID등의 체크
- 아이디등의 중복검색 및 기존의 유요성검사부분의 사용자편의반영 기술
◈ 정보의 수정단계
- 새로고침과 전체폼구분없이 개별적으로 수정가능한 기술
◈ 하위글 직접참조방식의 트리검색
- 뼈대만 구현(방식만.)
◈ Ajax Search
- 검색포탈 및 타 커뮤니티 사이트와 동일한 주제별(지정) 관련 단어검색
Thank you
◈ Outro
- 지금까지 대략적으로 Ajax 및 Web2.0에 관한 보고를 마치겠습니다.
- 작성하지 못한 몇몇 시도중인 기술들과 참고되어지는 여러 기술들을 미루어볼때, Web2.0환경과 Ajax, XML등의 수렴은 기존의 패러다임에서 좀더 틀을 벗어날 수 있는 기회가 될것이라고 저는 생각하며, 앞으로 저에게 주어진 기회로인한 지식들을 좀더 구체화 및 현실화시켜가면서 보다 실용적인 기술을 구현할 수 있었으면 좋겠습니다.
- 이외에도 수많은 변화속의 웹프로그램 및 웹디자인 환경에서 서로 연대감있고 전문가적인 시각에서 여러가지 의견을 모아 나간다면 인터넷 시대를 살아가는 보다 멋진 사람들이모인 XXXXXX이 될것이라고 생각합니다.
이 글은 오픈소스 혹은 개발자의 측면만이 아닌 웹에 익숙치 않은 클라이언트도 대상에 포함되어진 내용입니다.
Posted by web20korea
- Tag
- ajax




,
PPT



,
발표자료




- Response
- No Trackback , No Comment

