레이피엘의 블로그

 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을 통한 파라메터 전달의 경우는 인코딩 처리된다.

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

 웹페이지 작성시 체크박스[input type=checkbox]로 표현된 요소로 라디오[input type=radio]처럼 단일 선택만 허용 시켜야 하는 경우가 있다. 이 경우 간단하게 생각할 수 있는 ui구성은 2가지 정도가 있을 것같다. 라디오와 동일하게 선택시 기 선택된 요소의 체크를 해제하는 방법과 특정 요소를 선택한 상태에서 다른 요소를 선택 했을 시 알럿과 같은 경고를 보여주고 선택이 안되도록 하는 방법이 있을 것 같습니다.

 각 ui별로 장단점이 있을 것 같습니다. radio처럼 동작 시켰을 경우는 별다른 메시지가 없으므로 입력 자체는 편리하게 사용 됩니다만 사용자가 경험에 의해서 복수 선택이 가능하다고 생각할 수 있습니다. 이경우 의식 없이 복수개 선택후 한개만 선택되었다고 오인해 버릴 가능성이 있습니다. 반면 경고를 보여주는 방식을 선택했을 경우에는 유저가 명확하게 인지한 상태에서 입력을 시킬 수 있는 반면 경고 메시지를 보고 닫고 하는 것들이 단일 선택이라는 것을 인지하고 있는 유저에 있어서는 기 체크된 사항을 해제하고 입력해야 하므로 불편함을 느낄 수 있습니다. 입력 받을 항목의 중요도에 따라서 판단해서 선택하는 것이 좋을 것으로 생각합니다. 그럼 jquery를 이용하여 간단하게 구현된 소스를 보도록 할까요?

라디오 요소처럼 동작 소스

동작 데모

복수 선택시 경고

동작 데모

※위의 소스 코드는 jquery 1.7.2에서 작성되고 테스트 되었습니다.

웹 프로그래밍을 진행하다 보면 DOM의 요소를 이동해야 하는 경우가 생긴다.

    
Element 1
    
Element 2
    
Element 3
    
Element 3
    
Element 4

 예를 들어 위와 같이 작성된 요소중 id가element3인 요소의 위치를 위아래로 이동하고 싶은 경우 단순히 pure JavaScript를 이용하는 경우 복잡한 코드 작성으로 인한 가독성 저하 및 유지보수에도 문제가 생기된다. 이럴 경우 jQuery와 같은 라이브러리를 이용 구현을 간단하게 할수 있다.

 아래의 스크립트를 참조해 응용한다면 다양한 경우에 적용할 수 있을 것으로 생각된다.

function moveup() {
    $('#element3').after($('#element3').prev());
}
function movedown() {
    $('#element3').before($('#element3').next());
}

 각각의 펑션은 지정된 id의 요소를 위와 아래로 이동시키도록 되어있다.

위의 jQuery의 펑션을 간단히 소개해 보도록 하겠습니다.

선택된 요소의 직전에 요소를 삽입한다.(sibling 노드) 인자로 넘겨준 content가 이미 DOM상에 존재하는 요소의 경우 이동하는 효과를 가져온다. 배열 요소의 before호출의 경우 첫번재는 이동, 두번째 이후부터는 복제된 요소가 삽입된다.

선택된 요소의 직후에 요소를 삽입한다.(sibling 노드) 인자로 넘겨준 content가 이미 DOM상에 존재하는 요소의 경우 이동하는 효과를 가져온다. 배열 요소의 before호출의 경우 첫번재는 이동, 두번째 이후부터는 복제된 요소가 삽입된다.

직전 요소를 가져온다. 셀렉터 파라메터에의해 필터링도 가능하다.(sibling 노드)

직후 요소를 가져온다. 셀렉터 파라메터에의한 필터링도 가능하다.(sibling 노드)

※API참조 : http://api.jquery.com