AJAX 정리

 

[개요]

AJAX는 XML에 기반한 종합 기술로 Asychronous Javascript XML(비동기 자바스크립트 XML)을 줄인 말로 자바스크립트로 HTTP 요청을 보내 XML 응답을 받아 사용하는 기술이다. 

 

AJAX는 하나의 독립된 기술이 아니다. 화면은 표준 HTML + CSS 로 구성 및 작성하고 화면에 대한 조작과 상호작용은 문서 객체 모델(Document Object Model, DOM)로 처리하고 데이터 교환은 XML 형식으로 처리한다. 그리고 데이터의 변환과 검색은 XML 기술인 XSL과 XPath를 사용하며, 비동기 통신에는 웹 브라우저 안에 내장되어 있는 XMLHttpRequest 객체를 사용한다. 이 모든 것을 하나로 묶는 언어로 자바스크립트를 사용한다. 이것을 AJAX라고 한다.

 

웹 → 동기 통신. 턴 방식.
(클라이언트와 서버 간의 데이터 교환을 턴 방식으로 운영한다.)
클라이언트가 서버에 요청을 보내고, 응답이 돌아올 때 까지 클라이언트는 대기. 응답이 돌아오면, 기존의 결과는 모두 삭제되고, 새 응답을 가지고 다시 전체 출력을 하게 된다.

AJAX → 비동기 통신.
클라이언트가 서버에 요청을 보내고, 응답이 돌아올 때 까지 백그라운드에서 처리된다. 사용자는 AJAX 요청, 응답 과정에서 영향을 받지 않는다. 응답이 돌아오면, 기존의 결과에 응답을 추가하는 형태로 결과를 보여준다.

[처리 과정]

HTTP 요청을 보냄 → XML 문서를 응답으로 받음 → 자동으로 XML 개체가 생성됨 
→ 자바스크립트는 XML 개체에 접근하여 다양한 작업을 진행하게 됨

==> 자바스크립트로 HTTP 요청을 보내서 XML 응답을 받아 사용하는 기술

[장점]

• 비동기 통신을 사용함으로써 데이터를 보내고 나서도 사용자는 다른 작업을 할 수 있게 된다.

• 데이터만 들어가 있는 형식으로 응답을 받게 되기 때문에 전통적인 웹 어플리케이션 방식에 비해서 서버 측의 처리 속도도 빠르고 전송 데이터의 양도 훨씬 적다.

• 응답으로 받은 XML 문서를 XML 개체로 접근하여 스크립트로 조작하고 XPath를 사용하여 XML 문서를 검색하거나 XSL을 사용하여 변환하거나 하는 것들이 가능하다. 즉, 실행 속도가 빠르다.

[단점]

• 외부 검색 엔진이 웹 페이지를 검색할 수 없는 문제가 있다.

• AJAX는 클라이언트 풀링 방식(사용자가 직접 원하는 정보를 서버에게 요청하여 얻는 방식)으로 실시간 서비스를 제공할 수 없다.

• AJAX가 포함된 HTML 페이지가 속해있는 서버가 아닌 다른 서버로 요청을 보낼 수 없고, 클라이언트 PC 파일에 접근할 수도 없다.

※ 기존의 웹 사이트에서 AJAX를 활용하면 효과가 있는 경우

- 웹 페이지를 바꾸지 않고 현재 페이지에서 어떤 동작을 해야 하는 기능이 필요할 때
- 불필요한 팝업을 사용하여 처리하는 작업을 수행할 때 


※ AJAX 애플리케이션으로 개발할 필요가 없는 경우

- 여러 번 불필요한 화면을 다시 출력할 때
- 특정한 데이터를 반복 사용하면서 다양한 작업을 수행할 때

[주의사항]

• 뒤로가기 버튼 사용의 어려움 : AJAX는 Javascript를 사용해서 동작하기 때문에 페이지 단위 브라우저에서 사용자 경험과 다르게 작동하는 경우가 발생한다. 특히, 뒤로가기 버튼이 무용지물이 되기 때문에 AJAX를 유해한 기술로 매도하는 경우까지 발생하기도 한다. 하지만, 이미 iframe을 사용한 해결책이 제시된 바 있다. 또한, AJAX를 활용한 서비스 사용 경험이 증대 될수록 이러한 문제는 줄어들 것으로 전망하고 있다.

• 진행상황 파악의 어려움 : XMLHttpRequest를 통해 통신을 해야 하는 경우, 웹 페이지 로딩과는 달리 사용자에게 아무런 진행 정보가 주어지지 않는다. 그래서 아직 요청이 완료되지 않았는데 사용자가 페이지를 떠나버리거나 오작동을 수행할 우려가 발생하게 된다. 이 경우 사용자 요청이 처리중에 있다는 표시를 화면 보여주도록 권고되고 있다. 예를 들어 Gmail 에서는 중간중간 loading 이라는 상태 표시를 통해 사용자의 요청이 처리중임을 알려주고 있다. 이러한 상태는 XMLHttpRequest.readyState의 상태를 통해 판단할 수 있다. 또한, 이 때 사용할 수 있는 공개된 이미지 등도 http://www.w3.org 사이트 등을 통해 제공되고 있다. 

[요청 절차]

1. XMLHttpRequest 객체 생성

2. AJAX 객체 정보 설정 (서버 주소, 데이터 첨부, 방식-비동기, 콜백함수)

3. AJAX 요청 (send)

4. AJAX 상태 이벤트 확인 콜백 함수 호출

5. 서버로부터 응답이 도착하면(이벤트) 결과 출력. DOM 기술.

[작동 방식]

1. 웹 페이지에서 이벤트 발생. (페이지가 로드된 이후 버튼 클릭)

2. Javascript 에 의해 XMLHttpRequest 객체 생성

3. 생성된 XMLHttpRequest 객체가 웹 서버에 요청 전송

4. 서버가 이 요청에 대한 처리

5. 서버가 웹 페이지로 응답 전송

6. Javascript 가 응답을 수신

7. Javascript 가 수신한 응답 내용을 바탕으로 액션 처리 (ex. 페이지 업데이트)