예전에 브라우저를 통해 인터넷이란걸 처음 접해 본 그때와 지금을 비교해 본다면 ㅎㅎ
그 당시에 홈페이지를 아주 심플한 홈페이지를 만들어 본적이 있는데..
페이지상의 어떤 내용을 리로드 하려면 화면 전체의 깜빡임은 어쩔 수 없었다는...
(혹시 내가 모르는 깜빡임 없이 리로드 하는 방법이 있었을지도 모른다.. ㅡㅡ;;;)
하지만 요 근래 웹에 대해 공부를 하면서 "AJAX" 라는 것을 알게 되었고 "AJAX"의 매력에 빠지게 되었답니다. ㅋㅋ
"페이지 전체의 깜빡임 없이 특정부분을 리로드 하는 방법(AJAX?) 을 알고 싶다면 아래 링크된 페이지에서 그 답을 찾을 수 있습니다~." 라고 말하며 시작합니다.
http://www.ibm.com/developerworks/kr/series/web/index.html
Ajax 마스터하기 |
 |
|
지난 2005년 미국을 중심으로 인터넷 업계를 뜨겁게 달군 키워드 중 하나는 '웹2.0' 이었으며, Google의 Gmail과 Maps 그리고 사진공유 사이트인 Flickr 등을 통해 국내 에서도 이에 관한 관심이 매우 높아졌습니다. '웹2.0 컨퍼런스'를 기획한 ‘오라일리(O’Reilly)’사의 팀 오라일리 회장은 “웹2.0 시대로의 전환은 ‘웹의 플랫폼화(The Web as platform)’에 있다”라고 언급했으며, 여기서의 플랫폼은 MS의 Windows 와 같은 운영체제를 말합니다. 즉 지금까지는 윈도우즈를 부팅시킨 후 할 수 있었던 워드나 엑셀 작업등을 이제는 운영체제에 구애됨이 없이 웹브라우저를 통해서도 할 수 있다는 것입니다.
Ajax가 주목받는 이유는 이러한 웹2.0 시대를 연 많은 사이트 들이 Ajax 기술을 활용하고 있기 때문입니다.
Ajax(Asynchronous Java Script and XML)는 클라이언트 측 스크립팅을 사용하는 웹 애플리케이션 개발 방식으로서 http를 통해 xml 데이터를 웹 서버와 교환합니다. 따라서 웹 페이지는 동적으로 업데이트 될 수 있습니다. 전체 페이지를 리프레시 하여 응답성이 떨어지게 하지도 않습니다. Ajax를 사용하여 보다 풍부하고 동적인 웹 애플리케이션 사용자 인터페이스를 만들 수 있습니다. Ajax는 기술이 아니며, 오히려 여러가지 기술이 복합된 방법론 또는 패턴에 더 가깝습니다.
본 특집은 Ajax에서 사용되고 있는 XMLHttpRequest를 이용한 비동기 자료검색, DOM을 이용한 상호작용, 모든 것을 결합시켜 정리해 주는 자바스크립트 등에 관하여 자세하게 예를 들어 설명하고 있습니다.
이 시리즈는 현재까지 총 10회로 구성되어 있습니다.
- Part 1: Ajax 소개
Ajax 애플리케이션에 관한 서론 및 이 애플리케이션에 필요한 몇 가지 기본개념들을 설명합니다.
- Part 2: JavaScript와 Ajax를 이용한 비동기식 요청
XMLHttpRequest 객체에 대해 구체적으로 소개합니다. 이 객체는 서버측 애플리케이션이나 스크립트에 대한 요청을 핸들하고, 서버측 컴포넌트에서 리턴 데이터를 처리하는 Ajax 애플리케이션의 핵심 입니다. 모든 Ajax 애플리케이션은 XMLHttpRequest 객체를 사용하기 때문에 Ajax 애플리케이션의 작동은 여기에 얼마나 익숙해지냐에 달려있습니다.
- Part 3: Ajax의 고급 요청 및 응답
지난 글에서 다루었던 기초를 넘어서 요청 객체의 세 가지 핵심 부분들-HTTP 준비 상태,HTTP 상태 코드, 요청 유형들-에 대해 자세히 설명합니다. 애플리케이션에 무언가 문제가 있을 때 준비 상태, HEAD 요청을 하는 방법, 또는 400 상태 코드가 의미하는 것이 무엇인지를 이해하면 간단한 디버깅으로 끝낼 수 있기 때문입니다.
- Part 4: 웹 응답에 DOM 활용하기
웹 페이지를 정의하는 문서 객체 모델(Document Object Model)을 소개합니다.
- Part 5 : DOM 다루기
이번 글에서는 돔을 보다 자세히 연구합니다. 웹 페이지에 대한 특정 모델은 그 페이지의DOM 트리라고 하는데, 이러한 돔 트리의 부분들을 생성, 제거, 변경하는 방법을 설명하고 그 다음 단계인 웹 페이지를 업데이트 하는 방법을 설명합니다. 여러분은 DOM을 통해서 사용자 인터페이스를 변경할 수 있고 인터랙팅 할 수 있습니다. 이것은 실로 엄청난 프로그래밍의 힘과 유연성을 제공해 주는데, 일단 DOM 트리로 작업하는 방법을 배우면 풍부하고 동적인 인터랙티브 웹 사이트를 마스터하는 단계로 넘어갈 수 있다.
- Part 6 : DOM 기반 웹 애플리케이션 구현하기
Document Object Model (DOM)와 JavaScript 코드를 결합하여 인터랙티브 Ajax 애플리케이션을 구현해봅니다. 여러분이 배운 모든 것을 실제로 적용하여, 간단한 웹 페이지를 구현해 봅니다. 웹 페이지의 모든 효과들은 JavaScript를 사용하여 구현됩니다.
- Part 7: 요청과 응답에 XML 사용하기
평범한 Ajax 개발자들도 Ajax 단어에 있는 x가 XML.을 의미한다는 것 정도는 알고 있습니다. XML은 가장 인기 있는 데이터 포맷들 중 하나이고, 실제로, 비동기식 애플리케이션에서 서버 응답에 효력을 발휘합니다. 이 글에서, 서버가 XML로 된 응답을 보내는 방법을 설명합니다.
- Part 8: 요청과 응답에 XML 사용하기
지난 시리즈에서는, Ajax 애플리케이션인 서버로 가는 요청을 XML로 포맷팅 하는 방법을 설명했습니다. 그리고 대부분의 경우, 이것이 좋은 방법이 아닌지를 설명했습니다. 이번에는, 좋은 방법을 소개합니다. XML 응답을 클라이언트로 리턴하는 방법을 설명합니다.
- Part 9 : Google Ajax Search API 사용하기
비동기식 호출은 서버 측 프로그램과의 통신에 대한 것만은 아닙니다. Google 또는 Amazon 같은 퍼블릭 API와 통신할 수 있고, 여러분이 갖고 있는 스크립트와 서버 측 프로그램이 제공하는 것 이상의 기능을 웹 애플리케이션에 추가할 수 있습니다. 이 글에서, Brett McLaughlin은 Google 같은 퍼블릭 API를 통해 요청을 하고 응답을 받는 방법을 설명합니다.
- Part 10: 데이터 전송에 JSON 사용하기
비동기식 애플리케이션은 궁극적으로 데이터에 관한 것입니다. 데이터를 전송하거나 수신하기 위해 XML이나 플레인 텍스트 대신, JSON을 사용하는 방법, 시기, 이유를 설명합니다.
이상에서 Ajax 애플리케이션에 필요한 기본개념들에 대해 살펴보았습니다. Ajax라는 용어는 새롭지만, 이를 구현하는 기술요소들은 전혀 새로운 것이 아닙니다. 하지만 이를 이용할 경우 사용자는 원하는 응답을 빠른 시간에 받을 수 있고 이에따라 서버의 부담이 줄어들며, 개발자는 페이지 화면구성을 다이나믹하게 할 수 있고, 플래시나 액티브엑스(ActiveX) 의존도를 상당부분 대체 할 수 있다는 장점이 있습니다. 이 시리즈 이외에도 한국 developerWorks 사이트에 Ajax 에 관련된 글들이 많이 번역되어 게시되고 있으며, developerWorks 사이트에는 최신 기술자료들이 올라와 있으니 즐겨찾아 주시기 바랍니다.
여러분에게 많은 도움이 되기를 바랍니다.
감사합니다.