------------------------------------------------------------------------------------------------
출처: http://javacan.tistory.com/entry/113
------------------------------------------------------------------------------------------------
XMLHttpRequest에서 한글 파라미터를 전송할 때 인코딩을 처리하는 방법에 대해서 살펴본다.
XMLHttpRequest 사용시 한글 파라미터 전송 방법
자바캔에 실린 'XMLHttpRequest를 이용한 웹 채팅 구현'이란 글에서 한글 문제를 iframe을 사용하여
해결했는데, 그 방식 말고 자바캔의 댓글 추가에서 사용한 한글 처리 방식에 대해서 설명해보도록 하겠다.
XMLHttpRequest의 한글 파라미터 문제 해결 방법에 대해서 살펴보기 전에, 웹브라우저가 파라미터 값을 전송할 때 어떻게 인코딩하는 지 살펴보도록 하자. 대부분의 한글 사이트는 다음과 같이 캐릭터셋이
"euc-kr"인 HTML 문서를 사용할 것이다.
"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-ｅquiv="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 버튼을 누르면 다음과 같이 파라미터 값이 변환되어 전송된다.
http://..../form.jsp?name=%C7%D1%B1%DB
위에서 '%C7%D1%B1%DB'는 '한글'을 euc-kr 캐릭터셋에 맞춰서 인코딩한 결과이다. IE나 파이어폭스 등의 웹 브라우저는 문서의 캐릭터셋에 맞춰서 파라미터를 인코딩하여 전송하기 때문에, 만약 문서의 캐릭터셋이 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 방식으로 전송할 때에도 같은 방법으로 파라미터를 인코딩하면 된다.)
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");
%>
PHP나 ASP.net과 같은 다른 서버 프로그래밍 언어에서도 JSP와 같은 방식으로 파라미터 값을 utf-8로
디코딩하여 읽어오면 파라미터를 알맞게 처리할 수 있다.
관련링크:
'IT_Programming > AJAX · Atlas' 카테고리의 다른 글
| [펌] RTCS 실시간 웹 서비스를 위한 도전 (0) | 2011.12.30 |
|---|---|
| [ASP.NET_AJAX] ASP.NET AJAX for non-UpdatePanel scenarios (0) | 2010.12.26 |
| XMLHttpRequest + InnerHTML을 적용한 간단한 예제.. (0) | 2009.02.06 |
| [펌] AJAX는 보안에 취약하다? (0) | 2008.01.25 |
| [펌] Exploring Reverse AJAX (0) | 2007.03.19 |