Ajax 통신에는 XMLHttpRequest 객체가 사용되는데, 기존 html에서 form을 사용해 통신할 때 URL-Encoding이 되는 것과 달리 XMLHttpRequest는 자체적으로 인코딩을 수행하지 않는다. 그래서 한글이나 특수문자를 사용하는 경우 인자값을 인코딩해서 보내줘야 한다.

javascript에서 인코딩하는 방식에는 크게 escape()와 encodeURIComponent() 방식이 있는데, escape()는 유니코드로 인코딩을 하고 encodeURIComponent()는 UTF-8로 인코딩한다. (참고 XMLHttpRequest 사용시 한글 파라미터 전송 방법)

일반적인 경우 encodeURIComponent()를 사용해서 인코딩한 후 서버쪽에서 UTF-8로 처리하면 되는데, ASP에서 응답받는 서버쪽을 Response.CharSet=”utf-8″ 로 세팅한 경우 일부 한글이 깨지는 문제가 발생한다. 그래서 결국 escape()를 사용해야 하는데 escape()는 몇몇 문자를 인코딩하지 않는 문제가 있다. 그래서 가능하면 escape() 대신 encodeURIComponent()를 사용하도록 권고하고 있다. (참고 Comparing escape(), encodeURI(), and encodeURIComponent())

결국 escape()를 사용할 때, 문자열에 ‘+’이 들어가면 빈칸으로 인식되는 문제가 발생한다. 그래서 prototype.js의 Form 객체에 escape() 기능을 따로 정의해서 사용하게 되었다.

escape: function(value) {
 return escape(value).replace(/\+/g, '%2B');
}

prototype.js 내부에서도 Form.serialize()에서 사용된 encodeURIComponent()를 Form.escape()를 사용하도록 수정해서 문제는 해결됐다.

공개된 라이브러리, 특히 영어권에서 만들어진 라이브러리는 항상 유니코드 사용에 문제가 발생하는 경우가 많다. 씁쓸하지만 고쳐서 쓸 수 밖에. 국내에서 좋은 오픈소스 라이브러리가 많이 만들어지는 세상을 기대해본다. *^^*

2005년 한해 WEB2.0과 함께 많은 관심을 받은 AJAX, 이미 많이 알려지고 여러 사이트에서 사용되고 있지만 아직도 생소한 분들을 위해 지금까지 현황과 이슈들을 정리해 보았다.

AJAX는 `Asynchronous JavaScript And XML`의 머리글자를 딴 신조어로 XMLHttpRequest 객체를 사용해서 비동기적 통신을 하고 XML로 응답을 받는 기술을 뜻한다. 또한 광의적 의미로 DHTML, CSS, DOM, javascript 등의 기술을 사용해서 동적인 페이지를 구성하는 기술 또한 포함하고 있다. XMLHttpRequest 객체는 IE5.0에서 처음 지원하기 시작했고 현재 파이어폭스, 오페라 등 대부분의 브라우져에서 지원하고 있다. 지금까지 설명에서 알 수 있듯이 AJAX는 어떤 새로운 기술이라기 보다는 기존 기술의 집합체라 할 수 있으며 기존과 다른 새로운 웹 UI 개발을 가능하게 해주는 WEB2.0의 구현 도구라 할 수 있다.

AJAX의 기본은 javascript에서 XMLHttpRequest를 사용해 서버에 요청을 하고 비동기적으로 응답을 받는 것이다. 소스를 보면 쉽게 이해할 수 있을 것이다.

function getXmlHttpRequest() {
 if(window.XMLHttpRequest) {
  return new XMLHttpRequest();
 } else {
  // IE에서는 XMLHttpdRequest 객체를 ActiveXObject로 취급한다.
  return new ActiveXObject("Microsoft.XMLHTTP");
 }
}

// XMLHttpRequest 객체 생성
var xmlhttp = getXmlHttpRequest();

// 1번째 인자 : http 통신 방식
// 2번째 인자 : 요청할 URL
// 3번째 인자 : 비동기 통신 여부 설정
xmlhttp.open("GET", "ajax_test.jsp", true);

// XMLHttpRequest 통신의 이벤트 리스너를 등록한다.
xmlhttp.onreadystatechange = function() {
 // 통신이 완료된 상태
 if(xmlhttp.readyState == 4) {
  if(xmlhttp.status == 200) {
   // 응답을 문자열로 받을 수 있다.
   alert(xmlhttp.responseText);
  }
 }
}

xmlhttp.send(null);

1. 왜 AJAX를 사용해야 하는가? AJAX가 크게 인기몰이를 한 이유는 AJAX가 Google에서 다양하게 쓰이면서 그 활용성이 인정받았기 때문이다. 마치 데스크탑 App와 같은 사용성을 보여준 Google Map, Google Suggest, Gmail 등은 AJAX가 이상적으로 쓰인 경우라 할 수 있다. 그렇다면 AJAX를 사용할 때 얻을 수 있는 이점에은 어떤것이 있을까?

1) 웹페이지 속도 향상 : http 통신은 서버에 요청 후 전체페이지를 다시 받아야 한다. 하지만 AJAX를 사용할 경우 비동기적으로 서버에 변경사항을 알린 후 변경된 부분만 javascript를 사용해서 반영할 수 있다. 또는 전체 리스트 자료를 화면에 보여준 후 세부정보는 개별적으로 서버에 요청해서 사용자에게 보여줄 수 있다. 결과적으로 페이지 로딩속도를 빠르게 할 수 있고 불필요한 페이지 리로드와 트래픽을 줄일 수 있다.

2) 사용자 UI 개선 : 기존 웹에서는 불가능했던 다양한 UI를 가능하게 해준다. 사진공유 사이트 Flickr의 경우 사진의 제목이나 태그를 페이지 리로드 없이 수정할 수 있다. 쇼핑몰에서는 Drag&Drop 방식으로 장바구니에 상품을 담을 수 있고, 이미 Writely 와 같은 Web Word Processor도 등장했다. 기술과 친화적인 상상력 풍부한 기획이 뒷받침 된다면 아직 아무도 경험해 보지 못한 새로운 웹이 탄생할 가능성이 열려있다.

(사실 기존에도 hidden frame이나 Java Applet, Active-X, Flash 등을 사용해서 이런 작업이 가능했다. 하지만 AJAX는 추가 설치가 없고 개발이 쉬우며 다양한 브라우져를 지원해주는 장점이 있다.)

2. AJAX를 사용할 때 주의할 점 : 그렇다면 AJAX를 사용하는 것이 항상 정답일까? 기술력을 자랑하기 위해 AJAX를 사용하던 시대는 지났고 이제는 꼭 필요한 곳에 여러 문제점에 주의하면서 AJAX를 사용할 때가 되었다.

1) 뒤로가기 버튼 사용의 어려움 : AJAX는 javascript를 사용해서 동작하기 때문에 페이지 단위의 브라우져에서 사용자 경험과 다르게 작동하는 경우가 있다. 특히 뒤로가기 버튼이 무용지물이 되기 때문에 AJAX를 유해한 기술로 매도하기도 한다. (뒤로가기 버튼은 웹서핑을 할 때 클릭 다음으로 많이 쓰이는 기능이다.) 하지만 이미 iframe을 사용한 해결책이 제시되어 있다. 또한 AJAX를 활용한 서비스 사용 경험이 증대될 수록 이런 문제는 줄어들 것으로 보인다.

2) 진행상황 파악의 어려움 : XMLHttpRequest를 통해 통신을 하는 경우 웹페이지 로딩과는 달리 사용자에게 아무런 진행 정보가 주어지지 않는다. 그래서 아직 요청이 완료되지 않았는데 사용자가 페이지를 떠나거나 오작동할 우려가 발생하게 된다. 이 경우 사용자 요청이 처리중에 있다는 표시를 화면에 보여 주도록 권고되고 있다. 예를 들어 Gmail에서는 중간중간 `loading` 이라는 상태표시를 통해 사용자의 요청이 처리중임을 알려준다. 이러한 상태는 XMLHttpRequest.readyState의 상태를 통해 판단할 수 있다. 또한 이때 사용할 수 있는 공개된 이미지도 제공되고 있다.

참고 : XMLHttpRequest.readyState 상태 정보
0 : UNINITIALIZED (open() 호출전)
1 : LOADING (send() 호출전)
2 : LOADED (HTTP 요청후 응답을 받은 상태)
3 : INTERACTIVE (응답을 받고 있는 중간 상태)
4 : COMPLETED (모든 요청 응답 완료)

이 외에도 개발툴의 부재, javascript diabled 인 경우 사용 불가능, XMLHttpRequest의 캐시 문제 등이 있지만 이미 많은 공개 라이브러리가 제공되고 있고 여러 개발자의 고민으로 해결방법들이 제시되고 있다.

참고 : AJAX 관련 소식

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

AJAX 보안 : AJAX에서 사용되는 XMLHttpRequest는 HTTP 방식과 동일하게 GET, POST 방식으로 요청을 보내고 문자열이나 XML 형태로 응답을 받기 때문에 HTTP traffic을 훔쳐봄으로써 정보가 노출될 수 있고, 이런 문제로 AJAX가 보안에 취약하다는 꼬리표를 달고 있다. https와 같은 암호화 통신은 지원되지 않지만 AJAX에 적용될 수 있는 보안기법을 정리해보았다.

AJAX에서 사용되는 보안은 기존 웹과 유사하다. 기본적으로 javascript에서와 같이 동일 도메인으로만 요청이 가능하도록 제한이 되어 있고, cookie를 사용한 인증도 가능하다. 하지만 이런 방식이 데이타 자체의 안정성을 보장하지는 못하기 때문에 몇가지 다른 기법이 사용될 수 있다.

1. token 사용 : UUID와 같은 토큰을 사용함으로써 유효한 사용자의 요청에만 응답할 수 있다. session에 키를 저장한 후 동일서버로 일정한 시간안에 XMLHttpRequest 요청이 들어오는 경우만 응답을 하는 방식으로 유효성을 체크할 수 있다.

<head>
<script language="Javascript">
//Generated on the server and included as part of the dynamically generated HTML
var ajaxToken = "dff0194b-384f-43d3-0059-889247de5f88";	

//Make a request for some data and include the token
var req = new XMLHttpRequest();
req.setRequestHeader("AJAX-Token", ajaxToken);
. . ..
</script>
</head>

2. 문자열 암호화 : XMLHttpReqeust는 문자열로 응답을 주기 때문에 문자열 자체를 암호화 해서 데이타를 전송할 수 있다. 하지만 암호화된 내용을 javascript 로 decription 하는 과정에서 key 또는 암호화 algorithm이 노출 될 위험이 있다. (참고) 이 문제를 해결하기 위해서는 AJAX 관련 js 파일을 매번 서버에서 새로 생성해 줌으로써 해킹의 위험성을 줄이는 방법이 있다.

위의 방법으로 어느정도 데이타를 보호할 수는 있지만 완벽한 보안이란 존재하지 않는다. 특히 AJAX로 데이타를 주고 받는 경우 사용자 인증 과정을 꼭 거쳐야 하고, 민감한 내용은 가급적 보안이 되는 통신을 사용하는 것이 좋으리라 생각된다.