[jQuery Quick API] 6.Ajax

[jQuery Quick API] 6.Ajax

6. Ajax


$.param() <jQuery.param()> : 폼 요소들의 값을 변환하여 직렬화된 문자열로 표현한다.

var params = {width : 1680, height : 1050}; // 배열 선언

var str = $.param(params); // Ajax로 전송가능하도록 직렬화

// $.param({a:[2,3,4]});  // "a[]=2&a[]=3&a[]4"

// $.param({a:{b:1,c:2},d:[3,4,{e:5}] }); // "a[b]=1&a[c]=2&d[]=3&d[]=4&d[2][e]=5"


.serialize() : 선택한 form의 데이터를 ajax로 전송할 수 있도록 직렬화 한다.

$("#name").serialize();   //  id name form의 데이터를 직렬화한다. a=1&b=2


.serializeArray() : 선택한 form의 데이터를 ajax로 전송할 수 있도록  배열로 직렬화 한다.

$("#name").serializeArray();  //  id name form의 데이터를 배열로 직렬화한다. [ { name : "a", value : "1" }, { name : "c", value:"3"}]


$.ajax() <jQuery.ajax()> : ajax 비동기 호출 전송

         $.ajax({

                type : 'POST',                                    // post 타입 전송

                url : 'some.php',                                // 전송 url

                data : "name=John&location=Boston",   // 전송 파라미터

                cache : false,                                  // ajax로 페이지를 요청해서 보여줄 경우

                                                  // cache가 있으면 새로운 내용이 업데이트 되지 않는다.

               async : true,                                    // 비동기 통신,  false : 동기 통신

               beforSend : fucntion(){                     // ajax 요청이 전송되기 전 실행 함수

                },

               success : function(msg){                   // 콜백 성공 응답시 실행

                },

               error : function(){                              // Ajax 전송 에러 발생시 실행

                },

             complete : function(){                       //  success, error 실행 후 최종적으로 실행

                  }

            });


.ajaxSend()  : ajax 요청이 서버로 보내지기전에 호출됨


.ajaxStart()  : ajax 요청이 서버로보내진 직후에 호출됨.


.ajaxStop()  : 응답을 서버로부터 받은 직후에 호출됨.


.ajaxSuccess() : 요청이 성공적으로 완료된 후에 호출됨.


.ajaxError()  : ajax 실행 후 에러 발생시 함수 실행 / $.ajax() 옵션의 error와 동일.


.ajaxComplete() : ajax 실행 후 최종적으로 함수 실행 / $.ajax() 옵션의 complete 와 동일.


$.ajaxPrefilter() <jQuery.ajaxPrefilter()>  : ajax 요청을 보내기 전에 Ajax 옵션들을 수정하거나 조작한다.

$.ajaxPrefilter(function(options)){ // options : request 요청 옵션 값들

}); 


$.ajaxSetup() <jQuery.ajaxSetup()> : 앞으로 발생할 ajax 요청에 대한 디폴트 값을 설정한다.

$("button").click(function(){  // button을 클릭할시 ajax 호출에 대한  

          $.ajaxSetup({ // url과 success 함수를 셋팅한다.

                      url : "test_ajax.txt",

                      success:function(result){

          })

});


$.get() <jQuery.get()> : get 방식으로 ajax 통신을 한다. 서버에서 가져온다.

$.get("test.php", function(data.status){..});   // "test.php"로 get 방식 통신 후 function 실행  


$.getJSON() <jQuery.getJSON()> : $.get()과 동일하나, 데이터 타입은 json 타입이다.


$.getScript() <jQuery.getScript()> : $.get()과 동일하나, 데이터 타입은 script, 동적으로 자바스크립트를 불러온다.

                            

$.post() <jQuery.post()> : post 방식으로 ajax 통신을 한다. 서버와 파라미터로 데이터를 주고받는다.

$.post("test.php",  // "test.php"로 

           {  //   name과 message 파라미터 

                    name: "myeonghyeon",

                    message : "hi"

           },

           function(data.status){..}  // callback() 함수 실행

);   // "test.php"로 파라미터를 보내 post 방식 통신 후 function 실행  


.promise() : 비동기함수(Ajax)가 리턴한 객체를 가진다.


.promise().done(); : 선택된 비동기함수 리턴 객체의 콜백이 성공, done 함수 실행

$("div").promise().done(function(){

          $("p").append("Finished");  // 모든 div 요소의 요청이 모두 성공하면, done 실행, p 요소에 finished 삽입

});


.promise().fail();  : 선택된 비동기함수 리턴 객체의 콜백이 실패, fail 함수 실행


.promise().then();  : 콜백이 성공하면(success) 리턴데이터를 then의 인자가 받아서 실행


$("div").promise().then(A).then(B);   // div에 주어진 액션이 성공하면 리턴값을 가지고 A 함수 실행 A함수 리턴값을 가지고 B 함수 실행


$.when() <jQuery.when()> : 인자의 함수의 콜백 후 리턴값을 반환한다.

$.when( effect() ).done(function(){

        $("p").append("finished");  // effect() 함수를 실행해서 성공하면 p 에 finished를 삽입한다.

});

$.when( A, B ).done(function(){  // 동시에 A,B 함수를 실행하고 모두가 성공할 경우 .done(function() 실행

});


$.deferred() <jQuery.deferred()>  : $.ajax가 반환하는 객체, pomise 객체와 같은 일을 할 수 있으며 추가적인 콜백 함수를 가진다.


deferred.always()  : 요청이 성공, 실패에 무관하게 항상 실행된다.


deferred.done() : 요청이 성공시 실행된다.


deferred.fail() : 요청이 실패시 실행된다.


deferred.isRejected() : 요청이 실패됐는지 확인한다.


deferred.isResolved() : 요청이 성공했는지 확인한다.


deferred.pipe() : 요청의 return 값을 인자로 넘겨준다.


deferred.promise() : 요청의 콜백을 객체로 가지고 있는다.


deferred.reject() : 요청이 실패시 fail() 함수를 호출한다.


deferred.resolve() : 요청이 성공시 done() 함수를 호출한다.


deferred.then() : 두개의 인자를 가지고 두개 모두 성공할 때 resolve(), 하나라도 실패하면 reject() 실행



출처: https://devbox.tistory.com/?page=15 [장인개발자를 꿈꾸는 :: 기록하는 공간] 

Facebook Twitter GooglePlus KakaoStory KakaoTalk NaverBand