ajax 학습

1.js로 ajax 사용해보기

<h1>Ajax 개요</h1>
	<p>
		Ajax는 Asynchronous Javascript And XML이란 용어로<br> 서버로부터 데이터를 가져와 전체
		페이지를 새로 고치지 않고 일부만 로드할 수 있게 하는 기법<br> 비동기식 요청을 함.
	</p>
	<h3>동기식/비동기식이란?</h3>
	<p>
		동기식은 서버와 클라이언트가 동시에 통신하여 프로세스를 수행 및 종료까지 같이하는 방식<br> 이에 반해 비동기식은
		페이지 리로딩없이 서버요청 사이사이 추가적인 요청과 처리 가능
	</p>
	<h3>Ajax 구현(Javascript)</h3>
	<h4>1. ajax로 서버에 전송값 보내기</h4>
	<p>버튼 클릭시 전송값을 서버에서 출력</p>
	<input type="text" id="msg-1">
	<button onclick="jsFunc();">보내기(JS)</button>

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 == 404) {
					console.log("서버전송 실패")
				}
			}
			// 4. 전송
			xhttp.send();
		}

@Controller
public class AjaxController {
	
	@RequestMapping(value="/ajax/exercise.kh", method = RequestMethod.GET)
	public String showAjaxExercise() {
		
		return "ajax/ajaxExercise";
	}
	
	//응답값이 있으면 바디로 보내주라는 요청
	@ResponseBody
	@RequestMapping(value="/ajax/ex1.kh", method=RequestMethod.GET)
	public void exerciseAjax1(@RequestParam("msg") String msg) {
		System.out.println("전송받은 데이터 : " +msg);
	}

작동원리

1. XMLHttprequest() 객체를 생성
2. 요청정보 설정 xttp.open("GET" , "연결주소?전송할변수명="+ 전송할값 , true); 로 컨트롤러로 전달할 주소와 값을 설정한다.
3. 데이터 처리에 따른 동작함수 설정 xhttp.onreadystatechange = function() { 성공/실패 } 함수 설정 status값은 -> 200(요청성공), 404(페이지 url없음), 500(서버오류 발생), 403(접근거부), 400(쿼리스트링갯수오류)의 의미
4. xhttp.send(); 로 데이터 전송
5. 컨트롤러에서는 requestParam으로 받은 msg값 출력
6. @RequestBody를 써주지않으면 정상적으로 데이터를 전송받았어도 전송받았다는 메시지를 ajax에 전송하지 못해 404에러 발생 body는 html의 body안에 head는 head안에 넣겠다는 의미.

1. pom.xml에 라이브러리 적용

• list 데이터를 json데이터로 변환해주는 라이브러리이다.
  아래의 라이브러리를 적용하고 alt+f5를 사용하여 maven업데이트를 진행한다

		<!-- GSON : List 데이터를 JSON 데이터로 변환해주는 라이브러리 -->
		<!-- https://mvnrepository.com/artifact/com.google.code.gson/gson -->
		<dependency>
			<groupId>com.google.code.gson</groupId>
			<artifactId>gson</artifactId>
			<version>2.8.5</version>
		</dependency>
		<!-- https://mvnrepository.com/artifact/com.googlecode.json-simple/json-simple -->
		<dependency>
			<groupId>com.googlecode.json-simple</groupId>
			<artifactId>json-simple</artifactId>
			<version>1.1.1</version>
		</dependency>세요