[Jquery] 제이쿼리로 Ajax 다루기

Jquery로 ajax 사용하기

 jquery를 이용하면 좀 더 간편하게 ajax 통신을 할 수 있습니다. 

 

기본 사용법

$.ajax({
    type: "post",
    url: "/test",
    data: {param: 'string'},
    success: function() {
        alert('성공');
    }
         ...
});

기본 사용법은 ajax 괄호 안에 ajax 관련 속성과 값을 설정하여 통신할 수 있습니다. ajax 관련 속성은 아래와 같습니다.

 

분류	속성	설명
기본	type	통신 타입을 설정합니다. (get, post)
url	요청할 url을 설정합니다.
data	서버에 요청할 때 보낼 매개변수를 설정합니다.
dataType	응답 받을 데이터 타입을 설정합니다.(xml, plain, html, json 등)
설정	async	비동식으로 처리할지의 여부를 설정합니다. (true일 경우 비동기식, false일 경우 동기식)
statusCode	HTTP 상태코드에 따라 분기처리되는 함수를 설정합니다.
jsonp	jsonp를 사용할 때 이용하는 파라미터명을 설정합니다.
async	비동기 통신의 여부를 설정합니다.
contentType	서버로 요청할 데이터 타입을 설정합니다. (application/json, text/plain, text/html 등)
처리함수	success	요청 및 응답에 성공했을 때 처리 구문을 설정합니다.
error	요청 및 응답에 실패했을 때 처리 구문을 설정합니다.
complete	모든 작업을 마친 후 처리 구문을 설정합니다.
beforeSend(xhr)	ajax 요청이 가기 전에 실행하는 처리 구문을 설정합니다.

 

예시

$.ajax({
    type: "post",
    url : "/url",
    data : {sampleInput : "sampleData"},
    success : function(data) {
        // Sucess시, 처리
        alert(data);
    }, 
    error : function(xhr, textStatus, errorThrown){
        // Error시, 처리
        alert(xhr);
        alert(textStatus);
        alert(errorThrown);
    }
});

 

Ajax와 콜백 함수

ajax 통신을 하고 나서 실행되는 콜백 함수를 설정하여 후처리를 통신 후 처리를 진행할 수 있습니다.

 

콜백함수	설명
done(callback)	요청 성공 시에 호출되는 함수입니다.
fail(callback)	요청 실패 시에 호출되는 함수입니다.
always(callback)	성공, 실패 관계 없이 항상 호출되는 함수입니다.

done

$.ajax({
    url : "/url",
    data : {
      name : "gil-dong",
      location : "seoul"
    },
})
.done(function(data) {
    // 전송한 data를 출력 
    alert(data);
});

ajax 콜백 함수는 ajax 함수에 연결 연산자를 붙여서 사용합니다.