[Ajax]로딩..

Ajax를 쓰다보면 로딩을 뿌려줄때가 많다. 

로딩에도 여러가지가 있는것같다. 

1. 로딩될 자리에 "로딩중..." 이라는 글자나 뺑글 뺑글 돌아가는 이미지가 바로 뜨는 방법
2. 페이지 젤 하단이나 상단에 "로딩중.. " "저장중.." 이라는 글자가 뜨는 방법 (테터툴즈가 이렇지..아마..)
3. 화면 중간에 새창? (사실은 레이어인데 그냥 새창이라고 하겠음) 이 떠서 로딩중 글자 뿌려주는 방법 (나의 주거래 은행 하나 은행에서 이번에 리빌드 하면서 이방법을 쓰더라.. )

기타등등..

머.. 상황에 맞게 이렇게 저렇게 쓰면 될것같다. 
어떻게 보면 되게 간단하지만 나의 단기 기억상실을 보완하기 위해 여기에 소스와 사용법을 뿌려놓습니다. =,.=a

prototype 을 기본적으로 사용함을 미리 밝혀 둡니다.

<style>
#ajaxBox{
   border:3px solid #000000;
   width:300px;
   height:50px;
   position:absolute;
   background-color:#ffffff;
   text-align:center;
   font-weight:bold;
   padding:20px 0px 0px 0px;
   color:#FF6600;
   
}
</style>

<div id="ajaxBox"><div id="ajaxBoxMent">잠시만 기다려주세요..</div><img src="/images/ajax-loader.gif"></div>

<script>
function showAjaxBox(ment){
   
//항상 화면 중앙에 나타나도록...
   var yp=document.body.scrollTop;
   var xp=document.body.scrollLeft;

   var ws=document.body.clientWidth;
   var hs=document.body.clientHeight;
   
   if(!ment) ment="잠시만 기다려주세요..";
   
   var ajaxBox=$('ajaxBox');
   $('ajaxBoxMent').innerHTML=ment;

   ajaxBox.style.top=yp+eval(hs)/2-100;
   ajaxBox.style.left=xp+eval(ws)/2-100;

   Element.show(ajaxBox);    
}
</script>

이것이 소스답니다. 별거도 없는데.. 강좌랍시고 -_-;;;;

사용법은 아래와 같습니다.

function test(){

  showAjaxBox();//로딩 박스 보인후에...
   
   var url="Ajax.php";
   var myAjax=new Ajax.Request(
       url,
       {    
           asynchronous:true,            
           parameters:pars,                
           onComplete:function(res){
              
               Element.hide('ajaxBox');// 다 처리한후.. 박스를 숨김..
            
           }
       }
   );
}

아 그리고 페이지 맨 아래쪽에 이거 넣어주시구요~
상자가 처음에는 안보이게 합니다.

<script>
Element.hide('ajaxBox');
</script>