[Jquery] Ajax 관련 이벤트


안녕하세요. 명월입니다.


요즘 인터넷 웹서핑을 하면 Ajax 통신을 이용한 웹페이지가 많습니다. 예전엔 플래쉬가 많은 웹페이지가 많았는데 플레쉬는 점점 들어가고 Ajax통신으로 화려함에서 깔끔함으로 점점 바뀌고 있는 것 같습니다.

네이버의 실시간 검색 이라던가 구글의 순간 검색기능이라던가 그렇다고 Ajax가 만능은 아닙니다. 설계를 잘못하면 DB나 웹서버에 엄청난 부담을 줄 수 있는 로직이기 때문입니다. 설계를 할때 DB는 충분히 인덱스를 거시고 웹서버는 최대한 분산 시켜놓는 것도 하나의 방법일수도 있겠습니다.

 

그럼 Ajax 함수에 대해 알아 보겠습니다.

Ajax의 함수는 많이 있습니다. 물론 제가 거의 모르는 편이 맞을 정도 많이 있겠지요. 그 중 가장 많이 사용 되는 ajaxStart 함수 ajaxStop 함수가 있습니다.

 

ajaxStart - ajax 요청이 시작될 때 발생되는 이벤트 함수입니다.

ajaxStop - ajax 요청이 끝날때 발생되는 이벤트 함수 입니다.

function Ajax_Execute(){
  $.ajax({
    type: "POST",
    url: "data.html",
    data: "",
    success: function(resultText){
      $('#Data_Div').html(resultText);
    },
    error: function() {
      alert("Error");
    }
  });
}
$(document).ready(function($){
  var imege = $('#Loading_Image');
  imege.css('background',$('#Data_Div').css('background'));
  imege.css('position', 'absolute');
  imege.css('left', $('#Data_Div').offset().left);
  imege.css('top', $('#Data_Div').offset().top);
  imege.css('width', $('#Data_Div').css('width'));
  imege.css('height', $('#Data_Div').css('height'));
  $('#Loading_Image').ajaxStart(function(){
    $(this).show();
  }).ajaxStop(function(){
    $(this).fadeOut(1000);
  });
});

설명 div에 ajax를 걸면 Loading_Image 라는 객체가 반응을 하게 된다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
  <HEAD>
    <TITLE>Develop note</TITLE>
    <script src= "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script>
      function Ajax_Execute(){
        $.ajax({
          type: "POST",
          url: "data.html",
          data: "",
          success: function(resultText){
            $('#Data_Div').html(resultText);
          },
          error: function() {
            alert("Error");
          }
        });
      }
      $(document).ready(function($){
        var imege = $('#Loading_Image');
        imege.css('background',$('#Data_Div').css('background')); 23 imege.css('position', 'absolute');
        imege.css('left', $('#Data_Div').offset().left);
        imege.css('top', $('#Data_Div').offset().top);
        imege.css('width', $('#Data_Div').css('width'));
        imege.css('height', $('#Data_Div').css('height'));
        $('#Loading_Image').ajaxStart(function(){
          $(this).show();
        }).ajaxStop(function(){
          $(this).fadeOut(1000);
        });
      });
    </script>
    <style>
      input{
        border-style:solid;
        width:100px;
        height:20px;
        font-size:10pt;
        font-family:돋움;
        font-weight:bold;
        color:white;
        border-color:blue;
        background-color:blue;
      }
      
      div#Loading_Image{
        background: #FFFFF0;
      }
    </style>
  </HEAD>
  <BODY>
    <div id="Loading_Image" style="text-align:center;display:none;height:16px;width:16px"><img src="ajax_loding.gif"/></div>
    <table cellpadding=0 border=0 cellspacing=1 style="background-color:#000000" align=center>
      <tr>    
        <td bgcolor="#FFFFFF">
          <div id="Data_Div" align='center' style="width:500px; height: 50px; background:#FFFF0F;" ></div>
        </td>
      </tr>
      <tr>
        <td bgcolor="#FFFFFF" align="center">
          <input type="button" value="실행" onClick="Ajax_Execute()"/>
        </td>
      </tr>
    </table>
  </BODY>
</HTML>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head runat="server">
    <title>Develop note</title>
  </head>
  <body>
    <div>
      Hello World!!
    </div>
  </body>
</html> 

실행 화면입니다.

예제를 첨부하겠습니다.

ajax_example.zip