Rev. 2.73

Ajax의 활동여부를 알리기 위한 알림이(Indicator)를 표시하기 위해 똑같은 반복 작업을 한적이 있다. 모든 Ajax요청의 onLoading, onComplete 콜백에 알림이를 보이고 숨기는 코드를 삽입하는 것이다. 목적이 서로다른 Ajax요청이 수십가지에 달한다면 매우 비효율적인 작업이 아닐 수 없다. 그러나 Prototype의 코어를 조금만 손대면 매우쉽게 전역 Ajax알림이를 구현할 수 있는 꼼수가 있다. 아래와 같은 Indicator라는 함수가 있다고 가정하자.

// Global Ajax Indicator
var Indicator = Class.create({
  initialize: function() {
    this.element = document.createElement('div');
    this.element.style.display = 'none';
    this.element.className = 'indicator';
    document.body.appendChild(this.element);
  },
  show: function() {
    this.element.show();
  },
  hide: function() {
    this.element.hide();
  }
});
Indicator = new Indicator();

보통은 아래와 비슷한 형식으로 Ajax 작동상태를 표시한다.

new Ajax.Request('/ajaxUrl', {
  onLoading: function() {
    Indicator.show();
  },
  onComplete: function() {
    Indicator.hide();
  },
  onSuccess: function(req) {
    // some actions
  }
});

Ajax객체를 생성 할 때 마다 위와 같은 작업을 일일이 해야하는 것이다. 그리고 때로는 onComplete 콜백을 놓치는 경우도 있어 알림이가 영영 사라지지 않는 현상도 발생한다. prototype.js의 Ajax.Responders.register 메서드를 아래와 같이 오버라이드하면 이 문제를 일거에 해결 할 수 있다.

// show/hide indicator on all Ajax callbacks
Ajax.Responders.register({
  onCreate: function() {
    Indicator.show();
    Ajax.activeRequestCount++;
  }, onComplete: function() {
    Indicator.hide();
    Ajax.activeRequestCount--;
  }
});

하지만, Ajax요청마다 알림이의 모양과 위치가 다르다면 '즐'이다.

Comments

Got something to add? You can just leave a comment.

Your Reaction Time!

captcha

avatar