2007년 11월 07일

XMLHttpRequest를 사용할 때 한글 파라미터의 인코딩 처리 방법

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%80utf-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"); 
%>

출처 : Tong - 라제폰님의 HTML/JavaScript/Ajax통

by beizix | 2007/11/07 11:33 | 우당탱 Ajax | 트랙백(52) | 덧글(0)

트랙백 주소 : http://beizix.egloos.com/tb/1576939
☞ 내 이글루에 이 글과 관련된 글 쓰기 (트랙백 보내기) [도움말]
Tracked from Hardcore for.. at 2008/08/11 12:32

제목 : Forced sex.
Forced sex pics. Forced sex. Fantasy forced sex. Forced oral sex. Forced sex pics forced. Rough forced sex movies....more

Tracked from Rape sex sto.. at 2008/08/14 11:07

제목 : Rape sex.
Forced sex with rape fantasy and rape videos. Click here rape sex teen rape. Interracial sex stories illustrated rape. Rape sex. Rape sex stories....more

Tracked from Link to http.. at 2008/08/15 06:59

제목 : Rape sex porno.
Rape sex. Rape teen sex....more

Tracked from Free animal .. at 2008/08/16 07:00

제목 : Animal porn free.
Animal porn stories. Animal porn. Animal sex selected beastiality animal porn free....more

Tracked from Quick cash l.. at 2008/08/17 05:52

제목 : Cash loan.
Quick cash loan illinois. Advance cash loan wisconsin. Quick cash loan www.thepayloan.com....more

Tracked from Buy amoxicil.. at 2008/08/18 07:43

제목 : Prescription free amoxicillin.
Amoxicillin. Canine dosage amoxicillin. Amoxicillin dose for kids. What is amoxicillin used for....more

Tracked from Percocet. at 2008/08/18 20:16

제목 : Adrenaline levels after perc..
Percocet....more

Tracked from Bad credit f.. at 2008/08/19 09:38

제목 : Quick cash loan www.thepaylo..
Advance cash loan payday. Fast cash loan oregon. Bad credit fast cash loan. Quick cash loan wisconsin. Quick cash loan www.thepayloan.com. Fast cash loan illinois....more

Tracked from Amoxicillin. at 2008/08/19 21:56

제목 : How quickly does amoxicillin..
Amoxicillin rx655 syphilis. Amoxicillin and pregnancy. Bleeding and amoxicillin....more

Tracked from Hard to talk.. at 2008/08/20 21:44

제목 : Generic fioricet low prices ..
Fioricet and blood work. Fioricet online. Hard to talk and fioricet codeine. Fioricet morphine....more

Tracked from Payday loan .. at 2008/08/21 16:08

제목 : Payday loan.
No fax payday loan. Payday loan. Illinois payday loan. Guaranteed approval payday loan....more

Tracked from Generic fior.. at 2008/08/22 00:51

제목 : Cheapest fioricet.
Fioricet. Fioricet free shipping. Fioricet and blood work....more

Tracked from Valium dose .. at 2008/08/22 13:23

제목 : Valium.
Conversion dosage of lorazepam to valium. Valium 5mg how long in system. Diazepam t quil valrelease valium data sheet. Liquid valium. Valium producer. Internet-rx.com valium. Valium....more

Tracked from Propecia onl.. at 2008/08/23 01:23

제목 : Side effects of propecia fin..
Propecia....more

Tracked from Airline tick.. at 2008/08/26 03:31

제목 : Airline ticket.
Airline ticket for under 100....more

Tracked from Ringtones. at 2008/08/26 16:43

제목 : Free real ringtones.
Free ringtones. Verizon ringtones. Ringtones. Free verizon wireless ringtones....more

Tracked from Oxycontin va.. at 2008/08/27 03:32

제목 : Valium cash on delivery.
Valium ekg. Valium online. Valium no prescription. Valium withdrawal. Valium liquid form. Valium....more

Tracked from Soma. at 2008/08/27 16:14

제목 : Cheap soma.
Soma drug test. Soma sonic music. Soma. Addiction to soma....more

Tracked from Vicodin with.. at 2008/08/28 15:14

제목 : Vicodin.
Vicodin es. Vicodin interaction with metropolol. No prescription vicodin. Vicodin. How to get vicodin without a perscription. Drug vicodin....more

Tracked from Xanax. at 2008/08/29 09:55

제목 : Xanax weight gain.
Xanax....more

Tracked from Airline tick.. at 2008/08/29 18:17

제목 : Cheap airline tickets.
Airline tickets. Cheapest airline tickets. Cheap airline tickets....more

Tracked from Diet drug xe.. at 2008/08/30 07:07

제목 : Xenical.
Xenical hgh phentermine quit smoking detox. Xenical 120....more

Tracked from Xanax side e.. at 2008/08/31 20:24

제목 : Buy xanax.
Buy xanax. Half-life of xanax. Generic xanax no prescription. Pharmacy order generic xanax. Xanax. Generic xanax 2 mg no prescription. Xanax effect....more

Tracked from Liquid vicod.. at 2008/09/01 10:24

제목 : Quiting vicodin information.
Vicodin at overseas pharmacies....more

Tracked from Airline tick.. at 2008/09/01 22:16

제목 : Dirt cheap airline tickets.
Dirt cheap airline tickets. Military standby airline tickets. Airline tickets. Cheap tickets airline. Cheap airline tickets....more

Tracked from Soma. at 2008/09/02 11:15

제목 : Generic soma.
Soma intimates stores. Soma. Soma without prescription 180 count. Soma buy soma cheap soma soma online. Soma online....more

Tracked from Ephedrine la.. at 2008/09/02 23:01

제목 : Ephedrine phpbb forum.
Ephedrine....more

Tracked from Ultram. at 2008/09/03 11:40

제목 : Buy ultram cheapest site.
Ultram. Ultram er. Ultram er mg. Ultram tramadol. Buy ultram....more

Tracked from Soma without.. at 2008/09/03 23:17

제목 : Soma beds.
Effects of soma. Soma long term effects. Soma. Soma sen. Prozac soma zoloft prozac onlineprescription.md....more

Tracked from Fertility an.. at 2008/09/04 21:16

제목 : Propecia and online drugs st..
Finasteride propecia. Long term side effects of propecia. Propecia side efects. Buy propecia buy cheap propecia online....more

Tracked from Buying overn.. at 2008/09/05 23:12

제목 : Is viagra soft tabs better.
Viagra. Buy viagra....more

Tracked from Ambien overd.. at 2008/09/06 12:34

제목 : Ambien.
Ambien online. Generic ambien....more

Tracked from Anal sex vid.. at 2008/09/08 19:19

제목 : Free anal sex videos.
Anal sex. Anal sex advice....more

Tracked from Pictures of .. at 2008/09/09 20:51

제목 : Viagra.
Viagra. Re viagra cello....more

Tracked from Airline tick.. at 2008/09/10 19:04

제목 : Cheapest airline tickets.
Airline tickets under 100. Airline discount tickets discount airfare. Airline tickets. Cheap airline tickets....more

Tracked from Ringtones. at 2008/09/12 00:43

제목 : Virgin mobile ringtones.
Cell phone ringtones. Totally free ringtones. Free mobile ringtones. Cellular one ringtones....more

Tracked from Cheap airlin.. at 2008/09/13 06:09

제목 : Airline discount tickets.
Dirt cheap airline tickets. Airline tickets discount. Airline tickets. Cheap airline tickets....more

Tracked from Ephedra. at 2008/09/13 16:49

제목 : Hydroxycut with ephedra.
Ephedra....more

Tracked from Ambien cr. at 2008/09/14 04:41

제목 : Suicide ambien.
Ambien. Ambien overnight....more

Tracked from Propecia uk .. at 2008/09/15 10:33

제목 : Generic propecia.
Does propecia thin hair out at first. Propecia side effects. Propecia baldness. Compare prices on propecia generic mg pill. Propecia. Buy propecia international pharmacy. Propecia w o prescription....more

Tracked from Ultram. at 2008/09/16 12:42

제목 : Ultram er tablets.
Ultram. Ultram fed ex. Ultram er. Ultram ortho mcneil....more

Tracked from Phentermine .. at 2008/09/17 03:32

제목 : Phentermine.
Phentermine without prescription. Phentermine. Xenical hgh phentermine quit smoking detox. Phentermine hcl. Phentermine review. Phentermine cod....more

Tracked from A payday cas.. at 2008/09/18 07:57

제목 : Cash loan machine.
Cash advance loan illinois. Cash advance loan. Quick cash payday loan utah. Quick cash loan www.thepayloan.com. Bad credit cash loan....more

Tracked from Yellow swarm.. at 2008/09/18 20:33

제목 : Ephedra diet pills.
Products containing ephedra. Ephedra products. Ephedra lawyers los angeles. Trim spa with ephedra. Ephedra....more

Tracked from Buy fioricet.. at 2008/09/19 09:11

제목 : Does fioricet show up in blo..
Fioricet antidepressants. Webresults fioricet. Fioricet. Fioricet without prescription. Advanced book by fioricet guest powered....more

Tracked from Verizon ring.. at 2008/09/19 22:18

제목 : Ringtones.
Free ringtones. Free ringtones for nokia phones. Ringtones....more

Tracked from Xanax. at 2008/09/20 10:44

제목 : Xanax side effects.
How to cut down on xanax. Cheap xanax. Buy xanax. Xanax. Xanax side effects. Buy xanax online without a prescription....more

Tracked from Advance cash.. at 2008/09/20 23:14

제목 : Payday loan utah.
No teletrack payday loan. Payday loan laws....more

Tracked from Dog sex. at 2008/09/21 11:48

제목 : Girl dog sex video.
Dog sex. Wife dog sex. Animal sex video dog....more

Tracked from Celexa. at 2009/02/01 03:24

제목 : Withdrawals from celexa.
Celexa weight loss. Celexa. Celexa 20mg....more

Tracked from Cheap propec.. at 2009/02/02 04:07

제목 : Buy propecia buy cheap prope..
Propecia cheap deals. Buy propecia buy cheap propecia online....more

Tracked from Soma buy som.. at 2009/02/05 03:27

제목 : Soma online next day.
Best online pharmacies for buying soma medication. Buy soma watson brand online 150 tablets. Best online pricing for soma. Soma overnight shipping online....more

:         :

:

비공개 덧글

◀ 이전 페이지다음 페이지 ▶