AJAX 개발자용 자료(2) – 라이브러리

AJAX 관련 라이브러리 : AJAX는 DHTML, CSS, XML, XMLHttpRequest, javascript 등의 기술이 합쳐진 기술의 집합체를 의미한다. 즉, AJAX를 사용한다는 것은 비동기적인 통신을 통한 정보의 전달과 화면의 부분적 전환 등으로 구체화 된다. 이 두가지 기술 즉, 정보의 전달과 화면 전환에 필요한 라이브러리를 소개한다.

1. JSON 라이브러리 : JSON(JavaScript Object Notation)은 텍스트 기반의 가벼운 데이타 전송 포맷이다. 값(문자, 숫자, boolean, null), 객체, 배열 세 가지 종류의 형태로 데이타를 전달할 수 있고, 웹 페이지에서 사용하는 json.js을 비롯해서 다양한 언어에서 사용가능한 라이브러리를 제공해주고 있다.

간단한 사용예를 보면 다음과 같다.

1) AJAX를 통해서 서버에 데이타를 보내는 경우

function getXmlHttpRequest() {
 if(window.XMLHttpRequest)
  return new XMLHttpRequest();
 else
  return new ActiveXObject("Microsoft.XMLHTTP");
}

function reqData() {
 var info = {};
 info['name'] = 'fantazic';
 info['url'] = 'http://fantazic.com';
 var encoded;

 try {
  encoded = JSON.stringify(info);
  //객체를 저장하는 경우
  //{"name":"fantazic","url":"http://fantazic.com"}
 } catch(e) {
  alert(e);
  return;
 }

 var xmlhttp = getXmlHttpRequest();
 xmlhttp.open("POST", "ajax_json.jsp", true);
 xmlhttp.setRequestHeader('Content-Type', \\
 'application/x-www-form-urlencoded');
 xmlhttp.onreadystatechange = function() {
  if(xmlhttp.readyState == 4) {
   if(xmlhttp.status == 200) {
    try {
     var parsedObject = JSON.parse(xmlhttp.responseText);
     if(parsedObject.result == true) {
      alert('success');
     } else {
      alert(parsedObject.reason);
     }
    } catch(e) {
     alert(e);
     return;
    }
   }
  }
 }

 xmlhttp.send('info=' + encoded);
}

2) 서버쪽에서 데이타 처리 및 응답부분 (JAVA)

try {
 String info = request.getParameter("info");
 JSONObject getObj = new JSONObject(info);
 JSONObject returnObj = new JSONObject();

 if(getObj.get("name").equals("fantazic") \\
 && getObj.get("url").equals("http://fantazic.com")) {
  returnObj.put("result", true);
 } else {
  returnObj.put("result", false);
  returnObj.put("reason", "입력내용이 잘못됐습니다.");
 }

 response.getWriter().print(returnObj.toString());
} catch(Exception e) {
 e.printStackTrace();
}

JSON을 사용하면 직관적인 데이타 구성이 가능하고, 브라우져별 XMLParser 차이에 영향을 받지 않는 장점이 있다. JSON은 싸이월드 팀플의 참여자 정보, 다음 메일의 주소록 등에서 이미 많이 사용되고 있다.

2. Rico 라이브러리 : AJAX를 사용하는 경우 AJAX를 이용해 비동기적 통신을 하는 것보다 DHTML과 DOM을 사용해 동적으로 페이지를 구성하는데 어려움을 겪는 경우가 많다. 웹표준을 지키며 편리한 동적 UI를 쉽게 만들 수 있는 다양한 라이브러리가 공개되어 있는데 그중에서 Rico를 소개한다.

오픈 소스로 제공되는 Rico 라이브러리를 다운받은 후 사용할 수 있다. 데모에서 볼 수 있는 많은 기능 중 Drag&Drop 기능과 Live-Grid Search 기능을 예로 들어 살펴보겠다. (자세한 기능은 메뉴얼을 참고하면 된다.)

1) Drag&Drop : 구글 개인화 페이지 등에서 아이템을 마우스 드래그로 옮길 때 사용되는 기술로, Rico에서는 AjaxEngine 을 제공해준다. AjaxEngine을 통해 XML 형태로 데이타를 전달할 수 있고, html code를 지정된 target 영역에 대체할 수 있다. Rico 라이브러리는 javascript의 Class, prototype.js 기능을 사용하는데, Rico에서 사용된 Class를 확장해서 사용할 수 있다.

//Drag 가능한 영역을 추가한다.
function createDraggables(val) {
 for ( var i = 1 ; i <= val; i++ ) {
  dndMgr.registerDraggable( \\
  new CustomDraggable($('photo'+i)));
 }
}

//Drop 가능한 영역을 추가한다.
function createDropZones(val) {
 for ( var i = 1 ; i <= val; i++ ) {
  dndMgr.registerDropZone( \\
  new CustomDropZone($('photo'+i)));
 }
}

//Drag 시작할 때 처리하는 부분
CustomDraggable.prototype = ( \\
new Rico.Draggable()).extend( {
....
}

//Drop 됐을 때 처리하는 부분
CustomDropZone.prototype = ( \\
new Rico.Dropzone()).extend( {
....
}

2) Live-Grid Search : 기존의 숫자로 된 페이징을 스크롤 기능을 이용해 구현한 기능이다. Rico.LiveGrid Class를 사용해 데이타 요청을 하고 서버에서 XML 형태로 데이타를 전송한다. 보여지는 데이타 전/후의 일정 데이타를 캐쉬하는 기능도 제공해준다.

Rico 라이브러리를 사용할 경우 XML에 html code를 넣어서 지정한 특정 요소의 내용 전환이 가능하다. 이 경우 html tag 는 XML 형식에 맞춰야 한다. (예 <br />)

위에서 소개한 라이브러리 외에도 다양한 공개 라이브러리가 존재하니 개발에 활용한다면 AJAX 적용에 많은 도움이 될 것이다.