Ajax개념2

AJAX

 

DHTML과 자바스크립트, XML 등을 활용하는 기술로 웹 환경에서 동적인 상호작용 모델을 구현할 수 있게 하는 것이 핵심이다.

 

다음과 같은 기술 조합과 활용을 통칭한다.

- 동적인 HTML을 지원하는 DHTML, DOM, CSS, XSL

- 다양한 플랫폼에서 데이터의 교환을 지원 하는 XML, JSON

- 웹 브라우저에서 다양한 클라이언트 로직을 구현하기 위한 자바스크립트

- 서버와 비동기 통신을 지원하는 XMLHTTP

 

장점

 

1. AJAX 기술을 활용한 웹 응용프로그램은 기존에 X-인터넷 기술과는 달리, 엑티브X 와 같은 비 표준을 사용

   하지 않아 대부분의 브라우저나 플랫폼에 독립적으로 동작할수 있다.

2. 비동기 방식의 데이터 교환이 가능한 구조로 동적인 화면 구성이 가능하다.

3. 서버의 응답을 기다리지 않고 다음 작업을 진행하는 것이 가능하여 사용자의 체감 속도를 높일 수 있다.

 

요구사항

자바스크립트에 기반한 AJAX는 불분명한 구조와 부족한 기본 모듈 탓에 프레임워크가 꼭 필요하다.

구분	세부사항
Archiecture	XML Spec 상속, 동적 Loading
공용 라이브러리(API)	브라우저 호환성 Layer, XMLHTTP 엔진 XML 및 JSON Utility
확장 포인트...	-

AJAX  프레임워크의 기본 요건

JSON( JavaScript Object Notation ) 은 자바스크립트에서 객체를 다룰 때 즐겨 사용하는 표현 방식.

         프로그래밍 언어와 플랫폼 독립적인 경량의 데이터 표현 방식  

JSON(Javascript Object Notation)은 경량 데이터 교환 형식이다.

사람이 읽기 쉽고, 쓰기 쉽고, 또 기계에게도 해석과 생성이 용이한 형식이며

JavaScript(ECMAScript)에 근거한 부분집합이다.

즉, 자바스크립트로 객체를 기술하는 방법이다.

예들 들어, 아래와 같이 씁니다.

var oj = {

   "프로퍼티 이름" : "값",

   "메소드 이름" : function() {alert('This is method')}

}

이것만으로 오브젝트 oj를 만드는 것이 가능하여, oj.프로퍼티이름 으로 값을 얻어 낼 수 있어,

oj.메소드이름() 으로 "This is method"라는 대화창을 표시합니다.

또한 Javascript로는 배열도 다음과 같은 꼴로 다룰 수 있는 경우가 자주 있습니다.

var ary = ["값1", "값2", "값3"]

데이터 교환용 형식으로 고려해보면, 이것은 XML과 마찬가지 또는 그 이상으로 가벼우며

간단한 형식이라는 것을 알 수 있습니다.

특히 웹 상에 보급하고 있는 언어는 C언어계가 많아, C, C++, C#, 자바, JavaScript, Perl,

Python 등 많은 언어간의 연동을 꾀하기 쉬운 형식이라고 할 수 있겠습니다.

그래서 XML을 대신 할 데이터 교환용 형식으로 Ajax에서는 JSON이 보급되고 있습니다.

키가 없는 배열에 대해서는 []를 사용한다.

KOR은 obj[0]으로 접근 할수 있고 CHN은 obj[2]로 접근 할수 있다

var obj = ["KOR","USA","CHN"];

키가 있는 배열에 대해선 {키:값}을 사용한다.

var man = {name:"홍길동",height:"170"};

var result = {

   mans : [

      {name:"홍길동",height:"170"},

      {name:"홍길순",height:"165"}

   ]

}

[접근법]

result.mans[0].name; //홍길동

result.mans[1].name; //홍길순

XML이 커질수록 XML DOM을 이용하여 객체로 표현하는 것은 매우 수고스러운

작업이 될 것이다.

JSON(제이슨)은 이러한 단점을 보완할 수 있는 표기법으로 XML대신 JSON으로

표기된 문자열은 자바스크립트에서 쉽게 객체로 복구하여 사용 할 수 있다.

var json_str = "{name:'홍길동',height:'170'}";

var man = eval("(" + json_str + ")");

alert(man.name);

따라서 서버의 응답이 JSON 문자열이라면 XML DOM을 만들 필요도 없다.

아주 간단히 결과를 객체화하여 사용 할 수 있다.

var obj = new Object();	var obj = {};
var obj2 = new Object();  obj2.childObj = new Object();  obj2.functional = function( a, b ) {}	var obj2 = {                   childObj : {},                   function( a, b ) {}  }

JSON 예.. 왼) 일반 자바스크립트 오) JSON 이용.

DOM

말 그대로 Model, 즉 객체에 대한 구조화된 표현이다. XML 을 파싱해 노드를 탐색하고 노드의 값을 얻어 올수 있는 API를 정의한 Spec이다.

브라우저마다 구현 방법이 다르다.

XMLHttpRequest

AJAX 는 비동기적 통신이라는 개념이 함축되어 있고, 이 비동기적 통신을 담당하는 객체가 바로

XMLHttpRequest이다.

브라우저마다 구현 방법이 다르다.

 

 

기존 웹 애플리케이션 프로세스

AJAX 애플리케이션 프로세스

 

Ajax 작동

Ajax 인터랙션은 XMLHttpRequest라고 하는 JavaScript 객체로 시작한다. 이름만 보아도 알겠지만 이것은 클라이언트측 스크립트가 HTTP 요청을 수행하도록 하고 XML 서버 응답을 파싱한다. Ajax 연구의 첫 번째 단계는 XMLHttpRequest 인스턴스를 만드는 것으로 시작한다. 이 요청(GET 또는 POST)에 사용되는 HTTP 메소드와 도착지 URL은 XMLHttpRequest 객체에서 설정된다.

이제 Ajax의 첫 번째 단어 a가 비동기식(asynchronous)을 의미한다는 것을 기억하라. HTTP 요청을 보내면 서버가 응답할 때 까지 기다릴 것을 브라우저에 요청하지 않아도 된다. 대신 사용자와 페이지 간 인터랙션에 지속적으로 반응하고, 서버의 응답이 도착하면 이를 다루도록 요청한다. 이를 위해서 XMLHttpRequest로 콜백 함수를 등록하고, XMLHttpRequest를 비동기식으로 실행한다. 컨트롤이 브라우저에 리턴되지만, 콜백 함수는 서버 응답이 도착하면 호출될 것이다.

자바 웹 서버에 요청은 다른 HttpServletRequest와 마찬가지로 도착한다. 요청 매개변수를 파싱한 후에 서블릿은 필요한 애플리케이션 로직을 호출하고, 응답을 XML로 직렬화 하고, 이를 HttpServletResponse에 작성한다.

다시 클라이언트로 돌아가서, XMLHttpRequest에 등록된 콜백 함수가 서버에서 리턴된 XML 문서를 처리하도록 호출된다. 마지막으로, 사용자 인터페이스는 서버로부터 온 데이터에 대한 응답으로 업데이트된다. 이때 JavaScript를 사용하여 페이지의 HTML DOM을 조작한다. 그림 1은 Ajax의 시퀀스 다이어그램이다.

그림 1. Ajax 시퀀스 다이어그램
 

위 그림은 고급 시퀀스 다이어그램이다. 각 단계를 자세히 설명하도록 하겠다. 그림 1에서 보면 Ajax의 비동기식 방식 때문에 시퀀스가 단순하지 않다.

위로

XMLHttpRequest 실행

Ajax 시퀀스의 시작 부분부터 설명하겠다. 브라우저에서 XMLHttpRequest를 생성 및 실행하는 Ajax 시퀀스의 시작 부분부터 설명하겠다. 불행히도 XMLHttpRequest를 만드는 방식은 브라우저마다 다르다. Listing 2의 JavaScript 함수는 부드럽게 진행되면서 현재 브라우저에 맞는 정확한 방식을 찾고, 사용 준비가 된 XMLHttpRequest를 리턴한다. 이것을 JavaScript 라이브러리에 복사하여 XMLHttpRequest가 필요할 때 사용하도록 한다.

Listing 2. 크로스 브라우저 XMLHttpRequest 구현하기

/* * Returns a new XMLHttpRequest object, or false if this browser * doesn't support it */function newXMLHttpRequest() { var xmlreq = false; if (window.XMLHttpRequest) { // Create XMLHttpRequest object in non-Microsoft browsers xmlreq = new XMLHttpRequest(); } else if (window.ActiveXObject) { // Create XMLHttpRequest via MS ActiveX try { // Try to create XMLHttpRequest in later versions // of Internet Explorer xmlreq = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e1) { // Failed to create required ActiveXObject try { // Try version supported by older versions // of Internet Explorer xmlreq = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e2) { // Unable to create an XMLHttpRequest with ActiveX } } } return xmlreq;}

쇼핑 카트 시나리오 예제로 돌아가서, 사용자가 해당 카탈로그 아이템에서 addToCart() 버튼을 누를 때 마다 Ajax 인터랙션을 호출하도록 할 것이다. addToCart()라는 onclick 핸들러 함수는 Ajax 호출 시 카트의 상태를 업데이트 한다.(Listing 1). Listing 3에서 보듯 addToCart()가 해야 하는 첫 번째 일은 Listing 2에서 newXMLHttpRequest()함수를 호출하여 XMLHttpRequest의 인스턴스를 획득하는 것이다. 다음에는 콜백 함수를 등록하여 서버의 응답을 받는 것이다. (Listing 6).

요청으로 인해 서버상의 상태가 변경되기 때문에 HTTP POST가 이 일을 수행하도록 할 것이다. POST 를 통해 데이터를 보내려면 세 단계를 거쳐야 한다. 우선, 통신하고 있는 서버 리소스에 대한 POST에 연결한다. 이 경우 URL cart.do에 매핑된 서블릿이다. 그런 다음 XMLHttpRequest에 헤더를 설정한다. 이때 요청 내용은 폼 인코딩(form-encoded) 데이터라는 것을 언급한다. 마지막으로 폼 인코딩 데이터를 가진 요청을 바디(body)로서 보낸다.

Listing 3은 그 세 단계를 나타낸다.

Listing 3. Add to Cart XMLHttpRequest 실행

/* * Adds an item, identified by its product code, * to the shopping cart * itemCode - product code of the item to add. */ function addToCart(itemCode) { // Obtain an XMLHttpRequest instance var req = newXMLHttpRequest(); // Set the handler function to receive callback notifications // from the request object var handlerFunction = getReadyStateHandler(req, updateCart); req.onreadystatechange = handlerFunction; // Open an HTTP POST connection to the shopping cart servlet. // Third parameter specifies request is asynchronous. req.open("POST", "cart.do", true); // Specify that the body of the request contains form data req.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); // Send form encoded data stating that I want to add the // specified item to the cart. req.send("action=add&item="+itemCode);}

지금까지 Ajax 설정의 첫 번째 부분을 보았다. 주로 HTTP 요청을 클라이언트에서 생성하여 실행하는 것이다.