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]
'개발 > JQUERY' 카테고리의 다른 글
jquery checkbox 제어하기 [체크개수] (0) | 2017.11.24 |
---|---|
jquery datepicker(한글) (0) | 2017.08.01 |
jquery css 적용 방법 (0) | 2017.07.26 |
[Jquery radio button] 제이쿼리 라디오버튼 제어 (1) | 2017.05.18 |
jquery 배열, for문, 향상된 for문 each 객체의 확장 (0) | 2017.04.18 |