고정 헤더 영역
상세 컨텐츠
본문
XMLHttpRequest에서 한글 파라미터를 전송할 때 인코딩을 처리하는 방법에 대해서 살펴본다.
프로바이더: 최범균
XMLHttpRequest 사용시 한글 파라미터 전송 방법
자바캔에 실린 'XMLHttpRequest를 이용한 웹 채팅 구현'이란 글에서 한글 문제를 iframe을 사용하여 해결했는데, 그 방식 말고 자바캔의 댓글 추가에서 사용한 한글 처리 방식에 대해서 설명해보도록 하겠다.
XMLHttpRequest의 한글 파라미터 문제 해결 방법에 대해서 살펴보기 전에, 웹브라우저가 파라미터 값을 전송할 때 어떻게 인코딩하는 지 살펴보도록 하자. 대부분의 한글 사이트는 다음과 같이 캐릭터셋이 "euc-kr"인 HTML 문서를 사용할 것이다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">
<head>
<meta http-equiv="content-type" content="text/html; charset=euc-kr" />
<title>test</title>
</head>
<body>
<form name="test" action="form.jsp">
<input type="text" name="name" /><input type="submit"/>
</form>
</body>
</html>
위 문서는 name 파라미터를 form.jsp로 전송하는 FORM을 갖고 있는데, name 필드에 '한글'을 입력한 뒤 submit 버튼을 누르면 다음과 같이 파라미터 값이 변환되어 전송된다.
euc-kr 캐릭터셋에 맞춰 '한글' 을 인코딩한 값
http://..../form.jsp?name=%C7%D1%B1%DB
위에서 '%C7%D1%B1%DB'는 '한글'을 euc-kr 캐릭터셋에 맞춰서 인코딩한 결과이다. IE나 파이어폭스 등의 웹 브라우저는 문서의 캐릭터셋에 맞춰서 파라미터를 인코딩하여 전송하기 때문에, 만약 문서의 캐릭터셋이 utf-8 이면 '한글' 파라미터를 다음과 같이 인코딩하여 전송하게 된다.
utf-8 캐릭터셋에 맞춰 '한글' 을 인코딩한 값
http://..../form.jsp?name=%ED%95%9C%EA%B8%80
문서 캐릭터셋이 euc-kr인 경우와 utf-8인 경우 전송되는 파라미터의 인코딩된 값도 다른 것을 확인할 수 있다.
이제, 다시 본론으로 돌아와서 XMLHttpRequest가 전송하는 파라미터에 대해서 살펴보자. XMLHttpRequest도 파라미터를 웹서버에 전송하기 때문에 파라미터 값을 알맞게 인코딩 해 주어야 한다. 그런데, 아쉽게도 XMLHttpRequest 자체적으로 인코딩 처리를 지원해주지는 않는다. 따라서, 자바스크립트가 지원해주는 인코딩 처리 함수를 사용해야 한다. 자바 스크립트가 제공하는 인코딩 처리 함수는 escape()와 encodeURIComponent()의 두가지가 있다. 이 두가지는 동작 방식이 다른데, 다음표는 두 함수의 실행 결과를 보여주고 있다.
| 인코딩 처리 | 인코딩된 값 | 설명 |
|---|---|---|
| 두 함수의 실행 결과는 문서 캐릭터셋이 euc-kr 이거나 utf-8 인 경우 모두 동일하다. | ||
| escape('한글') | %uD55C%uAE00 | 유니코드 값을 표현 |
| encodeURIComponent('한글') | %ED%95%9C%EA%B8%80 | utf-8로 인코딩. encodeURI() 함수도 동일한 결과 출력 |
두 함수의 실행 결과를 보면 encodeURIComponent() 함수가 utf-8로 인코딩한 결과를 보여줌을 알 수 있다. 따라서, XMLHttpRequest로 한글 파라미터를 전송할 때에는 다음과 같은 방법을 사용하면 된다.
- 웹브라우저에서: 자바스크립트 encodeURIComponent() 함수를 사용하여 파라미터 값을 utf-8로 인코딩하여 전송한다.
- 서버에서: 파라미터 값을 utf-8로 디코딩하여 읽어온다.
웹브라우저의 코드를 작성하면 다음과 같을 것이다. (POST 방식으로 전송할 때에도 같은 방법으로 파라미터를 인코딩하면 된다.
) <script type="text/javascript">
function sendData() {
var xmlHttp = null;
if( window.XMLHttpRequest ){
xmlHttp = new XMLHttpRequest();
}
else{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
if( xmlHttp ){
var nameValue = document.memberForm.name.value;
var idValue = document.memberForm.id.value;
var param = "name="+encodeURIComponent(nameValue)+"&id="+encodeURIComponent(idValue);
xmlHttp.open('GET', 'http://www.some.com/receive.jsp?'+param, true);
xmlHttp.onReadyStateChange = function(){
if( xmlHttp.readyState == 4 ){
alert(xmlHttp.responseText);
}
}
xmlHttp.send(null);
}
}
</script>
서버에서는 파라미터를 utf-8로 읽어오기만 하면 된다. 예를 들어, JSP를 사용한다면 다음과 같이 파라미터의 인코딩을 utf-8로 지정하면 된다.
<%
request.setCharacterEncoding("utf-8");
...
String name = request.getParameter("name");
%>
