ajax 개요

	<h1>Ajax 개요</h1>
	<p>
		Ajax는 Asynchronous Javascript And XML이란 용어로<br> 서버로부터 데이터를 가져와 전체
		페이지를 새로 고치지 않고 일부만 로드할 수 있게 하는 기법<br> 비동기식 요청을 함.
	</p>
	<h3>동기식/비동기식이란?</h3>
	<p>
		동기식은 서버와 클라이언트가 동시에 통신하여 프로세스를 수행 및 종료까지 같이하는 방식<br> 이에 반해 비동기식은
		페이지 리로딩없이 서버요청 사이사이 추가적인 요청과 처리 가능
	</p>

핵심임...^^

 

이제 연습해보자....

script 방법임.

<input type="text" id="msg-1">
	<button onclick="jsFunc();">보내기(JS)</button>

	<script >
		function jsFunc(){
			//1. XMLHttpRequest객체 생성
			var xhttp = new XMLHttpRequest();
			var msg=document.querySelector("#msg-1").value;
			//2. 요청정보 설정
			xhttp.open("GET","/ajax/ex1.kh?msg="+msg,true);
			//3. 데이터 처리에 따른 동작 함수 설정
			xhttp.onreadystatechange = function(){
				if(this.readyState=4 && this.status==200){
					//status -> 200(요청성공), 404(페이지,url없음), 500(서버오류발생),403(접근거부),400(쿼리스트링 갯수오류)
					console.log("서버 전송 성공");
				}else if(this.readyState==4 && this.status ==400){
					console.log("서버 전송 실패");
				}
			}
			//4.전송
			xhttp.send();
			
		}
	</script>

	@ResponseBody
	@RequestMapping(value="/ajax/ex1.kh", method=RequestMethod.GET)
	public void exerciseAjax1(
			@RequestParam("msg") String msg) {
		System.out.println("전송 받은 데이터 : " + msg);
		
	}

http://www.tcpschool.com/xml/xml_dom_xmlHttpRequest 

코딩교육 티씨피스쿨

참고하면 훨씬 도움됨.^^