jQuery Tutorial - 2

Ajax 사용하기

출처 : http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery#Rate_me:_Using_Ajax

다음은 jQuery에서 Ajax를 사용하는 예제인데 http://jquery.bassistance.de/rate.phps 페이지에 접근하여 average와 count를 가져오는 예제임.

$(document).ready(function() {
  // 마크업 생성
  $("#rating").append("Please rate: ");

  for ( var i = 1; i <=5; i++
    $("#rating").append("<a href='#'>" + i + "</a> ");

  // 마크업을 컨테이너에 추가한 후 클릭 핸들러를 적용
  $("#rating a").click( function(e) {
    // 요청 전송
    $.post("rate.php", {rating: $(this).html()}, function(xml) {
    // 출력 결과 포매팅
    $("#rating").html(
      "Thanks for rating, current average: " + $("average", xml).text() +
      ", number of votes: " + $("count", xml).text()
    );
  });
  return false;
 });
});

Ajax를 이용하여 불러오는 컨텐츠에 이벤트 핸들러를 등록할 경우 발생할 수 있는 문제는 컨텐츠가 모두 불러오지 못한 상태에서 이벤트를 등록하지 못해서 발생하는 문제인데, 이러한 문제는 함수를 위임하여 처리할 수 있음.

function addClickHandlers() {
  $("a.remote", this).click( function() {
    $("#target").load(this.href, addClickHandlers);
  });
}
$(document).ready(addClickHandlers);