레이피엘의 블로그

 Internet Explorer8 또는 9 버전을 이용해서 웹 페이지를 작성하다 jquery의 ajax호출을 이용 화면의 구성요소를 호출할 경우아래와 같은 스크립트 에러로 인하여 화면의 일부 구성요소들이 로딩되지 않는 현상이 발생하는 경우가 있다.

 이 경우 ie의 경우 여타의 브라우저(Firefox, Chrome)처럼 상세한 에러 메시지를 발생시켜 주지 않아서 에러를 특정하고 배제하는데 생각외로 시간이 걸리는 경우가 있다. 이럴 경우 아래와 같은 부분을 후보로 올리고 에러를 특정해 보는 것이 유효할 듯 하다.

주요 원인

ajax를 이용하여 Javascript를 구문을 호출할 경우 구문 체크가 매우 엄격하게 일어나는 듯 하다.

적용 가능한 해결책 리스트

1. 자바스크립트 구문 에러

불러올 대상의 스크립트 요소 중 일부에서 스크립트 구문 오류가 있을 경우 위와 같은 에러를 만날 수 있다.

※필자의 경우는 아래처럼 스크립트의 텍스트 출력방지를 위한 주석 처리에 실수가 있었던 경우였다.(커맨트 열고 닫지 않았다. 초보적인 미스 ㅜㅜ)

<script type='text/javascript'>
//<!--
    /* 스크립트 구문 */
</script>

2. 여분의 콤마

아래처럼 배열의 마지막 요소 다음에 콤마가 남아 있는 경우가 있다. 로직상의 미스일 경우도 있고 프로그래밍의 편의상 남겨둔 경우도 있으나 상황에 따라 구문에러인 경우도 있고 정상적으로 동작하는 경우도 있으므로 여분의 콤마는 배제하여 일관적으로 동작할 수 있도록 하자.

<script type='text/javascript'>
var arr = ['item1','item2',];
</script>

 위에서 열거한 케이스 이외에도 여러가지 케이스가 있을 수 있지만 위의 내용만 잘 고려해도 에러를 어느정도 방지할 수 있다고 생각된다.

 ajax와 java를 이용한 웹 서비스 개발은 진행 하던중 ie에서 전달된 파라메터가 서버사이드에서 ???처럼 깨지는 현상이 발생하여 원인을 조사해 본 결과 아래와 같은 점을 발견하게 되었다.

Internet Explorer 10의 경우

FireFox의 경우

Chrome의 경우

 위 처럼 익스플로러의 경우 ajax콜의 경우 get으로 지정된 파라메터가 URL인코딩 되지 않고 그냥 전달되는 차이점이 있어서 서버사이드의 파라메터 처리의 구현에 따라 (전달받은 파라메터를 URL디코딩 하거나 하지 않거나) 다르게 동작하게 된다.

 일반적인 웹 서비스 구현의 경우 전달받은 파라메터를 URL디코딩 하는 것이 일반적이므로 ajax콜의 경우 아래처럼 URL인코딩을 하여 전달하므로서 브라우저 종류에 상관없이 일관적인 동작을 할수 있도록 해주는 것이 좋을 듯하다. 아래의 예 처럼 encodeURI펑션을 이용하여 전달할 파라메터를 인코딩 처리 해주면 된다.

<script type="text/javascript">
var url="test.html";
var params="param1=한글";
$.ajax({
    type:"GET",  
    url:url,
    data:encodeURI(params),
    success:function(args){
        alert(args);
    },   
    error:function(e){
        alert(e.responseText);
    }  
});  
</script>

 간단한 테스트를 진행해본 결과 ie의 경우 url을 직접입력한 경우와 ajax를 통한 파라메터의 경우는 인코딩 처리되지 않지만 form submit을 통한 파라메터 전달의 경우는 인코딩 처리된다.

 브라우저 별로 동작이 다른경우가 있으므로 결론적으로는 같은 동작이 되도록 구현할 수 있어야 할 듯하다.