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 적용에 많은 도움이 될 것이다.