Protoload는 Andreas Kalsch가 만든 Prototype Framework를 기반으로 한 Ajax 로딩 인디케이터를 사용하게 해주는 라이브러리이다. Ajax 로딩 인디케이터란 Ajax 통신을 시작할 때 데이터가 로딩중임을 사용자에게 알려주는 역할을 하는 것으로 보통은 GIF이미지가 사용되고 어떤 인디케이터를 사용할 지는 만드는 사람 맘이긴 하지만 보통 우측의 이미지가 Ajax 로딩 인디케이터의 대표적이다.

Prototype Framework를 기반으로 하기 때문에 당연히 프로토타입을 인클루드 해주어야 한다.

<script type="text/javascript" src="scripts/prototype.js"></script>
<script type="text/javascript" src="scripts/protoload.js"></script>

Prototype Framework를 먼저 인클루드 하고 Protoload사이트에서 다운받은 protoload.js파일도 인클루드 하면 사용해 대한 준비는 완료된다. 버전이 0.1이기는 하지만 몇번 다뤄본 경험으로는 사용상에 큰 문제점은 없는 것 같다. 일단 인디케이터라는게 아주 복잡하진 않기 때문에...

Ajax로딩을 사용자에게 알려주는 것은 아주 중요한 일이지만 따로 구현할려면 꽤나 난감하게 생각되는데(따로 구현해 본적은 없다.) protoload는 아주 쉽게 로딩 인디케이터를 사용할 수 있게 해준다.

여기서 제공하는 것은 아주 간단하면서도 편리한데 원하는 엘리먼트에 인디케이터를 표시할 수 있는 점이 아주 좋다. 예를 들어 "ajaxWait"라는 id를 가진 엘리먼트에 인디케이터를 표시하고자 한다면

$("ajaxWait").startWaiting('bigWaiting');
$("ajaxWait").stopWaiting();

위와같이 써주면 된다. 인디케이터를 표시할 엘리먼트는 어떤 것이든지 상관없다. div도 되고 button, select, input등 원하는대로 표시할 수 있고 전체 페이지에 표시하려면 엘리먼트의 id대신에 document.body를 넘겨주면 된다. 파라미터르 넘겨준 bigWaiting는 protoload에서 제공한 css에 들어있는 클래스 이름이다. 즉 지정한 CSS 클래스를 사용하겠다는 의미이고 css에 정의되어 있다면 다른 클래스 이름을 선택해도 무방하다. 페이지에 맞게 스타일을 정한다음 지정만 해주면 된다.

prototype.js의 Ajax를 사용할 때는 startWaiting은 onLoading에서 stopWaiting은 onComplete에서 지정해 주면 된다.(구동되는 것은 protoload 사이트에 나와있으니 사이트를 참고하기 바란다.)

// protoload.js 사용하기
new Ajax.Request("ajax.jsp",
    {
        method:'get',
        parameters : { par:Code },
        onLoading  : function() {
            $("ajaxWait").startWaiting('bigWaiting');
        },
        onSuccess  : function(returnValue)
        {
            var returnValue = returnValue.responseText;
        },
        onFailure  : function() {
        },
        onComplete : function() {
            $("ajaxWait").stopWaiting();
        }
});

일반적인 사이트에서는 사용상에 문제가 없지만 탭을 쓴다던지 자바스크립트를 이용해서 DOM구성을 만져놓은 곳에서는 원하는 위치에 Ajax 로딩 인디케이터가 나오지 않는 경우가 있다. 이럴때는 10년차초보개발자님이 패치한 내용을 참고해서 protoload를 사용하면 아주 잘 돌아간다.(10년차초보개발자님 감사~~)




참고로 Ajaxload사이트를 이용하면 다양한 Ajax 로딩 인디케이터를 원하는 모양과 색으로 쉽게 제작할 수 있다. 페이지에 어울리는 인디케이터를 가져다가 쓰면 될 듯 싶다.