[JAVASCRIPT] Ajax

ajax함수
ajax함수는 다음과 같은 표현식으로 구현이 되며, options에 들어갈 속성을 아래에 정리해 놓았습니다. 더 자세한 사항은 넥스트리 블로그에 게시된 김재훈 님의 Ajax를 품은 jQuery를 참조하시면 됩니다.

1	$.ajax(options);

• url : 통신을 원하고자 하는 URL주소를 입력합니다.(필수 입력 값)
• data : 서버로 보낼 데이터를 입력합니다.
• type : GET, POST등의 통신 방식 지정합니다.
• dataType : 통신의 결과로 넘어올 데이터의 종류를 지정합니다.
• success(data) : 통신 성공시 호출 해야하는 함수를 지정합니다. 매개변수로 결과로 넘어온 데이터를 받습니다.
• error : 통신 실패시 호출 해야하는 함수를 지정합니다.
• complete : 통신 성공 여부와 관계없이 통신이 끝난 후 호출 해야하는 함수를  지정합니다.
• beforeSend : 통신 전에 호출 해야하는 함수를 지정합니다.
• async : 비동기(true), 동기(false) 여부를 지정합니다.

 

 

 

 

 

 

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.rejectWith() 

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

deferred.resolveWith()

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