[ Jquery ] 제이쿼리 Ajax 사용법

안녕하세요 오늘은 ajax에 대해서 설명 드리겠습니다.

ajax를 간단히 설명하자면 비동기통신 입니다. 

"어?비동기통신이 뭐지" 라고 하실 수 있는데요. 비동기 통신을 간단히 설명해 드리자면 보통 웹페이지에서 url 주소가 바뀌면서 화면이 잠시 껌뻑거리는 현상을 보셧을 텐데요. 

이런 현상은 back단으로 갔다 왔을 때 다시 페이지가 로드되는 현상인데요. ajax는 이런 현상이 없이 바로 통신이 가능하다는 게 장점입니다. 

통신을 하지만 새로 페이지가 로드되는 방식이 아닌 ajax 요청을 한 데이터만 가져와서 그 부분에 적용하는 방식입니다.

자 설명은 여기까지 하고요. 소스를 보면서 설명 드리겠습니다.

 
<input type="button" onclick="test()">
 

위와 같은 버튼이 있습니다. 버튼을 클릭하면 아래와 같이 test라는 함수가 실행 되는데요.

 
function test(){
    
    var param = {
            test : "안녕하세요"
    }
    
    $.ajax({
        type : "POST",
        url : "/test/home",
        dataType : 'json',
        contentType : 'application/json',
        data : param,
        success : successCall,
        error   : errorCall
    });
}
 

자 이제 하나하나 설명 드리겠습니다.

type : "GET" OR "POST" 두가지를 사용할 수 있습니다.

url : "/test/home" 통신을 원하는 url를 적어주시고요.

dataType : 데이터 타입을 어떻게 넘길 거냐는 건데 "json"타입으로 넘김다는 선언 입니다.

contentType : 지금 공부중인데 보이는거와 같이 contentType을 어떻게 설정 할거냐라는 겁니다.

data : 통신할 데이터를 넣는 부분입니다.

success : 정상적으로 통신 했을때 함수를 하나 만들어 성공 처리를 합니다.

error : 결과가 정상적이지 않을때 함수를 하나 만들어 처리를 하는 곳입니다.

여기까지 ajax 사용법에 설명해 드렸는데요.

많은 도움이 되었으면 좋겠습니다. 

다음에는 ajax통신을 했을때 controller에서 어떻게 처리하는지 포스팅 해보겠습니다.

유익하셨다면 댓글도 하나 달아주시면 감사하겠습니다.