jQuery를 사용하면 Ajax를 손쉽게 개발할 수 있다.


Ajax란?

Ajax란 Asynchronous JavaScript and XML을 의미한다.
Ajax는 프로그램 언어가 아니다.
Ajax는 JavaScript와 XML을 이용한 비동기적 정보 교환 기법이다.
Ajax는 웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신할 수 있게 해준다. Ajax는 백그라운드 영역에서 서버와 데이터를 교환하여 웹 페이지에 표시 및 데이터를 로딩해 준다.

아래 예제는 jQuery에서 제공하는 .load() 메소드를 이용하여 데이터를 로딩하고 있다.

$("#btnLoad").on("click", function() {
  $("#text").load("/rest/1/pages/244");
});

코드 실행

Ajax 프레임워크

Ajax를 사용하여 손쉽게 개발할 수 있도록 미리 여러 가지 기능들을 포함해 놓은 개발 환경을 Ajax 프레임워크라고 한다.
이러한 Ajax 프레임워크 중에서도 가장 많이 사용되는 대표적인 프레임워크는 다음과 같다.

  • Prototype : 널리 알려져 있는 AJAX 프레임워크
  • script.aculo.us : Prototype을 기반으로 하는 여러 인터페이스 제공
  • jQuery : prototype만큼 많이 사용되는 AJAX 프레임워크
  • jQuery UI : jQuery을 기반으로 하는 여러 인터페이스 제공
  • dojo : 다양한 화면효과, 위젯등을 제공
  • Google Web Toolkit : 구글에서 배포중인 AJAX 프레임워크
  • ASP.NET AJAX : MS에서 공식 개발된 ASP.NET 지원용 AJAX 프레임워크
  • YUI : Yahoo User Interface

이외에도 많은 Ajax 프레임워크가 있으며, 현재 가장 널리 사용되고 있는 Ajax 프레임워크는 제이쿼리(jQuery)이다.

여기서는 프레임워크라는 단어를 사용했는데, 다른 시각으로 보면 라이브러리라고 할 수도 있을 것이다. 하지만, Ajax 구현에 흐름을 제어하는 역활을 하기에 프레임워크라고 볼수도 있지 않을까 싶다.

jQuery를 사용한 Ajax

jQuery에서는 Ajax 기능을 손쉽게 사용할 수 있도록 여러 메소드를 제공하고 있다.
제공하는 메소드를 사용하면 HTTP 요청(request)을 손쉽게 보낼 수 있으며, 데이터의 종류에 따라 그에 알맞는 메소드를 사용하여 서버에 데이터를 요청할 수 있다.

jQuery.fx 객체

jQuery의 jQuery.fx 객체는 이펙트 효과가 구현되는 방법을 제어하는 다양한 프로퍼티를 가지고 있다.

프로퍼티설명
jQeury.fx.speeds밀리초에 해당하는 "slow", "fast" 등의 값을 가지고 이펙트 효과의 속도를 나타낸다.
jQeury.fx.interval이펙트 효과가 보여지는 동안의 초당 프레임 수를 나타낸다.
jQeury.fx.off모든 이펙트 효과를 사용할 수 없도록 비활성화시킨다.

jQuery.fx.speeds 프로퍼티

jQuery.fx 객체의 speeds 프로퍼티는 "slow", "normal", "fast" 값을 가지고 이펙트 효과의 속도를 나타낸다.

jQuery에서 제공하는 jQuery.fx.speed 프로퍼티의 기본값은 다음과 같다.

프로퍼티 값밀리초(milisecond)
fast200
normal400
slow600

이러한 속도의 기본값을 speeds 프로퍼티를 이용하여 변경할 수도 있다.

아래 예제는 show 프로퍼티 값을 변경하는 예제이다.

$("#btnRun").on("click", function() {
    $(".box").toggle("slow");
});
$("#btnSlow100").on("click", function() {
    jQuery.fx.speeds.slow = 100;
});
$("#btnSlow1000").on("click", function() {
    jQuery.fx.speeds.slow = 1000;
});

코드 실행

jQuery.fx.interval 프로퍼티

jQuery.fx 객체의 interval 프로퍼티는 이펙트 효과가 보여지는 동안의 초당 프레임 수를 나타낸다.

연속적인 프레임에서의 초당 프레임 수는 13으로 기본 설정되어 있습니다
이러한 초당 프레임 수를 interval 프로퍼티를 이용하여 사용 목적에 맞게 변경할 수 있다.

$("#btnRun").on("click", function() {
  $(".box").toggle(3000);
});
$("#btnInterval000").on("click", function() {
  jQuery.fx.interval = 1000;
});
$("#btnInterva13").on("click", function() {
  jQuery.fx.interval = 13
});

코드 실행

이 프로퍼티는 3.0 버전부터는 deprecated 되었다.

jQuery.fx.off 프로퍼티

jQuery.fx 객체의 off 프로퍼티를 true로 설정하면, 모든 이펙트 효과를 사용할 수 없게 된다.

이렇게 이펙트 효과가 비활성화되면, 이펙트 효과는 실행되지 않으며 이펙트 효과의 마지막 상태로 즉시 변경된다.
off 프로퍼티는 특히 구형 버전의 브라우저를 다룰 때 유용하게 사용될 수 있다.

예제


$(function() {
    $("#toggleBtn").on("click", function() {
        // id가 "divBox"인 요소를 1초에 걸쳐 올라가면서 사라지거나 내려오면서 나타나게 함.
        $("#divBox").slideToggle(1000);
    });
    $("#forbidBtn").on("click", function() {
        // jQuery.fx 객체의 off 프로퍼티를 true로 설정함.
        jQuery.fx.off = true;
    });
});

코드 실행

참조


이펙트 효과의 제어

jQuery에서는 다음 메소드를 사용하여 사용자가 직접 이펙트 효과를 제어할 수 있다.

메소드설명
.delay()실행 중인 큐 안에서 연속적으로 실행되는 이펙트 효과 사이의 지연 시간을 설정한다.
.stop()선택한 요소에서 실행 중인 모든 이펙트 효과를 즉시 중지시킨다.
.finish()선택한 요소에서 실행 중인 모든 이펙트 효과를 즉시 중지시키고, 선택한 요소가 포함된 큐까지 제거하여 모든 이펙트 효과를 전부 종료시킨다.

이펙트 효과의 지연 시간 설정

.delay() 메소드는 실행 중인 큐(Queue) 안에서 연속적으로 실행되는 이펙트 효과 사이의 지연 시간을 설정한다.

다음 예제는 페이드 아웃 효과와 페이드 인 효과 사이에 1초의 지연시간을 설정하는 예제이다.

아래와 같이 HTML 요소가 있을 때,

<p><button>실행</button></p>
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>

아래와 같이 실행 버튼을 누르면 사각형이 사라졌다가 id가 "first"인 요소는 지연 시간이 없고, "second"인 요소는 0.5초, "third"는 1초의 지연 시간을 가졌다가 다시 표시된다.

$("button").on("click", function() {
  $("div.first").slideUp(300).fadeIn(400);
  $("div.second").slideUp(300).delay(500).fadeIn(400);
  $("div.third").slideUp(300).delay(1000).fadeIn(400);
});

코드 실행

이펙트 효과의 중지

.stop() 메소드는 선택한 요소에서 실행 중인 모든 이펙트 효과를 일시적으로 중지시킨다.

아래 예제는 시작 버튼을 누르면 크기가 점점 커지다가, 중시 버튼을 누르면 일시 중지된다.

$("button#start").on("click", function() {
  $("div").animate({width: 300, height: 300}, 3000);
});
$("button#stop").on("click", function() {
  $("div").stop();
});

코드 실행

이펙트 효과의 종료

.finish() 메소드는 선택한 요소가 포함된 큐까지 제거하여 모든 이펙트 효과를 전부 종료시킨다.

아래 예제는 시작 버튼을 누르면 크기가 점점 커지다가, 종료 버튼을 누르면 효과가 종료된다.

$("button#start").on("click", function() {
  $("div").animate({width: 300, height: 300}, 3000);
});
$("button#finish").on("click", function() {
  $("div").finish();
});

코드 실행

.delay()와 .finish()의 차이점

.stop() 메소드와 .finish() 메소드는 실행 중인 이펙트 효과를 멈춘다는 점이 동일하다.
차이점은 .stop() 메소드는 일시적으로 중지를 시키는 반면에 .finish() 메소드는 중지가 아닌 아예 종료시킨다는 점이 다르다. 즉, .stop() 메소드로 중지를 시키면 다시 재개할 수 있지만 .finish() 메소드는 다시 재개할 수 없고 처음부터 다시 실행을 시켜야 한다.

+ Recent posts