HTTPリクエストとレスポンス-2

HTTP要求パラメータの処理値

GETリクエスト->?name=WX&age=WX(Query String)

POSTリクエスト->メッセージ本文に貼り付けて送信します.

POSTリクエスト->multipart/form-data

Spring bootは、要求がどのような形式で入力されても、Handlerからパラメータに自動的に変更されます.
ボタンにtype-buttonを入力する必要がない場合は、ブラウザで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) {-}
=>この方法をrequest handlerと呼ぶ
document.querySelector("#btn").onclick = function() {
非同期リクエストを実行するオブジェクトの準備
var xhr = new XMLHttpRequest()
サーバーに接続します.
xhr.Open(「POST」//リクエスト方法
「/html l/form/seche 21」//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);

=>このように記入すればよい.
異なるファイルに同じファイル名がある場合のソリューション
Javaでは、次のランダム付与可能なアイデンティティex)2301 bcde-d 8 d 0-4221-91 b 6-69 e 31 f 6516 e 5を使用する
=>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
})
そして(function(){−})パラメータとしての関数を登録する
非同期とは?
リクエストの発行時に操作を行い、呼び出す関数を登録し、サーバが操作を完了した後に出力します.