Recommanded Free YOUTUBE Lecture: <% selectedImage[1] %>

Ajax Start, End 이벤트 처리

jQuery를 이용하면 Ajax 요청 시작과 응답 완료에 대한 이벤트를 받을 수 있다. 이를 이용하면, 요청의 상태정보를 알려주는 코드를 만들 수 있다.

에제 코드

  • 버튼을 클릭하면 test.php를 호출 한다.
  • 호출하면 "로딩 중..." 메시지를 출력한다.
  • test.php를 호출하면 5초 후에 응답이 완료된다.
  • 응답이 완료되면 "로딩 중..."을 숨긴다(hide).

<input type="button" id="click" value="클릭">
<div id="log"></div>
<script>
// $.ajax() 메서드를 이용한다.
$(document).ajaxStart(function(){
  $("#log").text("로딩 중...");
}).ajaxStop(function() {
  $("#log").hide();
})

$("#click").click( function() {
$.ajax({
  // 요청할 URL
  url: "test.php",

  // 데이터를 전송한다. Query 문자열로 변환된다.
  data:{
    id: 123
  },

  // GET 메서드로 호출한다.
  type: "GET",
  // 응답 데이터가 json일 것으로 기대한다.
  dataType: "json",

  // 요청이 성공했을 경우 처리 코드
  success: function(json) {
    $("<h1 />").text(json.Name).appendTo("body");
    $("<div class=\"content\"/>").html(json.email).appendTo("body");
  }, 

  // 요청이 실패하면 경고창을 띄운다.
  error: function(xhr, status) {
    alert("Sorry, ther was a problem!");
  },
})
});
</script>