HTTP로 URL 값을 전달할때 오로지 영문자와 숫자만으로 전달한다면 인코딩 디코딩이 필요 없을 것이나 실제에 있어서는 다양한 특수문자와 한글 등이 URL 값에 포함되어 전달되는데 이때 제대로 인식을 못해서 404 Not found 에러가 발생하거나 잘못된 값이 전달되는 경우가 발생할수 있다.
예를 들어
http://www.xxx.xx/info?page=3&title=developer&enginner
이 경우 title에 developer&engineer 값이 전달되어야 겠지만 &라는 특수문자는 &문자 자체로 인식되지 않고 특수한 기능을 하는 문자로 취급되기 때문에 문제가 발생한다.
이 문제를 해결하기 위해 title의 데이터 부분만(developer&enginner) 따로 인코딩해서 보낸다면 원하던 목적을 달성할수가 있게된다.
이때 사용하는 JavaScript의 함수가 encodeURIComponent()와 decodeURIComponent()가 있다.
encodeURIComponent()함수는 영 대문자와 소문자, 숫자, 그리고 *-_.을 제외한 모든 문자를 유니코드 형식으로 변환한다.
1BYTE 문자는 %XX, 2BYTE 문자는 %uXXXX 형태로...
그리고 이렇게 인코딩된 문자열을 사람이 읽을수 있는 형태로 원복할려면 decodeURIComponent()를 이용하면 된다.
아래는 예제코드이다.
<!DOCTYPE html>
<html>
<body>
<p>Click the button to encode a URI and for decoding also.</p>
<button onclick="myFunction()">Now Try it</button><br/><br/>
<hr/>
"developer&enginner"이라는 문자열을 encodeURIComponent()와 decodeURIComponent()를 이용해서 인코딩과 디코딩을 테스트해 봅니다.
<hr/>
<p/>인코딩 : <span id="enco"></span>
<p/>디코딩 : <span id="deco"></span>
<P/>최종결과 : <span id="result"></span>
<script>
function myFunction() {
var mURL = "http://www.xxx.xx/info?page=3&title=";
var uri = "developer&enginner";
var res = encodeURIComponent(uri);
document.getElementById("enco").innerHTML = res;
var dc = decodeURIComponent(res);
document.getElementById("deco").innerHTML = dc;
//alert("decoded : " + dc);
var rt = mURL + res;
document.getElementById("result").innerHTML = rt;
}
</script>
</body>
</html>
한글의 경우도 인코딩해서 보내고 받는 쪽에서 디코딩해서 처리하면 문제가 없을 것이다.
위 코드의 실행결과는 다음과 같이 나오게 될 것이다.
인코딩 : developer%26enginner
디코딩 : developer&enginner
최종결과 : http://www.xxx.xx/info?page=3&title=developer%26enginner