ajax의 모든것 ( jquery를 이용한 ajax 사용 )

Ajax

Ajax(Asynchronous Javascript and XML , 에이잭스)는 대화식 웹 애플리케이션의 제작을 위해 이용하는 웹 개발 기법. 관련 태그 :  HTML, CSS, DOM, 자바스크립트

장점 페이지 이동없이 고속으로 화면을 전환할 수 있다. 서버 처리를 기다리지 않고, 비동기 요청이 가능하다. 수신하는 데이터 양을 줄일 수 있고, 클라이언트에게 처리를 위임할 수도 있다. 단점 Ajax를 쓸 수 없는 브라우저에 대한 문제가 있다. Http클라이언트의 기능이 한정되어 있다. 페이지 이동없는 통신으로 인한 보안상의 문제 지원하는 Charset이 한정되어 있다. 스크립트로 작성되므로 Debugging이 용이하지 않다. 요청을 남발하면 역으로 서버 부하가 늘 수 있음. 동일-출처 정책으로 인해 다른 도메인과는 통신이 불가능하다.

< 참고 > 1 기존 기술과의 차이점 2 Ajax의 보급 3 Ajax라는 용어에 대한 비판 4 Ajax와 접근성 5 웹 브라우저 5.1 Ajax를 지원하는 웹 브라우저 5.2 Ajax를 지원하지 않는 웹 브라우저 6 예제 6.1 jQuery 예제 7 주석 8 바깥 고리 8.1 Ajax 프레임워크

1. jquery Ajax 기본 메서드

$.ajax( url [, settings ] );

$.ajax({

  url: "http://fiddle.jshell.net/favicon.png",

          beforeSend: function( xhr ) {

            xhr.overrideMimeType( "text/plain; charset=x-user-defined" );

          }

    })

   .done(function( data ) {

      if ( console && console.log ) {

        console.log( "Sample of data:", data.slice( 0, 100 ) );

      }

});

2. jquery Ajax 부가 메서드

1) $.get(url [,data][,success][,dataType])               get 방식으로 ajax 를 수행함

2) $.post(url [,data][,success][,dataType])             post 방식으로 ajax 를 수행함

3) $.getJSON(url [,data][,success])                       get 방식으로 ajax 를 수행하여 json 데이터를                                                                         가져옴 (jsonp 사용가능)

4) $.getScript(url [,success])                                get 방식으로 ajax 를 수행하여 javascript                                                                         데이터를 가져옴

5) $(selector).load(url [,data][,complete])               ajax를 수행한 후에 선택자로 선택한 문서 

객체 안에 응답 데이터를 넣음

3. jquery Ajax 보조 메서드

1) $.param( obj )                        객체의 내용을 요청 매개 변수 문자열로 만듬

<script>
var params = { width:1680, height:1050 };
var str = jQuery.param( params );
</script>
결과 >>> width=1680&height=1050

2) .serialize()                            입력 양식의 내용을 요청 매개 변수 문자열로 만듬

<form>
  <select name="single">
    <option>Single</option>
    <option>Single2</option>
  </select>
 
  <br>
  <select name="multiple" multiple="multiple">
    <option selected="selected">Multiple</option>
    <option>Multiple2</option>
    <option selected="selected">Multiple3</option>
  </select>
 
  <br>
  <input type="checkbox" name="check" value="check1" id="ch1">
  <label for="ch1">check1</label>
  <input type="checkbox" name="check" value="check2" checked="checked" id="ch2">
  <label for="ch2">check2</label>
 
  <br>
  <input type="radio" name="radio" value="radio1" checked="checked" id="r1">
  <label for="r1">radio1</label>
  <input type="radio" name="radio" value="radio2" id="r2">
  <label for="r2">radio2</label>
</form>

 
<script>
  function showValues() {
    var str = $( "form" ).serialize();
    $( "#results" ).text( str );
  }
  $( "input[type='checkbox'], input[type='radio']" ).on( "click", showValues );
  $( "select" ).on( "change", showValues );
  showValues();
</script> 

결과 >>> single=Single&multiple=Multiple&multiple=Multiple3&check=check2&radio=radio1

3) .serializeArray()                            입력 양식의 내용을 객체로 만듬

<form>
  <select name="single">
    <option>Single</option>
    <option>Single2</option>
  </select>
 
  <br>
  <select name="multiple" multiple="multiple">
    <option selected="selected">Multiple</option>
    <option>Multiple2</option>
    <option selected="selected">Multiple3</option>
  </select>
 
  <br>
  <input type="checkbox" name="check" value="check1" id="ch1">
  <label for="ch1">check1</label>
  <input type="checkbox" name="check" value="check2" checked="checked" id="ch2">
  <label for="ch2">check2</label>
 
  <br>
  <input type="radio" name="radio" value="radio1" checked="checked" id="r1">
  <label for="r1">radio1</label>
  <input type="radio" name="radio" value="radio2" id="r2">
  <label for="r2">radio2</label>
</form>

 
<script>
  function showValues() {
    var fields = $( ":input" ).serializeArray();
    $( "#results" ).empty();
    jQuery.each( fields, function( i, field ) {
      $( "#results" ).append( field.value + " " );
    });
  }
 
  $( ":checkbox, :radio" ).click( showValues );
  $( "select" ).change( showValues );
  showValues();
</script>
 

결과 >>> Single2 Multiple2 check2 radio1

4. jquery Ajax 이벤트 연결 메서드

  - spinner 구현 등에 사용 ( 아래 순서대로 이벤트 실행 )

  - 만약 $.ajax() 나 $.ajaxSetup() 의 global 옵션값이 false 이면 이벤트 핸들러는 작동하지 않음

1) .ajaxStart( handler )                        ajax 요청을 시작할 때 실행

2) .ajaxSend( handler )                       ajax 요청을 보낼 때 실행

3) .ajaxSuccess( handler )                  ajax 요청이 성공할 때 실행

4) .ajaxError( handler )                        ajax 요청이 실패할 때 실행

5) .ajaxComplete( handler )                  ajax 요청이 완료될 때 실행

6) .ajaxStop( handler )                        ajax 요청을 중지할 때 실행

$( document ).ajaxComplete(function( event, xhr, settings ) {
  if ( settings.url === "ajax/test.html" ) {
    $( ".log" ).text( "Triggered ajaxComplete handler. The result is " +
      xhr.responseHTML );
  }
});

○ Ajax 를 동기방식(순차적 프로세스)으로 사용하기

  : 기본적으로 비동기로 데이터를 처리하기 위해 쓰는 ajax 이지만 가끔 순차적으로 프로세스가 진행되어야 할 경우가 있음.

    가끔 코드 보다보면 setTimeout 함수를 써서 일부러 다음 프로세스를 지연시켜 실행하는 경우도 발견함.

    이런 경우 간단하게 속성에서 async:false (비동기:해제) 를 추가하자.

    요로코롬...

$.ajax({
               type: 'POST',
               url: 'test/test.jsp',
               data: dataParam,

                   async: false,
                   success: function(data) {
                    if(data != null) {
                         
                    }
               }
          });

<참고>

한국어 위키백과 : http://ko.wikipedia.org

jquery api 참고 : http://api.jquery.com/

모던 웹을 위한 Javascript jQuery 입문 (윤인성 지음)