[jQuery] AJAX Example

 

1. AJAX 란 ?

AJAX는 Asynchronous JavaScript and XML의 약자로서 비동기적 정보 교환 기법이다.

 

2. AJAX 스프링 연동시 주의사항

• Controller 단에서 ResponseBody 빼먹지 말기

 

3. AJAX 사용법 간단 예제 코드

JSP 부분

var url = "ajax_test.dh"; // Controller로 보내고자 하는 URL (.dh부분은 자신이 설정한 값으로 변경해야됨)
var sendMsg = "AJAX Data Send Test";        
console.log("JSP에서 보낸 MSG : " + sendMsg);
 
$.ajax({
    url : url,                            // 전송 URL
    type : 'POST',                    // GET or POST 방식
    data : {
        sendMsg : sendMsg        // 보내고자 하는 data 변수 설정
    }, 
 
    //Ajax 성공시 호출
    success : function(data){
        console.log("컨트롤러에서 받은 MSG : " + data);
    },
    
    //Ajax 실패시 호출
    error : function(jqXHR, textStatus, errorThrown){
        console.log("jqXHR : " +jqXHR +"textStatus : " + textStatus + "errorThrown : " + errorThrown);        
    }
});

 

Controller 부분

@RequestMapping(value = "/ajax_test.dh")
@ResponseBody
public String ajaxTest(HttpServletRequest request) {
        
    String ajaxMsg = request.getParameter("sendMsg");
    System.out.println("JSP에서 받은 MSG : "+ajaxMsg);
        
    String resultMsg = "AJAX Success";
    System.out.println("Controller에서 보낸 MSG : "+ resultMsg);
        
    return resultMsg;
}

 

Java Console 에서 확인하기