비동기 방식(AJAX)을 사용한 웹사이트 구현시 제이쿼리의 ajax()메소드를 많이 사용한다. 이때 AJAX의 요청이 시작 또는 완료될 경우 특정한 메시지나 문구를 방문자에게 알림창 등의 방식으로 보여주기 위하여 ajaxStart() 그리고 ajaxStop()메소드를 사용할 수 있다. 먼저 이 두가지 메소드를 간단하게 설명하면 아래와 같다.



ajaxStart() 메소드 - AJAX 요청이 시작되는 시점에 해당 함수를 실행
ajaxStop() 메소드 - 실행중인 모든 AJAX 요청이 멈추게되면 해당 함수를 실행




# AJAX 실행시 함수 실행이 필요한 경우
비동기 방식은 페이지 reload에 따른 화면 전환이 발생하지 않으므로 사용자가 인지하기 어렵다. 이런 경우 사용자가 쉽게 알아볼 수 있는 UI를 제공하는 것이 좋으며 이 경우 자주 사용되는 방법이 Loading 메시지를 AJAX가 일어나는 콘텐츠 영역이나 화면 중앙에 모달 형식으로 보여주는 경우가 많다. 그럼 아래에는 이를 사용한 자세한 예제코드를 알아보자.


# ajaxStart() 예제보기

아래 예제는 버튼을 클릭할 경우 새로운 콘텐츠를 불러오는 간단한 예제로 버튼을 클릭해 AJAX가 실행될 경우 Loading이란 문구가 나타나는 예제이다.

<h4>ajaxStart() 메소드 예제</h4>
<div class="test">Test</div>
<p>Press Button !!</p>
<button>Button</button>
<script>
$(function)() {
   $(document).ajaxStart(function () {
      $('p').text('Loading');
   });
   $("button").click(function () {
      $(".test").load("test.txt");
   });
})
</script>


ajaxStart() 메소드 예제


TEST
Press Button !!





위 예제에서는 버튼을 클릭하여 AJAX가 실행되면 상단의 'Press Button !!' 문구가 Loading... 으로 바뀌어 출력하게된다.


# ajaxStop() 예제보기

ajaxStop() 역시 ajaxStart()와 거의 동일한 방법으로 사용된다. 다만 AJAX가 끝나면 해당 함수를 호출하게 된다. 그럼 아래 예제를 보자.
<h4>ajaxStop() 메소드 예제</h4>
<div class="test">Test</div>
<p>Press Button !!</p>
<button>Button</button>

<script>
$(function)() {
   $(document).ajaxStop(function () {
      $('p').text('Complete!!');
   });

   $("button").click(function () {
      $(".test").load("test.txt");
   });
})
</script>

이를 실행하면 아래와 같다.

ajaxStop() 메소드 예제

TEST
Press Button !!




여기까지 간단한 예제 두 가지를 알아보았다. AJAX가 수행될 경우 함수를 호출하는 또 다른 방법으로 ajaxSetup() 메소드를 사용하는 방법이 있다.