ajaxStart() ajaxStop() 사용방법 및 예제보기

Last Modified : 2016-06-13 / Created : 2016-06-13

14,927
View Count

주소 복사하기

비동기 방식(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>

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