ajax 비동기 서버통신

function ajaxTest() {

    $.ajax ({

        type : "GET",               // GET / POST

        url : 'test.html',          // 서버측에서 가져올 페이지

        data : 'a=1&b=2&c=3',       // 서버측에 전달할 parameter

        timeout : 3000,             // 응답대기시간

        dataType : 'html',          // html , javascript, text, xml, jsonp 등

        beforeSend: function() {    // ajax 요청하기전에 실행되는 함수

 

        },

        success : function(data) {     // 정상적으로 완료되었을 경우에 실행된다

 

        },

        error : function(request, status, error ) {   // 오류가 발생했을 때 호출된다.

 

        },

        complete : function () {   // 정상이든 비정상인든 실행이 완료될 경우 실행될 함수

 

        }

    });

}

 

success / error / complete 대신 done / fail / always 사용 가능

 

$.ajax ({ }).done(function(){  }) //요청 성공

$.ajax ({ }).fail(function(){  }) //요청 실패

$.ajax ({ }).always(function(){  }) //성공 실패 상관없이 호출

 

 

$.ajax ({

   url : "test.js",

   success : function(data) { console.log("success")},

   error : function(data) { console.log("error ")},

   complete : function(data) { console.log("complete")},

})

.done(function(){ console.log("done") })

.fail(function(){ console.log("fail") })

.always(function(){ console.log("always") })

 

콘솔에 표시되는 순서는 다음과 같다.

 

1. 성공일 경우 : success > complete > done > always

2. 실패일 경우 : error > complete > fail > always

 

 

 

참고 :  http://doolyit.tistory.com/20

 

 

 

예제 : 

 

$.ajax({

    type : 'POST',

    url : "http://choisblog.tistroy.com/manage/test1",

    dataType : 'JSON',

    contentType : 'application/json',

    data : {

        "head":{

            "test" : "data1"

        },

        "body":{

            "num":1,

            "cnt":5,

            "testCode": "ABC1001"

        }

    },

    success : function(data){

        console.log(JSON.stringify(data));

    },

    error : function(code,status,error){

        console.log("error : " + status);

        console.log(error);

    }

});

 

 

 

$.getJSON( "http://naver.com", function() { //  example.json
  console.log( "success" );
})
  .done(function() {
  console.log( "second success" );
  })
  .fail(function() {
  console.log( "error" );
  })
  .always(function() {
  console.log( "complete" );
  });


콘솔 결과 : error
complete

 

 

 

* GET방식

 

$.get("http://api.bit.ly/v3/shorten", data, function(re_data) {

                    if (re_data.status_code == 200) {

                         console.log(re_data.data.url);

                    }

               }, "json");

 

(URL, 전송할 DATA, 성공후 실행할 함수, 서버로 전송할 DATA TYPE)

 

* POST방식

$.post();

 

 

 

참고 : http://rocabilly.tistory.com/27