【Ajaxでコントローラーにリクエストを送る。を紐解く】

function post (){
  const submit = document.getElementById("submit");
  submit.addEventListener('click', (e) =>{
    e.preventDefault();
    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);
  });
};

window.addEventListener('load', post);

【目的】

ソースコードを言語化する試み。

【全体像】

ウィンドウが読み込まれたとき、 関数postを実行する。

【概要】

その内容とは、 投稿ボタン(id = submit)がクリックされたとき、 フォームに入力された内容をXML HttpRequestを使って、 リクエストを送信するというものです。

【詳細】

そのためには、 何処に？ どのフォーマットで？ httpメソッドは？ 非同期通信のon/offは？ などを指定し、 さらに、フォームで入力された値を取得し、 オブジェクトを生成しておく必要があります。

【補足】

XML HttpRequestとは、 JSからAjaxによるリクエストを行うときに利用するオブジェクトです。