jQuery Ajax 사용하기

jQuery Ajax 사용하기

Ajax는 서버와 비동기 데이터 통신을 통해 데이터 주고받는 방식을 의미한다. 비동기 데이터 통신을 위해 

XMLHttpRequest를 사용하게 되는데  XMLHttpRequest는 Microsoft가 만든 JavaScript Object이다. 하지만 jQuery에서는 훨씬 더 쉽게 비동기 데이터 통신을 지원할 수 있게 만들었고, 이번 포스팅은 jQuery에서 Ajax를 어떻게 사용해야하는지 적어 보았다.

먼저 Ajax의 개념과 XMLHttpRequest의 사용법을 알고 싶다면 아래 링크 클릭.

http://ktko.tistory.com/101

http://ktko.tistory.com/103

jQuery에서 Ajax를 사용하기 위한 예제

Ajax를 사용하는 법은 간단하다 데이터를 요청할 Url 그리고 요청 방식을 정의하는 POST 등등 을 정의해 주고 성공과 실패 여부에 따라 따로 이벤트 처리를 해 줄 수 있다.

아래 표에는 jQuery에서 Ajax를 사용하기 위한 프로퍼티들을 정리하였다.

$.ajax({
    url:'./time2.php',
    type:'post',
    data:$('form').serialize(),
    success:function(data){
        $('#time').text(data);
    }
})

jQuery Ajax Property 설명

Property	Description
type	GET, POST방식을 지정한다.
url	호출 URL을 입력, GET방식일 경우 URL 뒤에 파라미터로 데이터를 붙여서 사용한다.
dataType	Ajax를 통해 호출된 페이지의 Return된 데이터의 형식이다 xml, json, text, script, html등을 사용할 수 있다.
error	에러가 발생했을 경우 처리하게 된다.
success	통신이 성공했을 때 처리하게된다. 보통 return된 데이터를 핸들링하여 가공한다.
complete	통신이 실패했어도 완료가 되었을 때 처리하게 된다.

간단한 Ajax 예제

dataType를 보면 서버에서 응답받아오는 데이터가 JSON이라는 것을 알 수 있다.

그리고 성공했을 경우에 응답받아온 데이터에 따라 다음 이벤트를 분기처리 하고 있다.

$.ajax({
    type : "POST",
    url : "numpasswordcheck.json",
    data : {
        dPassword : $("[name=acpw]").val()
    },
    dataType : 'json',
    success : function(data) {
        if(data.result == 200) {
            document.registform.submit();
        } else {
            alert("거래비밀번호는 숫자 6자리입니다.\n" +
            "거래비밀번호는 동일한 숫자를 연속해서 사용할 수 없습니다.\n" +
            "거래비밀번호는 연속된 숫자 3자리 이상 사용할 수 없습니다.");
        }
    }
});