검색결과 리스트
글
- 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로 디코딩하여 읽어오면 파라미터를 알맞게 처리할 수 있다.
틀 프레임워크, 틀 자바스크립트 등을 개발하였으며, JSP 2.0 프로그래밍, JSP 실전 Know-how, Jakarta Project 등의 책을 집필하였다. 자바캔의 운영자이며, 현재 CVNet e-biz 팀에서 근무하고 있다.
설정
트랙백
댓글
글
Ajax.Responders.register({
onCreate: function() {
if($('indicator') && Ajax.activeRequestCount > 0)
Effect.Appear('indicator',{duration: 0.25, queue: 'end'});
},
onComplete: function() {
if($('indicator') && Ajax.activeRequestCount == 0)
Effect.Fade('indicator',{duration: 0.25, queue: 'end'});
}
});설정
트랙백
댓글
글
대부분의 어플리캐이션에서 가장 부하가 많이 걸리는 부분은 DB 에 접속 하는 부분이라고 합니다. 그에따라 대부분의 상용 사이트 혹은 동시접속자가 생기는 솔루션의 경우에는 DataBase Pool 이라는 기법을 이용하여 Connection 되어있는 객체를 생성하고, 요구사항이 있을때 임대해 주는 방식을 많이 사용합니다. 이 부분을 직접 작성해 보는것 또한 많은 것을 학습할 수 있는 기회가 되지만, 실제 서비스되는 곳에 실험적으로 만들어진 코드를 사용하기는 현실적으로 많이 어려운것 같습니다.
따라서 apache 재단의 Java 서브 프로젝트인 jakarta 에서 DBCP 라는 프레임워크(?) 많이들 이용하고 있습니다. 물론, 학습시에 말이죠. :-)
자바를 배워 나아간다는것은, 영업직들의 화려한 활약으로 인해서 EJB 가 필수적인 스킬이 되어 가고 있는 상황이고 EJB 라는 녀석 자체가 초기 투자비용이 워낙 큰 녀석이다보니 WAS 에서 학습시에 세팅에 열을 올리는 대부분의 것들을 자체적으로 지원해 주기 마련입니다. 그래서 DBCP(DB Connection Pool) 에 대한 전반적인 지식이 없이 EJB 로 넘어가는 사례를 많이 보곤 합니다. 하지만 제가 항상 강조하듯이 지식을 끌어안지 못하고 과정을 학습하는것은, 차후에 그것을 기반으로 한 상위의 무언가를 배울때 걸림돌이 될 것이 확실하다고 생각합니다.
그래서 결론은, 'DBCP 에 대한 전반적인 지식을 끌어안고 상위로 나아가자' 가 되겠죠. :-)
항상 포스팅을 할 때마다 느끼는것이지만, 사설이 너무 길어지는거 같습니다.
1> 라이브러리 복사.
2> server.xml ==> <Resource /> 추가
3> context.xml 혹은 server.xml ==> <ResourceLink /> 추가
4> web.xml ==> <resource-ref> ... </resource-ref> 추가
5> TEST!!
1-1> DBCP 라이브러리 복사.
common-collections-3.2.jar
common-dbcp-1.2.1.jar
common-pool-1.3
위의 3개 파일을 <context>/WEB-INF/lib 디렉토리에 복사.
1-2> oracle JDBC 드라이버 파일 복사.
ojdbc14.jar
위 파일을 <context>/WEB-INF/lib 디렉토리에 복사.
[<TOMCAT_HOME>/common/lib 디렉토리에 복사]
2> server.xml 파일의 <GlobalNamingResources> 의 내부태그로 <Resource /> 추가
<Resource auth="Container" driverClassName="oracle.jdbc.driver.OracleDriver" maxActive="20" maxIdle="10" maxWait="-1" name="jdbc/project" password="tiger" type="javax.sql.DataSource" url="jdbc:oracle:thin:@127.0.0.1:1521:xe" username="scott" />
3> context.xml 혹은 server.xml 파일의 <Context> 의 내부태그로 <ResourceLink /> 추가
<ResourceLink global="jdbc/project" name="jdbc/project" type="javax.sql.DataSource" />
4> web.xml 파일에 <resource-ref> 추가.
<resource-ref>
<description>DB Connection</description>
<res-ref-name>jdbc/project</res-ref-name>
<res-type>javax.sql.DataSource</res-type>
<res-auth>Container</res-auth>
</resource-ref>
5> TEST!!퍼온곳 http://blog.rooine.com/trackback/8 입니다.
<%@ page contentType="text/html" pageEncoding="UTF-8"
import="java.sql.*"
import="javax.sql.*"
import="javax.naming.*"
%>
<html>
<head>
<title></title>
</head>
<body>
<%
try {
Context initCtx = new InitialContext();
Context envCtx = (Context)initCtx.lookup("java:/comp/env");
DataSource ds = (DataSource)envCtx.lookup("jdbc/project");Connection conn = ds.getConnection();
out.write("DB Connection..");
conn.close();
}
catch(Exception e) {
e.printStackTrace();
}
%>
</body></html>
RECENT COMMENT