◉ 예제 실습
▪︎ GET 방식과의 차이점
- RequestHeader에 Content-Type 정의
// - post 방식은 반드시 보내는 데이터의 요청 헤더를 설정해야 함.
httpRequest.setRequestHeader('Content-Type', 'application/json')
- send 요청 시 파라미터 데이터를 포함하여 요청
// - 서버로 요청 정보 실제로 보내기
httpRequest.send(JSON.stringify(reqData))
▪︎ index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>postAjaxExam 뷰</title>
<style>
span {
color: navy;
background : lightgrey;
}
</style>
<script>
// * 선택자 id 문자열을 넘겨주면, DOM에서 HTML 객체를 찾아줌.
// 파라미터 id : DOM API로 찾을 id 선택자
window.onload = function(){
// * DOM API를 이용하여 양식 HTML 태그와 button 태그 찾기
// - button 객체 찾기
let button = document.getElementById("ajaxCall")
// - text 입력상자 객체 찾기
let inputText = document.getElementById("inputName")
// * 응답이 오면 즉석에서 출력한 span 객체를 찾기
let spanName = document.getElementById("name")
let spanAge = document.getElementById("age")
// ① XMLHttpRequest 객체 생성
let httpRequest = new XMLHttpRequest()
// * 버튼 클릭 시, ajax 실행이 일어남
// - 버튼에 이벤트리스너를 추가함.
button.addEventListener('click', function(){
// - click 이벤트 발생하면 처리할 콜백 익명함수 정의
// 이 부분에서 ajax를 이용하여 비동기로 서버에 요청함.
// - 서버에 요청할 때 요청 데이터로 name의 값을 제공하고,
// 응답데이터로 요청 name의 값과 나이 문자열을 응답 받게 됨.
// ② onreadystatechange 이벤트 리스너 등록
httpRequest.onreadystatechange = function(){
// * readyState가 Done(=ajax 객체 준비완료 및 응답할 준비완료)이고,
// 서버로부터 응답이 200(서버 요청 성공)이면,
// -> 응답데이터(name, age)를 span태그(보여줄 위치)에 출력함.
if( httpRequest.readyState == XMLHttpRequest.DONE ){
// * 이 이후에 응답결과가 옴.
// - 200 응답일 경우
if( httpRequest.status == 200) {
// 응답 데이터를 저장할 변수 선언
let result = httpRequest.response
// span 태그에 결과 데이터 표시
spanName.innerHTML = result.name
spanAge.innerHTML = result.age
// - 서버 실행 에러일 경우 ( 300, 400, 500 )
} else {
alert("Ajax 요청 처리 실패!")
}
}
}
// ③ 서버로 보낼 Ajax 요청의 형식 설정
httpRequest.open(
"GET", `/ajax/getAgeByName?inputName=${inputText.value}`);
// ④ 서버로 데이터를 요청 : send()
// - 데이터를 요청하기 전, 서버로부터 응답 형식을 'JSON'으로 지정.
httpRequest.responseType = "json"
// - post 방식은 반드시 보내는 데이터의 요청 헤더를 설정해야 함.
httpRequest.setRequestHeader('Content-Type', 'application/json')
// - 서버로 요청 정보 실제로 보내기
httpRequest.send()
})
// * 마우스로 button 태그 클릭 시, click 이벤트 발생
//document.getElementById("ajaxCall").addEventListener()
}
</script>
</head>
<body>
<h1>Ajax POST 방식 요청</h1>
<!-- * 여기에 입력양식 위젯을 추가함.
단, <form> 태그가 없음. ajax를 이용해서 <form> 태그를 대신 처리함.
-->
name: <input type="text" id="inputName"><br>
<button id="ajaxCall">ajax호출</button>
<!-- * ajax 호출로 응답받은 데이터 name과 age를 여기에 응답결과를 출력함. -->
<!-- 응답결과 출력 레이어 -->
<h2>
<span id="name">여기에 이름이 옴.</span>
<span id="age">여기에 나이가 옴.</span>
</h2>
</body>
</html> - ajax 처리 순서
① ajax(XMLHttpRequest 내장객체 이용) 객체를 먼저 생성
② ajax 객체의 현재 진행상태 및 서버 응답상태를 계속 모니터링할
( = readystatechange 이벤트 ) 이벤트 리스너 등록
③ 이벤트리스터 등록을 마친 후, 일단 서버에 연결해야 함.
→ ajax객체.open() 메서드 호출
1) 요청방식 2) 요청주소 3) 비동기 및 동기 여부
④ ajax 객체가 서버와 연결이 된 후,
추가 요청 데이터가 있으면 전송 : send() 이용
⑤ 서버로부터 응답데이터가 도착하면, onreadystatechange 이벤트가
발생하여 등록된 이벤트리스너가 CallBack으로 실행됨.
▪︎ AjaxExamController.java
// Post 방식으로 ajax를 이용해서 /ajax/postAgeByName 주소에 요청
@PostMapping("/ajax/postAgeByName")
// * inputMap 파라미터를 받아, 미리 저장된 ageMap에서 해당 이름에 맵핑된 나이를 리턴해주는 메서드
// - 요청객체를 처리할 것!
// - Post 요청으로 JSON 형식으로 넘어온 경우
// @RequestBody 설명주석을 입력파라미터에 붙여주면
// 바로 Map 형식으로
// form의 각 입력양식 태그의 name 속성은 키 변수로 설정하고
// value 속성은 값 상수로 설정함.
public Map<String, Object> postAgeByName(@RequestBody Map<String, Object> inputMap) {
log.info("{}>>>{}", "postAgeByName", "요청처리시작");
// 데이터 테이블로 사용할 Map 테이블 생성
Map<String, Integer> ageMap = new HashMap<>();
// 임의의 데이터 추가
// → 모델 역할 ( 나중에 정식으로 한다면, Repository에 해당 )
ageMap.put("이름1", 10);
ageMap.put("이름2", 15);
ageMap.put("이름3", 20);
ageMap.put("이름4", 25);
ageMap.put("이름5", 30);
// 위의 Map 레포지토리로부터 특정 조건으로 검색하는 서비스의 역할을 데모하고 있음.
// 요청으로 넘어온 이름으로 테이블로부터 일치하는 자료를 찾는 경우.
Map<String, Object> returnMap = new HashMap<>();
returnMap.put("name", inputMap.get("name"));
returnMap.put("age", ageMap.get(inputMap.get("name")));
// 검색결과 리턴
return returnMap;
}
▪︎ 실행 결과
◎ 정리
( 공유방 : '2023.08.22 - HelloJSON2 양식태그' 이름 파일 참고 )
window.onload = function(){
1. DOM API를 이용하여 form 태그의 있는 폼 양식 요소들 미리 등록
let 변수명 = document.getElementById()
( getElementsById() / querySelector() / querySelectorAll() )
2. Ajax를 호출하는 이벤트 핸들러에 XMLHttpRequest 객체 생성
3. XMLHttpRequest 객체의 현재 진행 상태 및 응답 상태를 모니터링할 수 있는 onreadystatechange 이벤트 리스너 등록
- 처리할 내용 입력
4. XMLHttpRequest 객체의 open() 메서드를 이용해 서버에 보낼 요청 형식 설정
5. XMLHttpRequest 객체의 send() 메서드를 이용해 서버로 데이터 요청
- 요청하기 전, 응답형식을 'JSON'으로 지정 / Post 방식의 경우, 데이터의 요청 헤더를 설정해야 함
}
'프론트엔드 > Ajax' 카테고리의 다른 글
| 타임리프와 JS을 활용한 AJAX 구현 (0) | 2023.08.21 |
|---|---|
| AJAX 실습 - GET 방식 구현 (0) | 2023.08.18 |
| AJAX (0) | 2023.08.18 |