#53 JavaScriptアウトプット

こんにちは、hiroです😃

いつもは小ネタを挟むのですが、本日はアウトプット長めのため早速始めたいと思います！

Ajax（Asynchronous JavaScript + XML）

・ブラウザ上で非同期通信を利用して、ページ内容を更新する通信技術。

■application.jsファイル
require（ " <該当ファイルをパスで指定> " ）

・該当するjsファイルを作成後、jsファイルを読み込むための設定をapplication.jsファイルに記述する。

■該当するjsファイル
function 関数名（）{
  リクエストを送信する処理を記述
};
window.addEventListner（ ' load ', 実行したい処理を記述 ）;

・ページが読み込まれる事をトリガーにして、処理が実行されるように関数を定義。

■該当するjsファイル
function 関数名（）{
  const 変数名 = document.getElementById（ " id名 " ）;
  変数名 . addEventListner（ " 発火イベント内容 ", （）=> {
  } 実行したい処理を記述  ）;
};
window.addEventListner（ ' load ', 実行したい処理を記述 ）;

・イベント発火した時の処理を記述する。

const 変数名（formData） = new FormData （フォームの要素）;

・フォームに入力された値を取得できるオブジェクト。
・引数にフォームの要素を渡す事で、そのフォームに入力された値を取得。

const 変数名（慣例的な記述はXHR） = new XMLHttpRequest（）;

・JavaScriptを用いてサーバーとHTTP通信を行うときに利用するオブジェクト。Ajaxの実装を進めるのに必要。

XHR  . open（ " 第一引数 " , " 第二引数 " , " 第三引数 " ）;

・openは、リクエストを初期化するメソッド。リクエスト内容を指定。
・第一引数は HTTPメソッドの指定、第二引数は パスの指定、第三引数は 非同期通信のON/OFFを記述。

XHR  . responseType = " json ";

・responseTypeは " レスポンスのデータフォーマット（どのような形式のデータにするか） " を指定するプロパティ。レスポンスで欲しいデータフォーマットを予め指定しておく必要があるため。
・データフォーマットとは、リクエストやレスポンスをはじめとしたデータのやり取りを行う際に使われるデータの型。
・JSON（JavaScript Obuject Notation）とは、JavaScriptをもとにして構成されたデータフォーマットの事。

XHR . send（formData）;

・リクエストを送信するメソッド。

変数名 . addEventListner（ ' 発火イベント内容 ',（e）=> {
  e . preventDefault（）;
} ）;

・preventDefaultは " 既定のイベントを無効化するためのメソッド " 
・Ajaxで設定したリクエストとは別に、デフォルトで送信されるリクエストがあるため、同じ内容が重複される事を防ぐための記述。
・（e）はイベントオブジェクト。イベント発生時の情報を持ったオブジェクト。どんな文字列を指定しても良いが、慣例的にeventの頭文字が多く使用される。

■controllerファイル
def create
  変数名 = モデル名.create（）
  render json： { 変数：キー }
end

・レスポンスで返却されるデータフォーマットにJSONを指定。

XHR . onload = （） => {  };

・onloadプロパティとは、リクエストの送信が成功したときに行う処理を定義するプロパティの事。

<挿入したい要素名>.insertAdjacentHTML(挿入したい位置,挿入したいHTML);

・insertAdjacentHTML（インサートアジェイセントHTML）は、HTMLをある要素の指定した箇所に挿入するメソッドの事。
・第一引数に "HTMLを挿入したい位置" 、第二引数に "挿入したいHTML" を記述。

本日も最後まで読んで頂き、誠にありがとうございました！🙇‍♂️