가을의 곰의 기술사 준비

Ajax 정의

Adaptive Path의 Jesse James Garrett은 다음과 같이 Ajax를 정의했습니다.

Ajax는 기술은 아니다. 하지만 실제로는 몇 개의 기술로 이루어 졌으며, 각각 그 자체로 충분하지만 합치면 새롭고 강력한 방식으로 작용한다. Ajax는 다음을 통합합니다.

1. XHTML 및 CSS를 사용하는 표준 기반 프레젠테이션
2. Document Object Model을 사용하는 동적 표시 및 상호 작용
3. XMLHttpRequest를 사용하는 비동기 서버 통신
4. 모든 것을 바인딩하는 JavaScript

그러면 Ajax란 이름은 어떻게 만들어 진 것일까? Ajax라는 용어는 Jesse James Garrett가 만든 것으로 "Asynchronous JavaScript + XML의 약어"입니다.

Ajax의 원리

Ajax의 핵심은 XmlHttpRequest JavaScript 객체입니다. 이 JavaScript 객체는 원래 Internet Explorer 5에서 소개된 것으로, 비동기 요청을 가능하게 하는 기술입니다. 간단히 설명하면 XmlHttpRequest는 사용자를 차단하지 않으면서 JavaScript를 사용하여 서버에 요청하고 응답을 처리할 수 있도록 합니다.

클라이언트에서 화면 업데이트를 수행하게 되면 훨씬 자유롭게 웹 사이트를 만들 수 있습니다. Ajax를 사용하여 실현할 수 있는 작업을 몇 가지 소개하면 다음과 같습니다.

• 사용자가 Update를 클릭한 다음 서버가 전체 페이지를 다시 전송할 때까지 기다리지 않고 쇼핑 카트에 총계를 동적으로 업데이트 합니다.
• 서 버에서 다운로드하는 데이터의 양을 줄여 사이트 성능을 향상시킵니다. 예를 들어, Amazon의 쇼핑 카트 페이지에서 장바구니의 항목 수를 업데이트하는 경우 전제 페이지를 다시 로드하므로 32K의 데이터를 다운로드해야 합니다. Ajax를 사용하여 총계를 새로 계산하는 경우 서버는 새로운 총계 값에만 바로 응답하면 되기 때문에 필요한 대역폭이 100배나 줄어듭니다.
• 사용자가 입력할 때마다 페이지를 새로 고치지 않습니다. 예를 들어, 사용자가 한 페이지 이상인 목록에서 Next를 클릭하면 Ajax는 전체 페이지를 다시 작성하는 대신 서버의 데이터 내용대로 목록만 새로 고칩니다.
• 사 용자가 테이블 데이터를 편집하기 위해 새로운 페이지를 탐색할 필요 없이 그 자리에서 바로 테이블 데이터를 편집합니다. Ajax를 사용할 경우 사용자가 Edit를 클릭하면 정적 테이블을 편집 가능한 컨텐츠를 사용하는 테이블에서 다시 작성할 수 있습니다. 사용자가 Done을 클릭하면 서버를 업데이트하기 위해 Ajax 요청을 만들고, 표시 전용 정적 데이터를 가지도록 테이블을 다시 작성합니다.

가능성은 끝이 없습니다! 이제 Ajax 기반 사이트를 개발에 대한 이야기를 시작해 보겠습니다. 그러나 시작하기 전에 submit/wait/redisplay 표시와 같은 이전 패러다임을 따르는 기존의 웹 사이트를 검토해 보고 Ajax를 통해 사용자 경험을 향상시킬 수 있는 방법을 알아보겠습니다.