学習したことのアウトプットとして
ブラウザでイベント発火
↓
JavaScript
↓リクエスト
ルーティング
上記のリクエストの部分の学習をしていて、処理をするための記述が自分の中でごちゃごちゃ混乱しているので、少しでも整理できればいいなと思い、記事にしてみる。
XMLHttpRequestオブジェクト
JavaScriptを用いてサーバーとHTTP通信を行うときに利用するオブジェクト。
XMLHttpRequestのメソッドやプロパティを利用してJSからのリクエストの実装を進めます。
const XHR = new XMLHttpRequest();
new XMLHttpRequestと記述することで、新しくオブジェクトを生成できます。
そして、新たに生成したXMLHttpRequestオブジェクトを変数XHRに格納しています。
変数名のXHRはXMLHttpRequestの略です。
openメソッド
リクエストを初期化するメソッドです。リクエストの内容を指定するメソッドだと理解する。
XMLHttpRequestオブジェクトのメソッドの一種です。
const XHR = new XMLHttpRequest();
XHR.open(HTTPメソッド, パス, 非同期通信であるか);
//例
XHR.open("POST", "/posts", true);
| 記述場所 | 目的 | 記述例 |
|---|---|---|
| 第一引数 | HTTPメソッドの指定 | POST |
| 第二引数 | パスの指定 | /posts |
| 第三引数 | 非同期通信のON/OFF | true(ON) |
responseTypeプロパティ
レスポンスのデータフォーマット（＝どのような形式のデータにするか）を指定するプロパティ。
リクエストを送信する際に、レスポンスで欲しいデータフォーマットをあらかじめ指定しておく必要があります。
JSON（JavaScript Object Notation）
JavaScriptをもとにして構成されたデータフォーマットのことです。
データを記述するフォーマットはいくつかありますが、動作が軽いことやモダンなフロント言語と親和性が高く管理がしやすいなどのメリットがあります。
const XHR = new XMLHttpRequest();
XHR.open("POST", "/posts", true);
XHR.responseType = "json"; //データフォーマットをJSONに指定
send()メソッド
リクエストを送信するメソッド。XMLHttpRequestオブジェクトのメソッドの一種です。
const form = document.getElementById("form"); //フォームの要素を取得
const formData = new FormData(form); //フォームに入力された値を取得
const XHR = new XMLHttpRequest(); //オブジェクトを生成
XHR.open("POST", "/posts", true); //リクエストの内容を指定
XHR.responseType = "json"; //データフォーマットを指定
XHR.send(formData); //フォームに入力された値を送信
まとめてみて
おそらくXMLHttpRequestオブジェクトには、まだたくさんメソッドやプロパティがあって、今の自分には難しい内容なのかも・・と不安に思うが、とりあえず今回学習したものについては少し理解が深まったかなと感じた。
※補足等ありましたらコメント頂けると幸いです。