jQeury AJAX 예제

jQuery.ajax(url, [setting]) 또는 jQeury.ajax([setting])으로 사용합니다.

HTTP 리퀘스트에 대해 비동기 동작을 합니다.

속성값으로는 다음이 사용됩니다.

속성값은 더 많이 있지만 자주 사용하는 속성들은 이 정도에서 크게 벗어나지 않습니다.

기본 예제코드

$.ajax({
  url: "/json/people",
  data : {"id" : "admin"},
  beforeSend: function( xhr ) {
    console.log('리퀘스트 보내기 전에 데이터 조작가능');
  },success: function(d){
    console.log('서버에서 받은 데이터 = ' + d);
  }, error : function(e){
    console.error('에러발생');
  }
})

ajax를 통해 DOM을 추가하는 예제

$.ajax({
  url: "test.html",
  cache: false
}).done(function( html ) {
    $( "#results" ).append( html );
  });
});

위의 예제는 test.html이 동적으로 작동한다는 가정을 하고 cache를 false로 하고 사용하였습니다.

브라우저의 cache내용을 받지 않고 서버에서 새로 받아오겠다고 이해하면 됩니다.

그리고 ajax가 종료되면 done함수의 results 엘리먼트에 서버에서 받아온 HTML을 엘리먼트 뒤에 추가(append) 하게 됩니다.