분류 : 가져온 문서/넥스32 위키
이 문서의 내용 중 전체 또는 일부는 넥스32 위키에서 가져왔으며 GNU Free Documentation License 1.3에 따라 이용할 수 있습니다.
본 문서의 원본은 링크에서 확인할 수 있습니다.
본 문서의 원본은 링크에서 확인할 수 있습니다.
AJAX는 Asynchronous Javascript And XML의 약자로, 모양새를 보면 알겠지만 정상적인 약자는 아니고 그냥 모양 맞추기 위해서 대충 가져다 맞춘 명칭이다. 번역하면 ‘비동기 자바스크립트와 XML’이라는 의미로, 특별한 별도 기술이나 새로운 기술이 아니라 이미 있던 기술들을 조합해서 고정된 웹페이지와 HTTP방식의 한계점을 벗어나기 위한 기술집합체를 지칭하는 명칭이다. 때문에 AJAX라는 명칭 자체는 기술명칭이라기보다는 마켓팅용어에 가깝다.
자바스크립트, DHTML, XML, CSS, DOM 그리고 마이크로소프트 객체인 XMLHttpRequest 등의 기술을 조합하여 구현하며, 전체 데이터를 동기화해서 주고받는 HTTP기반의 기본 웹페이지 전달방식을 탈피해 특정 내용만을 주고 받음으로서 페이지 전체 갱신없이 데이터를 갱신, 자바스크립트 및 DHTML을 통해 변화되는 페이지를 구현하여 사용자환경을 재구성하는 방식을 지칭한다.
현재의 AJAX 형태는 마이크로소프트에서 아웃룩 웹 엑세스에서 쓰기위해 개발된 자바스크립트 객체인 XMLHttpRequest를 통해서 데이터의 요청과 처리를 하고 있기 때문에, 처음에는 인터넷 익스플로러(5.0 이상)에서만 지원되었으나, 해당 이후 여타 브라우저에서도 해당 기능을 지원하게 되면서 널리 사용되었다. 이전에도 자바스크립트와 동적웹의 구성은 있어왔으나, AJAX라는 통칭의 등장 후 통일된 어떤 규격화된 형태를 띄면서 시장에 알려지기 시작, 고정된 웹페이지에서는 제공할 수 없는 동적인 웹페이지 구성에 핵심적인 기술로 분류되어 여겨져 시장 등장 후 폭발적인 호응을 얻었다.
즉 AJAX는 어떤 한 회사의 독점적 기술이거나 패키지 상품이 아니며, 웹 개발자들은 오랜기간동안 사용해온 자바스크립트와 XML이 결합된 기술의 브랜드라고 할 수 있다. 회사별로 구현방식이 크게 다르던 유사한 동적페이지 구성 방식이 AJAX라는 브랜드를 통해 공통된 구현방식과 통로를 규정함으로서 호환성과 성능을 높일 수 있었다.
대표적으로 구글맵의 지도가 조각조각 뜨고, 새로페이지 고침없이 동적인 페이지를 보여주는 것을 보면 AJAX의 움직임이 가져오는 효과를 확인해볼 수 있다.
요구하는 기술사항이 많다보니 lynx를 비롯한 텍스트기반 브라우저에서는 작동되지 않는 등 접근성에 문제를 일으킬 수 있기 때문에 해당 기능이 지원되는 페이지와 해당 기능을 지원하지 못하는 브라우저에서 보여줄 페이지를 중복적으로 제작해야 한다는 점에서 긍정적이지 못한 시선도 적잖이 존재한다.
1. 등장 ✎ ⊖
앞서 말했듯 AJAX는 이미 있었던 기술들의 집합체이지만, 2005년 경, 구글이 구글 그룹스를 포함한 대화형 애플리케이션을 위해 AJAX기법을 사용했고, 비슷한 시기에 구글 지도에서 AJAX를 이용해 타일단위 지도화면을 동적으로 로드해서 보여주는 형식을 이용하는 등 일반 사용자를 대상으로 큰 반향을 일으키면서 이후 빠르게 대중화되어 급속도로 보급이 시작되었다.
붐이 일기 시작하자 이러한 기능을 지원하기 위한 다양한 도구들(Ruby on Rails, DWR 등)이나 Jquery 등의 라이브러리가 등장하면서 이러한 흐름은 급속도로 빨라져 현재는 웹기반의 대부분의 솔루션에서 AJAX 기술을 이용하고 있다고 해도 과언이 아니다.
붐이 일기 시작하자 이러한 기능을 지원하기 위한 다양한 도구들(Ruby on Rails, DWR 등)이나 Jquery 등의 라이브러리가 등장하면서 이러한 흐름은 급속도로 빨라져 현재는 웹기반의 대부분의 솔루션에서 AJAX 기술을 이용하고 있다고 해도 과언이 아니다.
2. 작동원리 ✎ ⊖
앞서 설명했듯 자바스크립트, DHTML, XML, CSS, DOM, XMLHttpRequest기능이 모인 것이 AJAX이다. 대표적으로 작동하는 요소들은 다음과 같다.
간단히 말하자면 AJAX로 만들어진 응용프로그램은 브라우저와 서버 사이에 가상의 ‘중개 엔진’을 두고, 브라우저에서 표시하는 내용, 사용자의 요구, 환경 등을 이 중개 엔진을 통해 서버와 통신하고, 서버에서는 이 중개 엔진에서 요구되는 내용을 XML을 비롯한 형식으로 전달하고, 이 내용을 기반으로 브라우저에서 표시되는 페이지를 동적으로 변화시킴으로서 전체 페이지의 다시읽기를 하지 않고도 동적인 변화를 이끌어내는 것이 가능해지는 것이다.
- 웹 양식을 구축하고 애플리케이션 완료 때까지 사용되는 필드를 식별하는 데 HTML을 사용한다.
- 자바 스크립트 코드는 Ajax 애플리케이션을 실행하는 중심 코드며 서버 애플리케이션과의 커뮤니케이션을 용이하게 한다.
- 자바스크립트의 XMLHttpRequest 객체는 백그라운드에서 클라이언트와 서버간의 통신을 통해 데이터를 갱신한다.
- DHTML(동적 HTML)은 웹 양식을 동적으로 업데이트 한다. div, span및 기타 동적 HTML 요소를 사용해 HTML을 마크업 한다.
- 동적 데이터의 표준 출력 양식과 표현 규격을 CSS를 통해서 규정하고 운용한다
- 서버에서 복귀된 HTML 및 XML 구조를 다루는 데 있어 DOM, 즉 문서 객체 모델(Document Object Model)을 사용한다.
간단히 말하자면 AJAX로 만들어진 응용프로그램은 브라우저와 서버 사이에 가상의 ‘중개 엔진’을 두고, 브라우저에서 표시하는 내용, 사용자의 요구, 환경 등을 이 중개 엔진을 통해 서버와 통신하고, 서버에서는 이 중개 엔진에서 요구되는 내용을 XML을 비롯한 형식으로 전달하고, 이 내용을 기반으로 브라우저에서 표시되는 페이지를 동적으로 변화시킴으로서 전체 페이지의 다시읽기를 하지 않고도 동적인 변화를 이끌어내는 것이 가능해지는 것이다.
3. 장단점 ✎ ⊖
3.1. 장점 ✎ ⊖
고정형의 웹 페이지는 서버측에서 고정된 웹페이지에 들어갈 내용을 로드, 혹은 빌드하여 전송, 브라우저에서 해당 화면을 출력하게된다. 이것은 가장 기본적인 웹서버의 운용방식이지만, 이렇게 전송되는 페이지의 중심 컨텐츠 외의 상당부분은 항상 동일한 데이터를 포함하게되어 전송 데이터의 용량이 상승하고, 서버의 처리능력을 더 많이 소모하게 된다.
AJAX를 사용해서 이를 처리할 경우에는 처음 페이지 로드 시에 들어가는 데이터에서 재활용이 가능한 것은 다시 읽기를 하지 않고 필요한 중심 컨텐츠를 포함한 변경요소만을 요청함으로서 처리해야 할 데이터와 전송해야 할 데이터의 감소를 이룰 수 있고, 이를 통해 전체적인 통신 속도와 렌더링 속도를 감소시켜 체감상 응답속도를 높여준다. 또한 이를 응용하면 한 페이지에 들어가는 다수의 객체(이미지 등)를 병렬로 동시 로드하는 것도 가능하다.
AJAX를 사용해서 이를 처리할 경우에는 처음 페이지 로드 시에 들어가는 데이터에서 재활용이 가능한 것은 다시 읽기를 하지 않고 필요한 중심 컨텐츠를 포함한 변경요소만을 요청함으로서 처리해야 할 데이터와 전송해야 할 데이터의 감소를 이룰 수 있고, 이를 통해 전체적인 통신 속도와 렌더링 속도를 감소시켜 체감상 응답속도를 높여준다. 또한 이를 응용하면 한 페이지에 들어가는 다수의 객체(이미지 등)를 병렬로 동시 로드하는 것도 가능하다.
3.2. 단점 ✎ ⊖
구현 방식에 따라서 차이는 분명 존재하지만, AJAX를 사용해 페이지의 일부를 불러오는 형식의 경우에는 AJAX를 지원하지 않는 경우 제대로 된 페이지를 보기가 어렵다는 문제가 있다. 이는 검색엔진이 운용하는 봇에서도 마찬가지 문제로, 대부분 자바스크립트 기능을 지원하지 않는 검색봇은 AJAX로 주소 변경이 일어나지 않는 페이지의 경우 제대로 된 검색을 하지 못하는 경우가 많다.
또한 웹 접근성 문제를 가져올 수 있다. 페이지의 일부만을 변경하기 때문에 전체 페이지의 새로고침이 일어나지 않아 시각장애인을 위한 읽어주기 플러그인 등과 부합하지 않는 경우가 발생하기 쉽다.
백그라운드의 연결 수를 무작정 늘리다보면 되려 오버헤드가 증가해 단독 페이지 전송시보다 더 큰 부하를 걸리게할 수도 있으므로 유의가 필요하다.
또한 웹 접근성 문제를 가져올 수 있다. 페이지의 일부만을 변경하기 때문에 전체 페이지의 새로고침이 일어나지 않아 시각장애인을 위한 읽어주기 플러그인 등과 부합하지 않는 경우가 발생하기 쉽다.
백그라운드의 연결 수를 무작정 늘리다보면 되려 오버헤드가 증가해 단독 페이지 전송시보다 더 큰 부하를 걸리게할 수도 있으므로 유의가 필요하다.
4. 브라우저 ✎ ⊖
4.1. 지원 브라우저 ✎ ⊖
지원되는 파생 브라우저나 기타 요소들이 많으나 대표적인 브라우저만을 다룸.
- 인터넷 익스플로러5 이상
- 게코 엔진 기반의 파이어폭스, 씨몽키 등등의 브라우저 전체
- KTHML3.2 버전 이상 기반의 퀀커러, WebKit 기반의 애플 사파리, 구글 크롬 등.
- 오페라 8.0 이상.
4.2. 비지원 브라우저 ✎ ⊖
마찬가지로 지원되지 않는 많은 브라우저가 있으나 대표적인 브라우저만을 다룸.
- 상기 표기된 버전 미만의 메이저 브라우저
- 자바스크립트를 지원하지 않는 텍스트 기반 브라우저 : lynx, w3m
- 시각장애인용 브라우저
