<DAY93>非同期通信を使った処理 - yujiroのプログラミング

#学習状況

●学習日数 93日

●学習時間(本日)7時間

●累計学習時間 387.5時間

●一日あたりの平均学習時間 4.16時間

非同期通信とは

サーバーにリクエストを送信しビューを返す動作をせず、
ajaxを用いて、必要な情報のみを取得し、サーバーの不可を軽減し、ユーザーの使用環境を向上させる事ができる。
ajaxとはjsとHML(jsonもいける) を使って非同期にサーバに接続する技術の事。
以下参考サイト
https://qiita.com/hisamura333/items/e3ea6ae549eb09b7efb9

ajaxでやり取りするテキスト形式はhtmlでなく、json形式である。

JSON

言語とは完全に独立したテキスト形式
ハッシュ形式。

  "shipTo" : { "name" : "Jane Smith",
            
               "zip"   : "12345" },

実施までの手順。

ajax通信技術は主にjQueryを使用する為、railsにgemを導入する必要がある。

jQuery

rails aaaa

require jqueryの読み込み場所注意。

aplication.jsで読み込ませる順番に注意。
rails-ujsの上に持ってきた。

//= require jquery
//= require rails-ujs
//= require activestorage
//= requirzze turbolinks
//= require_tree .

記法について

コントローラにデータをhtml形式、またはjson形式でやり取りするかを指示する。

respond_toメソッド

リクエストが、htmlのデータかjsonのデーターなのかを判別してくれる機能
拡張子とヘッダーの中身をみて自動判別。
jsonの場合はハッシュ形式でrenderにデーターを渡してjsonに変換する。

respond_to do |format|
format.html{render...}
format.json{render...}
end

prevent default

デフォルトの動作を発生させない。
ユーザーが発生させる動作が対象。
やる理由
デフォルトの動作が作動しないようにする時に使う。
fromと入力はデフォルト。
qiita.com

そのほかテキストで詰まったメソッドなど

val()

HTMLのvalue属性にしていされている文言を引っ張る事ができる。
文字を引っ張る時なんかに使うかな。
form forで生成したformのなかに入っている情報など

.append(todo.content)

()の内の情報を指定先のセレクタに保管する

Form Data

フォームのデーターを送信する時に使用する。jsのクラス

非同期化のロジック

1コントローラにて
html処理かajax処理なのかわける
2分けるのにrespond toメソッドを使う
リクエストを分ける判断は、ヘッダーの情報と拡張子をみて判断する
jsonの場合はハッシュ形式がrender通じてjsonに変換する

3jsonで処理する場合を書く
対象となるセレクトが何かのアクション実行時に（e）空の変数をeventと明示的にする事で
セレクト対象をそのアクションとする、リクエストにはデフォルトのイベントがあるため
デフォルトイベントを発生させない為に、e.prevent defalut();と記法する。ここでのeは定義したeventを指している。