주요글: 도커 시작하기
반응형
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");
    %>

PHP나 ASP.net과 같은 다른 서버 프로그래밍 언어에서도 JSP와 같은 방식으로 파라미터 값을 utf-8로 디코딩하여 읽어오면 파라미터를 알맞게 처리할 수 있다.

관련링크:

+ Recent posts