Protoload 사용하기.

프로토타입을 사용하여 AJax 프로그래밍을 할 경우 Ajax 로딩 인디케이터 컴포넌트를 사용하여 로딩중 이란 모습을 사용자에게 보여 줄 수 있다.

이것을 사용하기 위해서 Protoload.js 라는 파일이 필요한데, Prototype을 바탕으로 해서 만들어 졌기 때문에 Prototype.js 역시 필요하다.

Prototype.js 다운로드
Protoload.js 다운로드

위의 파일들을 다운로드 한 후 각각 폴더에 알맞게 위치 시킨 다음
protoload 폴더에는 protoload.js, protoload.css, bigBlackwaiting.gif, bigWaiting.gif, blackWaiting.gif, waiting.gif 파일이 있을 것이다.

protoload.css 는 css폴더로 옴겨주고 사용할 html, jsp 파일에서 임포트 하면 되고.
img 파일들도 imgs 폴더로 이동 시키고 css내에 img 파일 경로를 수정하면 사용 준비가 완료된다.

function imageSearch(fileName) {
    new Ajax.Request("imageRetrieval.action",
        {
            method : 'POST',
            parameters : { uploadFileName:fileName },
            onLoading  : function() {
                $('results').startWaiting('bigWaiting');
               },
            onSuccess : function(req) {
                viewResult(req);
            },
            onFailure : function() {
            },
            onComplete : function() {
                $('results').stopWaiting();
            }
        }
    );
}

이렇게 사용하게 되면
results 라는 id 를 가진 html 요소에 bigWaiting 이란 파일을 읽어와서 로딩 이미지를 보여주게 된다.

onLoading은 Ajax에서 요청을 실행시켰을때 실행 되는 것이고
onComplete는 Ajax 요청이 성공하던지 실패 했던지 마지막으로 실행되는 것이다.

BigWaiting.gif

waiting.gif

참고 하였던 아웃사이더님 블로그.