XMLHttpRequestについて

XMLHttpRequestとは

ブラウザ上でサーバーとHTTP通信を行えるオブジェクト。
これによりAjaxを可能にすることができる。
※Ajaxとは非同期通信とダイナミックHTMLを組み合わせたもの

基本的には
1.XMLHttpRequestを代入してオブジェクトを作る
2.どのようなリクエストをするのかを指定する
3.読み込み時などの設定など
4.リクエストをする

という動きになる。

1.XMLHttpRequestを代入してオブジェクトを作る

変数を定義し、「new XMLHttpRequest()」を代入、
これでオブジェクトができる。

const XHR = new XMLHttpRequest();

2.どのようなリクエストをするのかを指定する

XHRにopenメソッドを使い、
(第一引数 , 第二引数 , 第三引数)に
(HTTPメソッド , 送信先URL , 非同期通信するか否か)を記述していく。

// 例
XHR.open("GET", `/posts`, true);

3.読み込み時などの設定など

そのときそのときによるが、今回はJsonで情報を受け取ることとし、レスポンスの形式を指定していく。
レスポンスの形式を指定するにはresponseTypeプロパティをXHRにつかう。

XHR.responseType = "json";

4.リクエストをする

記述が揃ったらサーバーサイドへ送信の記述をする。
送信するときはsendメソッドを使う。

XHR.send();

まとめるとこのような流れになる

// オブジェクト作成
const XHR = new XMLHttpRequest();
// どのようなリクエストかを指定
XHR.open("GET", `/posts`, true);
// レスポンスの形式を指定
XHR.responseType = "json";
// リクエスト
XHR.send();

その他プロパティ

・statusプロパティ

HTTPステータスを取得する。

・statusTextプロパティ

HTTPステータスをテキストで取得する。

// HTTPステータスが200で無かった場合エラー文をアラートで表示する
if (XHR.status != 200) {
  alert(`Error ${XHR.status}: ${XHR.statusText}`);
}

・responseプロパティ

レスポンスで「responseType」の値に応じて返却されたデータを取得する。

//レスポンスとして帰ってきたpostのデータを取得している
const item = XHR.response.post;

・onloadプロパティ

レスポンスなどの受信が成功した場合に呼び出されるイベントハンドラー。

XHR.onload = () => {
  // 受信した時の処理
}

---

JSについてはまだまだ理解していない部分が多いので引き続きアウトプットしていきます。