[Javascript] AJAX 란? 그리고 Spring 에서 ajax 사용 방법.

AJAX 란?

Asynchronous Javascript and XML 의 약자로 XMLHttpRequest 객체를 사용해서 전체 페이지의 새로 고침없이 필요한 데이터만을 웹 서버에 요청해서 로드하는 기법이다.

 

 

 

javascript 에서 Ajax 를 호출 하는 방법.

<script type="text/javascript">
	$(document).ready(function(){
		$("#ajaxBtn").click(function(){
			$.ajax({
	 			type: "POST",
	 			url : "/ajaxTest.json",
	 			dataType: "json",
	 			data : {name : "홍길동"},
	 			success: function(results){
	 				alert(results.msg);				
	 			},
	 			error: function(data){
	 				alert("에러 발생. " + data);
	 			}
	 		})
		});
	});
</script>

<h1>Ajax Test</h1>
<div id="button_wrap">
	<button type="button" id="ajaxBtn">Ajax Test</button>
</div>

사용할 수 있는 속성들은

• async (boolean) : 비동기 통신 Flag. 기본값은 true. 요청을 던져서 응답할 때까지 사용자 에이전트는 비동기 처리를 계속한다. false 로 설정하면 통신에 응답이 있을때까지 브라우저는 잠겨 조작이 안된다.
• beforeSend (function(XMLHttpRequest) : Ajax에 의해 요청이 전송되기 전에 불리는 Ajax Event. 반환값을 false 로 설정하면 Ajax 전송을 취소할 수 있다.
• cache (boolean) : 초기값은 일반적으로 true. dataType 이 script의 경우는 false.
• complete (function(XMLRequest, textStatus) : Ajax 통신이 완료될 때 호출되는 함수. success 나 error 가 호출된 후에 호출되는 Ajax Event.
• contentType (String) : 서버에 데이터를 보낼 때 사용. content-type 헤더의 값. 기본값은 'application/x-www-form-urlencoded'.
• data (object, string) : 서버로 전송하는 값. 개체가 지정된 경우 쿼리 문자열로 변환되고 GET 요청으로 추가된다. 객체는 Key 와 Value 로 조합해야 하지만 만약 값이 배열이라면 jQuery 는 같은 Key 를 가지는 여러 값으로 serialize 한다.
• dataFilter (function(data, type)) : 기본 수준에서 XMLHttpRequest 의 반환 데이터를 필터링한다. 첫번째 인수에 원시 데이터를 두번째 인수에 dataType 값을 받는다. 필터링된 값을 반환한다.
• dataType (string) : 서버에서 반환되는 데이터 형식을 지정. 생략했을 경우는 jQuery 가 MIME 타입등을 보면서 자동으로 결정.
  • xml : XML 문서
  • html : HTML을 텍스트 데이터로, script 태그가 포함된 경우는 처리 실행.
  • script : javascript 코드를 텍스트 데이터로. cache 옵션 특히 지정이 없으면 cache 가 자동으로 비활화된다. 원격도메인에 대한 요청의 경우 POST 는 GET 으로 변환된다.
  • json : JSON 형식 데이터로 평가하고 javascript의 개체로 변환.
  • jsonp : JSONP 로 요청을 부르고 callback 매개변수에 지정된 함수 회수값을 JSON 데이터로 처리.
  • text : 일반 텍스트.
• error (function(XMLHttpRequest, textStatus, errorThrown) : 통신에 실패했을 때 호출되는 Ajax Event. 인수는 3가지로 XMLRequest 는 오류 내용, 추가적인 예외 개체를 받는다. textStatus 는 'timeout', 'error', 'abort' 등을 받는다. errorThrown 은 'Not Found', Internal Server Error' 같은 HTTP 의 상태를 받는다.
• global (boolean) : Ajax Events 의 Global Events 를 실행할지 여부를 지정. 일반적으로 true.
• headers (object) : 추가적인 헤더의 Key, Value 를 지정할때 사용.
• ifModified (boolean) : 서버의 응답에 Last-Modified 헤더를 보고, 전회 통신에서 변경이 있는 경우에만 성공 상태를 반환한다.
• jsonp (string) : jsonp 요청을 할 때 callback 이 아닌 매개 변수이면 지정. { jsonp : 'onJsonpLoad' } 로 지정하면 실제 요청은 onJsonpLoad = ? 로 된다.
• password (string) : 인증이 필요한 HTTP 통신시 암호를 지정한다.
• processData (boolean) : data 지정한 객체를 쿼리 문자열로 변환할지 여부를 설정. 기본값은 true. 자동으로 "application/x-www-form-urlencoded' 형식으로 변환.
• scriptCharset (string) : script 를 로드할 때의 charset 지정. dataType 이 'jsonp' 혹은 'script' 에서 실행되는 페이지와 호출하는 서버측의 charset 이 다른 경우에만 지정해야한다.
• success (function(data, dataType)) : Ajax 통신이 성공하면 호출되는 Ajax Event. 반환된 데이터와 dataType 을 받는다.
• timeout (number) : 제한 시간(밀리초)을 설정한다. $.ajaxSetup() 에서 지정한 값을 통신에 따라 개별적으로 덮어쓸수 있다.
• type (string) : 'POST' 또는 'GET' 을 지정하여 HTTP 통신의 종류를 설정한다. 기본값은 'GET'.
• url (string) : 요청을 보낼 대상 URL. 기본값은 호출 페이지.
• username (string) : 인증이 필요한 HTTP 통신시 사용자 이름을 지정한다.
• xhr (function) : XMLHttpRequest 객체가 생성되었을때 호출되는 callback 함수. IE 에서는 XMLHttpRequest 가 아니라 ActiveXObject 가 만들어진 때이다. 만약 특정사이트의 XMLHttpRequest 개체의 확장과 인스턴스 관리 팩토리를 가지고 있는 경우에는 이 함수 생성물을 덮어 쓸수 있다.

더많은 특성들이 있지만 ajax 를 사용하면서 주로 사용하였던 것만 정리하였다.

사실 ajax 는 javascript 로 구현이 되는데 원래 코드로 구현하면 추가해야할 소스들이 너무 많아져서 jQuery 를 사용하여 구현하는 것이 더 깔끔하고 보기도 쉽고 개발도 편하다.

자세한 설명은 아래 jQuery 사이트에서 확인하시길 바란다.

 

https://api.jquery.com/jQuery.ajax/

jQuery.ajax() | jQuery API Documentation

요청을 보냈으니 이제 받아서 응답을 보내야한다.

Spring 을 사용시 Ajax 받는 방법.

// Ajax Test
@RequestMapping(value = "/ajaxTest.json")
public ModelAndView ajaxTest(@ModelAttribute("searchOptionVO") SearchOptionVO searchOptionVO, ModelMap model, 
HttpServletRequest request, HttpServletResponse response, HttpSession session, BindingResult bindingResult) throws Exception{

	ModelAndView modelAndView = new ModelAndView();
	MappingJackson2JsonView jsonView = new MappingJackson2JsonView();
	modelAndView.setView(jsonView);

	System.out.println("Ajax Test. 호출 완료!!!");
	model.addAttribute("msg", "Ajax Test!!!");

	return modelAndView;
}

그리고 결과값

 

 

 

Ajax 를 매번사용하는 것보다 적재 적소에 사용하는 것이 유용하다.

굳이 많이 정보가 변경되었는데 ajax 를 쓰기보다는 화면을 새로 불러오는게 안정성이나 코딩 면에서 그리고 사용자 측면에서도 좋은 경우가 많다.

주식에서 현재가처럼 아주 작은 부분이나 잦은 변경이 발생하지 않는한 사용전에 잘 생각해보자.

 

굳이 정리해본다면

장점

 - 화면 새로고침을 하지 않고 원하는 데이터만 주고 받을 수 있다.

 

단점

 - 응답이 느려지면 사용자는 반응이 없는지 알고 다른 화면으로 이동하는 경우가 발생하는데 이런 경우 뒤늦은 응답으로 인해 에러가 발생할 수 있다.