jQuery로 Ajax 요청하기
jQuery는 특정한 Ajax 요청을 처리할 수 있는 네 개의 약식 메서드를 제공한다.
$.get(url, data, callback, type) : HTTP GET 요청으로 데이터를 보낸다.
$.post(url, data, callback, type) : HTTP POST 방식을 이용하여 서버의 데이터를 수정한다.
$.getJSON(url, data, callback) : GET 요청을 이용하여 JSON 데이터를 로드한다.
$.getScript(url, callback) : GET 요청을 이용하여 자바스크립트를 로드하고 실행한다. (예를 들면 JSONP)
이 메서드들은 다른 jQuery 메서드들과는 달리 객체집합을 대상으로 실행되지 않는다.
jQuery 객체 집합 대신 $ 기호만을 사용하는 이유는 바로 이때 문이다.
이 메서드들은 주로 페이지가 로드되거나 사용자와 페이지의 상호작용으로 인해 이벤트가 발생했을 때 호출된다.
$('#seelctor a').on('click', function(e){
e.preventDefault(); // 다른 페이지로 이동 막기
var queryString = 'vote=' + $(e.target).attr('id');
$.get('votes.php', queryString, function(data){
$('#selector').html(data);
});
});
Ajax 요청 상세하게 제어하기
$.ajax() 메서드를 이요하면 Ajax 요청을 완벽하게 제어할 수 있다.
jQuery의 Ajax 관련 약식 메서드들은 내부적으로는 모두 이 메서드를 사용한다.
type : 요청을 HTTP GET 또는 POST 방식으로 전송하기 위해 GET 또는 POST라는 값을 지정한다.
url : 요청을 보낼 페이지의 경로를 지정한다.
data : 요청과 함께 서버로 전달될 데이터를 지정한다.
success : Ajax 요청이 성공적으로 처리되었을 때 호출될 함수를 지정한다(.done() 메서드와 유사)
error : Ajax 요청의 처리가 실패했을 때 호출될 함수를 지정한다
beforeSend : Ajax 요청을 전달하기 전에 실행될 함수를 지정한다.
complete : 성공/실패 이벤트를 처리한 다음에 실행된다. 오른쪽 페이지의 예제에서는 로딩 중 아이콘을 제거할 때 사용한다.
timeout : 요청을 실패한 것으로 처리하기까지 기다릴 시간을 밀리초로 지정한다.
$('nav a').on('click', function(){
e.preventDefault();
var url = this.href;
var $content = $('#content');
$('nav a.current').removeClass('current');
$(this).addClass('current');
$('#container').remove();
$.ajax({
type: "POST",
url: url,
timeout: 2000,
beforeSend: function(){
$content.append('<div id="load">로드 중</div>');
},
complete: function(){
$('#loading').remove();
},
success: function(){
$content.html($(data).find('#container')).hide().fadeIn(400);
},
fail: function(){
$('#panel').html('<div class="loading">잠시 후에 다시 시도해 주세요</div>');
}
});
});