今日の学習

今日学んだこと 2021/01/23

学習項目

ajax

学習内容

ajaxとは非同期通信のことで、ページを更新せずに情報を更新する仕組みのことを言う。
通常の方法とは異なり、jsを使い行う。
jsを使うことで、そのままコントローラーに連絡ができ、他のページを更新する必要がなくなる。
主なサービスとしてはマップの埋め込みや、メッセージアプリなどがある。

ルーティングの設定としてはデータ返却のアクションを実行するためのURLとしてエンドポイントを設定する。簡単に言うとjson用のルーティング的なもだと思う。

例えばクリックしたら、既読にする等のアクションでは
まず、クリックしたら、アクションを動くようする。（イベントハンドラーと言う）
クリックしたあとはエンドポイントにリクエストを送る記述をする。(XMLHttpRequestと言うオブジェクトを使う。）
クリックしたものがどれかを判別するためにビューファイルにカスタムデータを記述（data-<情報>で記述）
リクエスト内容はXHR.open(HTTPメソッド, パス, 非同期かどうか)で記述
レスポンスの内容は何がいいのかをXHR.responseTypeで記述（例：XHR.responseType = "json";）
最後にXHR.sendを記述して、送信する。

function check () {
  const kidokus = document.querySelectorAll("既読をつけたい要素");
  kidokus.forEach(function(kidoku) {
    kidoku.addEventListener("click", () => {
      const kidokuId = kidoku.getAttribute("data-id");
      const XHR = new XHRHttpRequest();
      XHR.open("GET", `/kidokus/${kidokuId}`, true);
      XHR.requestType = "json";
      XHR.send();
    });
  });
}
window.addEventListener("load", check)

と言う感じになる。ここまでが、リクエストを送る内容。
レスポンスが返ってきたあとは、onloadを使用し、その後に記述する。
大体流れはこんな感じ。

まとめ

ほんとはどう言うことをしていくのかを書きたいが、内容が複雑のため、ゆっくり勉強する。
今日は今回のように流れがわかったのでよし。