HTTP 요청과 응답-2

HTTP 요청 파라미터의 값 다루기

1. GET 요청 -> ?name=ㅁ&age=ㅁ(Query String)

2. POST 요청 -> message-body에 붙여서 보낸다.

3. POST 요청 -> multipart/form-data

어떤 형식으로 요청이 들어오든지 Spring boot에서 handler에서 알아서 파라미터로 변경해줌

버튼에서 type-button해줘야함 안해주면 브라우저에서 다시 요청을 보냄 method또한 post 로 해줘야함

<form id="form1" method="post"> => AJAX 이기때문에 post 는 의미없음
	이름: <input type="text" name="name"><br>
	나이: <input type="number" name="age"><br>
	사진: <input type="file" name="photo"><br>
	<button id="btn" type="button">요청</button>
</form>

button 타입 지정하지않으면 submit button 임
AJAX 요청하고 싶으면 반드시 button 타입을 지정해줘야함

var xhr = new XMLHttpRequest() <= 비동기 요청작업을 수행할 객체를 생성한다.

@RequestMapping("/html/form/exam11")
public Object exam11(String name, int age, MultipartFile photo) {-}
=> 이런 method는 request handler 라고 부름

document.querySelector("#btn").onclick = function() {
비동기 요청작읍을 수행할 객체를 준비한다
var xhr = new XMLHttpRequest()
서버에 연결한다.
xhr.open("POST", // 요청 method
"/html/form/exam21", // 요청 url
false // 비동기 여부
);

서버에 POST 방식으로 데이터를 보내는 경우 다음과 같이 MIME 타입을 설정해야한다. GET방식은 상관없다.
xhr.setRequsetHeader("Content-Type", "application/x-www-form-urlencoded"); 

서버에 요청한다.
 => 동기 방식일 경우 서버에서 응답이 올 때까지 리턴하지 않는다.
xhr.send("name=aaa&age=20")

서버의 응답을 꺼낸다.
console.log(xhr.responseText);

};

서버의 응답을 꺼낸다.
 서버가 응답하기도 전에 값을 꺼낸다면 아무런 값도 출력할 수 없을 것이다.
 => 해결책 서버에서 응답이 왔다고 알려주면 그 때 값을 꺼내도록 하면된다.
console.log("==>", xhr.responseText);


=> 해결책
서버에서 응답이 오면 그 응답에 대해 어떻게 처리할지 함수를 등록한다.
xhr.onredystatechande = function(e) {- }



멀티파트 형식으로 서버에 데이터를 보내려면 FormData 객체에 담아야한다.
FormData 객체에 값을 담아 보낼 경우
 요청형식은 multipart/form-data 형식이다.
var fd = new FormData();
fd.append("name",fName.value);
fd.append("age",fAge.value);

form 객체 다루기 생성자에 넣어주면 됨
var f = document.querySelector("#form1")

document.querySelector("#btn").onclick = function() {

var fd = new FormData(f); <=이렇게

form 을 받아와서 js로 파일업로드를 처리하려면 html에 name이 존재해야함

<form id="form1">
  이름: <input type="text" name="name"><br>
  나이: <input type="number" name="age"><br>
  사진: <input type="file" name="photo" multiple><br>
  <button id="btn" type="button">요청</button>
</form>

var fd = new FormData(f);

xhr.send(fd);

=> 이런식으로 작성하면 된다.

서로다른 파일이 동일한 파일명을 가졌을 때 해결법
자바에서 아래의 것 사용하면 랜덤 아이디 부여 ex) 2301bcde-d8d0-4221-91b6-69e31f6516e5
=>UUID.randomUUID() => 얘는 확장자명 안들고옴
int dotIndex = part.getOriginalFilename().lastIndexOf("."); => 점 찾기

	if (dotIndex != -1) {
		filename += part.getOriginalFilename().substring(dotIndex);
	} => 확장자명 알아내는 법

=> fetch에서 formdata 부르는 법(https://developer.mozilla.org/ko/docs/Web/API/Fetch_API/Using_Fetch) <= 참고
fetch('https://example.com/profile/avatar', {
method: 'PUT',
body: formData
})

then(function () {-})은 파라미터로 오는 함수를 등록하는 것임

비동기란 무엇인가?
요청을 시키는데 작업을 시켜놓고 호출될 함수를 등록해놓고 서버에서 작업이 끝나면 출력해준다.