jQuery ajax 기본 사용법 ... 비동기적 서버통신 done,fail, always

ajax 는 Asynchronous Javascript and Xml 의 약자인데, 비동기식 자바스크립트와 XML 이라고 보면된다

javascript 의 XMLHttpRequest  를 이용하여 직접 구현하여도 되지만, 

jQuery 를 이용하는 것이 훨씬 더 간단하게 구현할 수 있다.

가장 큰 특징은 현재 페이지에서 페이지의 이동/전환없이, 특정 이벤트를 통해 서버와 http 통신을 할 수 있다는 것이며, 이를 통해 현재 페이지의 일부분을 업데이트 할 수 있다는 것이다.

function ajaxAct() {

$.ajax ({

type : "GET",                     // GET 또는 POST

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

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

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

dataType : 'html',               // html , javascript, text, xml, jsonp 등이 있다

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

},

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

dataAct(data);              // data 인수에는 return 되어진 data 가 저장되어 있다

},

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

console.log("code:"+request.status+"\n"+"message:"+request.responseText+"\n"+"error:"+error);

},

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

}

});

}

이때, success , error, complete 대신에 done, fail, always 를 사용해도 된다. 

$.ajax ({

})

.done(function(){ console.log("요청 성공시 호출") })

.fail(function(){ console.log("요청 실패시 호출") })

.always(function(){ console.log("성공 실패 상관없이 호출") })

예를들어, 아래와 같이 코딩한 후 실행을 시킨다면

$.ajax ({

url : "request.php",

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

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

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

})

.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

GET 방식을 이용하는 경우라면 아래와 같이 parameter 전달시에 URL 에 추가해서 전달할 수도 있다. 

url : 'updatetest.htm?name=이름&sex=male',

위의 ajaxAct() 를 실행시키면 updatetest.htm 을 불러오게 될텐데 만약, 아래와 같이 코딩한다면,

정상적으로 동작하지 않게된다. 왜냐하면 href 로 인해 페이지의 전환이 일어나게되고

페이지의 전환이 생기게되면 ajax 요청은 무시되기 때문이다. 

그러므로 ajax 요청은 페이지 전환없이, javascript 함수등을 이용하여 호출해 주어야 한다. 

본 포스팅은 아래 포스팅을 참고하였음

출처: http://doolyit.tistory.com/20 [동해둘리의 IT Study]