jQuery의 $.getJSON은 기본적으로 post방식을 지원하지 않는다.
그래서 꽤 긴내용의 파라미터를 보내서 처리를 할경우 난감한 상황을 만나게 된다..;;
그래서 구글링했더니 아래와 같은 꽁수(?)로 해결을 봤다.
결과적으로 $.post를 사용 post방식으로 처리를하지만 결과값을 json형식으로 받는다고 정의를 한후 사용하게 된다.

postJSON이라는 별도의 함수를 만든후 사용하게 된다. 

좀 지났지만 지난 1월 14일에 jQuery가 1.4버젼으로 업데이트 됐다.(1.3버전업이후 1년만이다...)
이번 버젼에서도 지난 1.3업데이트와 마찬가지로 퍼포먼스에 많은 발전이 있었고 몇가지 함수도 추가 되었다..
우선 속도면에서 지난 1.3버젼과 비교를 하자면 아래 그래프를 참고하자.

프로젝트 진행중에 jQuery의 $.get 메소를 사용하여 데이터를 가져오는 로직이 추가되었다.
해당 처리부분을 테스트중에 한가지 이슈가 생겻다..

$.get 메소를 사용하여 데이터를 가져올때 계속 새로운 데이터를 가져오지 않고 브라우져의 캐쉬데이터를 사용하고 있더라.;;
해당 브라우져는 IE8.0이였으면 파폭에서 테스트했을경우 정상적으로 데이터를 가져오는 현상발생.;;
처음엔 jQuery의 $.get 메소드에 혹시 초기값을 셋팅을 해줘야하는게 있는줄알앗다.;;
확인결과 IE의 고질적인 브라우져 캐쉬버그(?)로 상당히 오랜전에 나왔던 이슈였던걸 이제야 내가 경험을 하게 됏다.-_-;..

jQuery의 $.get메소드 문제가 아니였으니 해결책은 몇가지 방법이 있었다.(jQuery 기준;;)

1. 파라미터값에 불특정값을 추가하여 매번 request를 날리게 한다..
    var params = {
      tsTimeStamp = new Date().getTime();
    }
    $("test.jsp", params, function (returnData){
        alert(returnData);
    });
   위와 같이하면 new Date()가 항상 다른 값이 나와 test.jsp호출시 매번 서버에 request를 날리게 된다.

2. $.post를 사용하라..
   사실 get과 post의 사용용도가 차이가 있다. get는 주로 일반적인 데이터 조회용이고 post는 데이터의 조작을 위할때 사용한다.
   어쨋든 post는 IE에서도 캐쉬를 사용하지 않으니 $.post를 사용하면 된다.

3. $.ajax 메소드의 cache : false 를 사용하라.
   $.get 이나 $.post의 경우 사용자의 편의를 위해 이미 기본셋팅이 된상태로서 사용자는 기본설정값만으로 사용되어진다.
   하지만 좀더 디테일하게 ajax를 사용하고자할려면 $.ajax를 사용 해당 설정값중에 cache 값에 false를 주면 된다..

참고 : [http://www.sitecrafting.com/blog/ajax-ie-caching-issues/]

jQuery 1.3되면서 추가된 함수중에 알면 상당히 유용한 함수가 있다..
바로 live() 함수가 그것이다.

보통 이벤트를 적용할때 자주 사용하는게 bind()를 사용하는데 bind()의 문제점은 Ajax나 append 처럼
페이지가 동적으로 생성되었을때 기존 event 효과가 적용이 안되는데 있다.

기존에는 이 문제점을 동적 생성후 재 bind()를 적용했었다.ㅡ.,ㅡa. 아무래도 좋은 방법은 될수없다.
이런 이슈를 해결하기 위해 LiveQuery라는 플러그인이 있었는데..이 플러그인을 사용하면 동적으로 추가된 페이지들도
추가작업을 하지 않고서 event가 적용이 되었다.

이 LiveQuery 기능을 jQuery 1.3으로 버젼업하면서 새로 추가가 되었다. 그게 live()함수 되시겟다.
live()함수는 오라클의 trigger와 같은 개념이라 보면되겠다.
사용법은 기존 bind()와 동일하다.

<script type="text/javascript">
  $(document).ready(function(){
    
    $("p").live("click", function(){
      $(this).after("<p>Another paragraph!</p>");
    });

  });
</script>

해제는 die()함수다.=_=;.

자주 들르는 [IBM developerworks]커뮤니티 사이트에 흥미로운 기사가 올라왔다.
jQuery의 성능향상을 위한 방법을 3가지 정도 제시한 기사인데 기존에는 그냥 아무 생각없이 써왔던 방식이
좋지 않은 방법인줄 알았다..;;..

1) 되도록이면 CLASS 대신 ID를 사용하여 검색한다.

최대한 많은 검색 정보를 제공한다.

<%
   // getJSON을 사용시 callback파라미터를 자동으로 붙여주는데 이 callback으로 감싸줘야 한다.
     String callBack = request.getParameter("callback"); 
%>


<%=callBack%>(


[
    {
        "text" : "테스트01",
        "value" : "01"
    },
    {
        "text" : "테스트02",
        "value" : "02"
    } 
])

그럼 저 getData.jsp의 내용을 가져와 적용할 실제 페이지내용은 아래와 같다


 
<script type="text/javascript">


 $(function () { 


   var params = { seq : 1 }; //파라미터 선언 
 
  $.getJSON("getData.jsp?callback=?", params, function (returnData, textStatus){


       if(textStatus == 'success'){     

          //sample 객체에 SELECT 옵션내용 추가.


          $("#sample").loadSelect(returnData);


       } else { 


           alert("ERROR!");
           return;
        } 
       });  
 });




  //동적 SELECTBOX 구현을 위한 사용자 함수
  (function($) {
   //SELECT OPTION 삭제




   $.fn.emptySelect = function() {
       return this.each(function(){
         if (this.tagName=='SELECT') this.options.length = 0;
       });
    }




    //SELECT OPTION 등록
    $.fn.loadSelect = function(optionsDataArray) {
       return this.emptySelect().each(function(){
         if (this.tagName=='SELECT') {
             var selectElement = this;
             $.each(optionsDataArray,function(idx, optionData){
                 var option = new Option(optionData.text, optionData.value);
                 if ($.browser.msie) {
                     selectElement.add(option);
                 }
                 else {
                     selectElement.add(option,null);
                 }
             });
         }
      });
    }
  })(jQuery);
</script>

<select id="sample">


</select>
..편집기에서 붙였더니 들여쓰기가 다 엉망이 됐다.ㅡㅜ...




참고도서 : jQuery in Action(인사이트)