Internet Explorer 에서의 ajax 에서의 한글 깨짐 현상

 

개발자들은 크롬을 선호합니다.
하지만 서비스 이용시 유저들은 익스프롤러에 많이 머물러 있습니다.

따라서 익스프롤러의 호환을 생각하지 않을 수 없습니다.  
유저가 사용하지 않는 서비스는 의미가 없기 때문이죠. 

크롬에서 개발하다가 익스프롤러로 넘어가니 ajax 가 깨지는 문제가 발생했습니다. 
크롬에서는 이상 없이 되는데 확인해 보니 
한글을 파라미터로 보낼 때 인코딩을 하지 않고 보내서 오류가 나더라구요.
jquery 문제인줄 알았는데 살펴보니 제대로 값은 찍는데, ajax 파라미터로 넘어 갈때만 오류가 나더라구요. 


- 기본적인 ajax 사용법  -

1
2
3
4
5
6
7
8
9
10
11
$.ajax({
    type:"GET"
    url:url,
    data:params,
    success:function(args){
        alert(args);
    },  
    error:function(e){
        alert(e.responseText);
    } 
}); 
cs

원래는 위와 같이 사용합니다. 
위와 같이 사용하면 Internet Explorer 에서만 오류가 나기 때문에, 아래와 같이 바꿔주면 됩니다. 


- Internet Explorer 호환되는 ajax 사용법  -

1
2
3
4
5
6
7
8
9
10
11
$.ajax({
    type:"GET"
    url:url,
    data:encodeURI(params),
    success:function(args){
        alert(args);
    },  
    error:function(e){
        alert(e.responseText);
    } 
}); 
cs


위와 같이 encodeURI 라는 메소드 안에 파라미터를 넣어주면 손 쉽게 해결됩니다. 

-> 실험 결과 크롬에서는 또 encodeURI 메소드를 사용하면 동작하지 않습니다. 


// 윈도우인지 다른 브라우저인지 확인
var ua = window.navigator.userAgent;
var postData;
// 윈도우라면 ?
if (ua.indexOf('MSIE') > 0 || ua.indexOf('Trident') > 0) {
postData = encodeURI(sendData);
} else {
postData = sendData;
}

$.ajax({
url: "thumnailUpload.php", // Url to which the request is send
type: "POST", // Type of request to be send, called as method
data: postData, // Data sent to server, a set of key/value pairs (i.e. form fields and values)
contentType: false, // The content type used when sending data to the server.
cache: false,

위와 같이 브라우저 마다 메소드를 달리 해서 확인 해야 한다. 



- 출처 - 
http://reiphiel.tistory.com/entry/ajax-get-%ED%95%9C%EA%B8%80-%ED%8C%8C%EB%9D%BC%EB%A9%94%ED%84%B0-%EA%B9%A8%EC%A7%80%EB%8A%94-%EB%AC%B8%EC%A0%9C