Ajax #

Ajax는 웹 프로그래밍 관련 표준 기술(HTML, XML, CSS, JavaScript)들을 통합하여 "데스크톱 애플리케이션 수준의 웹 애플리케이션을 개발을 위한 새로운 접근(개발모델)"이다.

• "A"(Asynchronous)
  • 서버에 대한 비동기 요청
• "J"(JavaScript)
  • 이벤트 처리, 웹 서버와의 통신, 화면 갱신(DOM조작) 등에 JavaScript 사용
• "X"(XML)
  • 서버와 클라이언트가 데이터를 주고 받을 때 XML을 사용
  • XML이외에 어떤 데이터 형식도 사용 가능(PlainText, CSV, JSON 등)

Ajax를 활용하면 전체화면 갱신없이, 페이지 이동 없이 네트워크 트레픽을 현격히 줄이면서 원하는 동적인 대화형 웹 애플리케이션을 구축 할 수 있다.

Ajax의 특징 #

Ajax는 플러그인도 독점적인 기술도 아니다. 많은 기술과 아이디어로 구성된 아키텍처 방법이다. 또한 기술들의 정교한 집합이기보다는 설계 형식이며 견해이기 때문에 상세 설명이 아닌 사고방식의 일종이며 풍부한 기능, 응답성, 사용자 경험을 전달하기 위해 표준 웹 기술상에서 구축된 기술이다.

• 웹사이트가 아니라 웹 애플리케이션이다.
  • 부드럽고, 지속적인 상호작용(Smooth, Continuos interaction)이 가능하다.
  • 서버 인터렉션이 Javascript를 통해 처리되므로 Refresh할 필요가 없다.
  • 마우스 클릭과 같은 사용자 액션을 Javascript로 처리한다.(Event)
  • 브라우저 내부의 JavaScript로 Display를 직접 조작한다.
    • 페이지를 재배치, 요소를 숨기기 위해 서버에서 새로운 전체 페이지를 보낼 필요가 없다.
• 항상 최신의(Live) 정보를 유지 가능하다.
  • 새로운 정보를 얻기 위해 지속적으로 서버를 폴링(Polling)이 가능하다.
• 지원적(Supportive)이다.
  • 사용자 액션을 감시, 사전대책을 강구해서 사용ㅇ자 수행 작업들을 지원한다.
  • 한번의 키 입력으로 전체 페이지를 Refresh하여 자원낭비를 막는다.
    • ex) 폼이 사용자 입력에 따라 변경되거나 값이 입력되자마자 에러메시지를 출력한다.
    • 회원가입 및 로그인 처리와 같은 폼핸들링이 용이하다.

Ajax의 구현 #

Ajax를 구현하기 위해서는 XMLHttpRequest를 알아야 한다. XMLHttpRequest란 Javascript 클래스로서 대부분의 웹브라우저에서 지원한다. 또한 Javascript 코드로부터 HttpRequest호출을 지원하며 HTTP응답은 핸들러에 의해 처리된다. 마지막으로 XMLHttpRequest 객체 생성은 브라우저마다 다르다. 따라서 이를 감추기 위해 Prototypejs, jQuery와 같은 라이브러리를 사용할 수 있다.

XMLHttpRequest의 속성 #

• readyState : XMLHttpRequest 객체의 상태

• reponseText : 응답값을 Text로 저장
• reponseXml : 응답값을 XML로 저장
• status/ statusText : 웹서버 작업상태/ status의 코드값을 설명하는 텍스트

XMLHttpRequest의 메서드 #

• 기본 메소드
  • open(method, url, async)
    • method는 "GET", "POST", "PUT", "DELETE"일 수 있다.
    • url은 반드시 Http url이어야 한다.(http://로 시작)
    • async는 요청이 비동기 여부이다, 기본값은 'true' 즉, 비동기이다.
  • send(body)
    • Http 요청을 보낸다.
    • body는 null일 수 있다.
  • abort()
    • send() 후에 취소하고자 할 경우에 사용된다.
• 헤더 메소드
  • void setRequestHeader(name, value);
  • String getResponseHeader(name);
  • String getAllResponseHeaders();
    • "header:value"쌍을 리턴한다.
    • 캐리지리턴으로 구분된다.

XMLHttpRequest 객체 생성 #

• 웹 서버와의 비동기 통신을 담당하는 Javascript의 내장 객체이다.
• IE를 제외한 브라우저는 기본적으로 XMLHttpRequest 객체를 제공한다.

• IE6 이하 버전일 경우 ActiveX 객체로 제공한다.

  //브라우저 호환성을 고려한 Javascript XMLHttpRequest 생성
  var xmlHttpRequest = null;
  try{
      //IE7.0 이상, Chrome, FireFox, Opera등
      XmlHttpRequest = new XMLHttpRequest(); //소켓을 포함하고 있다.
  }catch(e){
      //IE6 이하 버전인 경우
      xmlHttpRequest = new ActiveXObject("Msxml2.XMLHTTP");
  }