ajax를 이용한 제이쿼리 비동기식 전송방법 살펴보기~~

예전 ajax는 jquery ajax란 이름으로 흡수가 되어서 사용에 혼돈이 있습니다만, ajax라는건 변함이 없습니다. 비동기식으로 화면처리를 할때 꼭 필요한데요. 이걸 어떻게 호출하고 사용하는지 천천히 살펴보도록 하겠습니다.

 

우선 스크립트에서 제이쿼리 ajax 호출을 하는 부분을 살펴보겠습니다. 소스하이라이트 스크립트가 사라졌는지 잘 나오지가 않네요. 이글을 적고 한번 확인해봐야 할것 같네요 ㅎㅎ

 

이전에 적었던 글인데 참고하세요.

 

2015/06/18 - [블로그] - 티스토리 소스 하이라이트 - SyntaxHighlighter

 

 

제이쿼리 비동기식 전송방법은 정말 간단한데요. ajax함수를 호출해서 사용하면 간단하게 처리가 됩니다.

 

 

 

기본 옵션도 잘되어 있어서 post, get 방식부터 지정할 수 있으며, 응답에 따른 결과 이벤트도 제어가 가능하기 때문에 많이 사용하고 있습니다.

 <script>
  $(document).ready(function() {
callList('test.php');
 
 
 
function calllist(url){
   $.ajax({
     type : "POST" //"POST", "GET" 
     , async : true //true, false
     , url : url //Request URL
     , dataType : "html" //전송받을 데이터의 타입
              //"xml", "html", "script", "json" 등 지정 가능
              //미지정시 자동 판단
     , timeout : 30000 //제한시간 지정
     , cache : false  //true, false
     , contentType: "application/x-www-form-urlencoded; charset=UTF-8"
     , error : function(request, status, error) {
      //통신 에러 발생시 처리
      alert("code : " + request.status + "\r\nmessage : " + request.reponseText);
     }
     , success : function(response, status, request) {
      $('#resultDIV').empty();     
      $('#resultDIV').append(response);    
     }
     , beforeSend: function() {
      //통신을 시작할때 처리
      $('#ajax_indicator').show().fadeIn('fast'); 
     }
     , complete: function() {
      //통신이 완료된 후 처리
      $('#ajax_indicator').fadeOut();
     }
    });
   }
 
 
 
   });
 
 
 
</script>
 
 
<div id="resultDIV"/>
<div id="ajax_indicator"/>

 

자, 그럼 소스를 한번 파해쳐 볼께요. 기본적으로 제이쿼리 라이브러리 로드하는건 알고 계시죠? 스크립트 단에서는 문서가 로딩될때 callList 라는 함수를 호출합니다. 이 callList 함수는 ajax 호출함수로서 응답을 요청받아서 resultDIV에 다시 결과물을 뿌려줍니다.

 

 

 

제가 예를든 소스는 url을 읽어와서 <div id="resultDIV"/> 에 뿌려주는 기능을 합니다. 소스도 무척 간단하여 보시면 간단하게 처리가 되실겁니다.

 

오늘은 제이쿼리 비동기식 전송방법에 대해서 알아보았습니다. 즐 코딩하세요!!