＃AJAX

■■■ AJAX ■■■

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

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


○ 특징

   - 비동기 자바 스크립트 XML
   - 자바스크립트로 HTTP 요청을 보내서 XML 응답을 받아 사용
   - 처리 과정
     ① HTTP 요청을 보냄
→ ② XML 문서를 응답으로 받음
   → ③ 자동으로 XML 객체가 생성
       → ④ 자바스크립트는 XML 객체에 접근하여 다양한 작업을 수행


==> HTML+CSS, DOM, XML, XSLT, XPath, XMLHttpRequest, Javascript를 합쳐서 사용


○ 장점
  - 비동기 통신을 사용함으로써 데이터를 보내고 나서도
    사용자는 다른 작업을 수행할 수 있다.
  - 데이터만 들어가 있는 형식으로 응답을 받기 때문에
    전통적인 웹 어플리케이션 방식에 비해 서버측 처리 속도가 빠르고
    전송 데이터 양도 훨씬 적다.
  - 응답으로 받은 XML 문서를 검색하거나 XSL 을 사용하여 변환을 할 수 있다.
    따라서 실행 속도가 빠르다.
  - 불필요한 데이터 요청을 최소화 할 수 있고
    많은 일이 클라이언트인 웹 브라우저에서 처리될 수 있다.

○ 단점
  - 외부 검색 엔진이 웹 페이지를 검색할 수 없는 문제가 있다.
  - AJAX 는 클라이언트 폴링 방식으로 실시간 서비스를 제공할 수 없다.
  - AJAX 가 포함된 HTML 페이지가 속한 서버가 아닌 다른 서버로 요청을 보낼 수 없고,
    클라이언트 PC의 파일에 접근할 수도 없다.

○ 기존 웹 사이트에서 AJAX 를 활용하면 효과가 있는 경우
 또는, AJAX 어플리케이션으로 개발할 필요가 있는 경우
  - 웹 페이지를 전환하지 않고 현재 페이지에서 다른 동작을 수행하고자 할 때
  - 불필요한 팝업을 사용하여 처리하는 작업을 다른 방법을 통해 대체하고자 할 때
  - 여러 번 불필요한 홤녀을 다시 출력할 때
  - 특정한 데이터를 반복 사용하면서 다양한 작업을 수행할 때

○ 주의사항
  - 뒤로가기 버튼 사용의 어려움
    AJAX 는 Javascript 를 사용하여 동작하기 때문ㄴ에
    페이지 단위의 브라우저에서 사용자 경험(UX)과 다르게 작동하는 경우가 있다.
    특히, 뒤로가기 버튼의 기능 상실로 AJAX 를 유해한 기술로 매도하기도 했다.
    (뒤로가기 버튼은 웹 서핑을 수행하는 사용자들이
    일반 클릭 다음으로 많이 사용하는 기술이므로...)
    하지만, 이미 iframe 을 사용한 해결책이 제시된 바 있으며
    AJAX를 활용한 서비스 사용 경험이 증대될수록 이와 같은 문제는
    줄어들 것으로 전망하고 있다.
  - 진행상황 파악의 어려움
    XMLHttpRequest 를 통해 통신하는 경우
    웹 페이지 로딩과는 달리 사용자에게 아무론 진행 정보가 주어지지 않는다.
    그래서 아직 요청이 완료되지 않았는데 사용자가 페이지를 떠나거나
    기다림을 참지 못한 사용자가 다른 기능을 수행함으로써 오작동을 일으킬 우려가 발생하게 된다.
    이 경우 사용자의 요청이 처리중에 있다는 표시를 화면에 보여주도록 처리할 수 있다.
    중간 중간 "loading" 상태 표시를 통해 사용자의 요청이 처리중임을 알려주는
    방법을 예로 들 수 있다
    이러한 상태는 XMLHttpRequest.readyState 의 상태를 통해 판단할 수 있다.
    또한, 이 때 사용할 수 있는 이미지를 활용할 수도 있다.


○ 참고 사이트
   - http://www.w3.org
   - http://www.w3schools.com

○ AJAX의 필요성
   기존의 웹 브라우저는 서버로부터 페이지 단위로만 데이터를 수신하여 받을 수 있었다.
   때문에 간단한 상호작용을 하려고 해도 페이지 전체를 로딩해야 했고
   이것은 대역폭 낭비를 초래하게 되었다.
   하지만, AJAX 를 사용하면 XML 파일 조각 단위로 데이터를 받아올 수 있기 땜누에
   전체 페이지를 다시 로드하지 않아도 페이지 일부를 동적으로 갱신할 수 있다.

○ AJAX 객체의 사용
   AJAX를 사용하려면 먼저 AJAX 객체 생성 함수를 사용하여 AJAX 객체를 만들어야 한다.
   인터넷 익스플로러의 경우 『new ActiveXObject("Microsoft.XMLHTTP")』를 실행하며
   모질라 웹 브라우저의 경우 『new XMLHttpRequest()』를 실행하여 AJAX 객체를 생성한다.
   인터넷 익스플로러 7.0 이후부터는 모질라 웹 브라우저처럼
   『new XMLHttpRequest()』를 통해 객체를 생성할 수 있다.